Comment couper le rendu pour être dans une bordure arrondie?

Question

Je suis en train de créer une bordure avec des coins arrondis et un point fort sur sa moitié supérieure. J'utilise une ellipse avec un dégradé radial, recouvrant la moitié supérieure de la frontière, pour donner le point culminant, mais je ne peux pas comprendre comment empêcher l'ellipse coloration des coins de la frontière. Voici une capture d'écran de Kaxaml:

Et voici le code 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>

Comment puis-je arrêter les zones de coin supérieur étant affectées par l'ombrage de l'ellipse?

J'ai essayé de jouer avec OpacityMask, mais je dois avouer que je ne comprends pas vraiment comment l'utiliser, en particulier avec l'ellipse étant transformée pour le rendu. Tout ce que je tente, l'ellipse disparaît soit entièrement ou est totalement insensible.

Toute aide serait grandement appréciée.

Merci à l'avance.

Answer 1

Tout d'abord, il semble bien quand je compilé et exécuté votre code dans Visual Studio. Deuxièmement, pourquoi ne pas utiliser cette RadialGradientBrush comme Background du premier Border? Quelque chose comme ceci:

<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

Au lieu d'utiliser ClipToBounds ou OpacityMask, je fini par utiliser le gradient radial que le fond à un élément de Border supplémentaire. Merci à l'alpha-souris pour la pointe.

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

Et voici l'aspect final:

Merci.