wpf - 如何将 XAML 椭圆用作其他形状的容器？

Question

我正在 WPF 中创建一个 UserControl 来模拟眼睛(如卡通眼睛)，并将在眼睛内移动“瞳孔”(黑色圆圈)以朝特定方向看。我想用眼睛的“白色”部分作为眼睛“黑色”部分的容器，这样黑色椭圆就会在到达眼睛边缘时被剪掉，而不会只是 float 在白色椭圆之外。

我如何在 WPF/XAML 中执行此操作？

Answer 1

您可以使用带有较大CornerRadius 的Border 作为眼睛的外部，并在该Border 上创建一个OpacityMask 以确保将内眼剪裁到 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>

结果: