如何将XAML椭圆像容器一样用于其他形状？

Question

我正在WPF中创建一个UserControl来模拟一只眼睛(就像一只卡通眼睛),并将眼睛内的"瞳孔"(黑色圆圈)移动到某个方向.我想用眼睛的"白色"部分作为眼睛"黑色"部分的容器,这样黑色椭圆会在到达眼睛边缘时被剪掉,而不会浮动在白色椭圆之外.

我怎么能在WPF/XAML中这样做？

Answer 1

你可以使用一个Border大CornerRadius的眼睛作为眼睛的外部,并创建一个OpacityMask,Border以确保内眼被夹到Border

快速示例:

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="121" Width="278" Name="UI">

    <Grid Background="DarkGray" ClipToBounds="True">
        <Border x:Name="opacityMask" CornerRadius="1000" Background="White" />
        <Border CornerRadius="1000" Background="White" >
            <Ellipse  Width="50" Height="50" Fill="Black"/>
            <Border.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=opacityMask}" />
            </Border.OpacityMask>
        </Border>
    </Grid>
</Window>

结果: