wpf - XAML 楕円を別の形状のコンテナーのように使用するにはどうすればよいですか?

Question

私は WPF で UserControl を作成して目 (漫画の目など) をモデル化し、特定の方向を見るために「瞳孔」(黒い円) を目の中で動かします。目の「白い」部分を目の「黒い」部分のコンテナとして使用したいので、黒い楕円が目の端に到達すると切り取られ、浮いてしまうことはありません白い楕円の外側。

WPF/XAML でこれを行うにはどうすればよいですか?

Answer 1

目の外側の部分としてBorder大きなを使用し、その上にを作成して、内側の目が確実にクリッピングされるようにすることができます。CornerRadiusOpacityMaskBorderBorder

簡単な例:

<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>

結果：