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

Question

我正在WPF中创建一个UserControl来模拟一只眼睛（就像卡通眼睛一样），并且会移动＆＃34; pupil＆＃34; （黑色圆圈）在眼睛周围向某个方向看。我想使用＆＃34; white＆＃34;眼睛的一部分作为＆＃34;黑色＆＃34;的容器。眼睛的一部分，这样黑色椭圆会在到达眼睛边缘时被剪掉，并且不会漂浮在白色椭圆之外。

如何在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>

结果：