Cómo recortar la prestación a estar dentro de un borde redondeado?

Question

Estoy intentando crear un borde con esquinas redondeadas y un punto culminante en su mitad superior. Estoy usando una elipse con un degradado radial, la superposición de la mitad superior de la frontera, para dar el punto culminante, pero no puedo encontrar la manera de prevenir la elipse colorear las esquinas de la frontera. Aquí hay una captura de pantalla de Kaxaml:

Y aquí está el código 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>

¿Cómo puedo evitar las zonas de las esquinas superior siendo afectados por el sombreado de la elipse?

He intentado jugar con OpacityMask, pero tengo que confesar que no entiendo muy bien cómo usarlo, especialmente con la elipse de ser transformado para la representación. Cualquiera que sea lo intento, la elipse o bien desaparece por completo o es afectado en absoluto.

Cualquier ayuda sería muy apreciada.

Gracias de antemano.

Answer 1

En primer lugar, se ve bien cuando se compila y ejecuta código en Visual Studio. En segundo lugar, ¿por qué no se utiliza este RadialGradientBrush como Background de la primera Border? Algo como esto:

<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

En lugar de utilizar ClipToBounds o OpacityMask, Terminé usando el gradiente radial como el fondo a un elemento Border adicional. Gracias a alfa-ratón por la punta.

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

Y aquí está el aspecto final:

Gracias.