如何将渲染内容剪裁为圆角边框内部？

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进行调整，但我必须承认我不太理解如何使用它，特别是在椭圆被转换渲染时。无论我尝试什么方法，椭圆要么完全消失，要么完全不受影响。

如果有任何帮助，将不胜感激。

提前致谢。

- Mal Ross

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>

以下是最终效果：

谢谢。

- Mal Ross

Answer 2

首先，在Visual Studio中编译和运行您的代码时，它看起来很好。 其次，为什么不将RadialGradientBrush用作第一个Border的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>

- alpha-mouse

---

那会教我不要过于简化我的示例代码。:( 我之所以没有将径向渐变放在边框本身上，是因为在我的实际应用程序中，边框包含其他元素。椭圆形则位于边框及其内容的顶部。如果将径向渐变用作边框背景，则意味着它在边框的内容下方。抱歉我没有表达清楚。 - Mal Ross

实际上，我会更新示例代码和图片，以使其更清晰。 - Mal Ross

另外，我很惊讶你在Visual Studio中没有遇到这个问题。为了再次确认，我刚刚自己尝试了一下，问题仍然存在。我正在使用VS2008。 - Mal Ross

我会接受这个答案，因为它让我找到了解决方案 - 我将在单独的答案中发布它，以便代码显示格式。感谢你的帮助，alpha-mouse。 - Mal Ross