丸みを帯びた境界内にレンダリングをクリップするにはどうすればいいですか？

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でコードをコンパイルして実行したときに問題なく表示されます。 第2に、このRadialGradientBrushを最初ののBackgroundとしてください。このような何か：

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

そしてここでは、最終的な外観です。