如何将渲染剪辑为圆角边框？

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

我最终使用径向渐变作为其他ClipToBounds元素的背景，而不是使用OpacityMask或Border。感谢尖端的alpha-mouse。

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

这是最后一次出场：

感谢。

Answer 2

首先，当我在Visual Studio中编译并运行代码时，它看起来很好。 其次，为什么不将此RadialGradientBrush用作第一个Background的{​​{1}}？像这样：

Border