Как использовать эллипс XAML как контейнер для другой формы?

Question

Я создаю UserControl в WPF, чтобы моделировать глаз (например, мультяшный глаз) и перемещать «зрачок» (черный круг) вокруг глаз, чтобы смотреть в определенных направлениях. Я хотел бы использовать «белую» часть глаза в качестве контейнера для «черной» части глаза, так что черный эллипс будет обрезаться по мере приближения к краям глаза и не будет просто плавать вне белого эллипса.

Как это сделать в 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> 

Результат: