Как отрезать рендеринг в пределах закругленной границы?

Question

Я пытаюсь создать границу с закругленными углами и подсветкой на ее верхней половине. Я использую эллипс с радиальным градиентом, перекрывая верхнюю половину границы, чтобы выделить выделение, но я не могу понять, как предотвратить эллипс, окрашивающий углы границы. Вот скриншот из Kaxaml:

А вот код XAML:

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray"> 

    <Grid Width="256" Height="256"> 
    <Border CornerRadius="16" Background="Black" Margin="4"> 
     <Border Background="Gray" Margin="32"> 
     <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt" 
        HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Border> 
    </Border> 
    <Border CornerRadius="16" ClipToBounds="True"> 
     <Ellipse> 
     <Ellipse.Fill> 
      <RadialGradientBrush> 
      <GradientStop Color="White" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
      </RadialGradientBrush> 
     </Ellipse.Fill> 
     <Ellipse.RenderTransform> 
      <TransformGroup> 
      <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/> 
      <TranslateTransform Y="-235"/> 
      </TransformGroup> 
     </Ellipse.RenderTransform> 
     </Ellipse> 
    </Border> 
    <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/> 
    </Grid> 
</Page> 

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

Я пробовал играть с OpacityMask, но я должен признаться, что я действительно не понимаю, как его использовать, особенно при преобразовании эллипса для рендеринга. Что бы я ни пытался, эллипс либо полностью исчезает, либо полностью не изменяется.

Любая помощь была бы принята с благодарностью.

Заранее спасибо.

Answer 1

Во-первых, он отлично выглядит, когда я скомпилировал и запустил код в Visual Studio. Во-вторых, почему вы не используете этот RadialGradientBrush как Background от первого Border? Нечто подобное:

<Border CornerRadius="16" > 
    <Border.Background> 
     <RadialGradientBrush Center=".5 0" GradientOrigin=".5 0" RadiusX="1" > 
      <GradientStop Color="White" Offset="0"/> 
      <GradientStop Color="Black" Offset="1"/> 
     </RadialGradientBrush> 
    </Border.Background> 
</Border> 

Answer 2

Вместо использования ClipToBounds или OpacityMask, я в конечном итоге с помощью радиального градиента в качестве фона к дополнительному Border элемента. Благодаря альфа-мыши для наконечника.

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray"> 

    <Grid Width="256" Height="256"> 
    <Border CornerRadius="16" Background="Black" Margin="4"> 
     <Border Background="Gray" Margin="32"> 
     <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt" 
        HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Border> 
    </Border> 
    <Border CornerRadius="16" Margin="4"> 
     <Border.Background> 
     <RadialGradientBrush> 
      <RadialGradientBrush.Transform> 
      <TransformGroup> 
       <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/> 
       <TranslateTransform Y="-235"/> 
      </TransformGroup> 
      </RadialGradientBrush.Transform> 
      <GradientStop Color="White" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
     </RadialGradientBrush> 
     </Border.Background> 
    </Border> 
    <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/> 
    </Grid> 
</Page> 

И вот окончательный вид:

Спасибо.