如何将渲染剪辑到圆形边框内？答案

【问题标题】：How to clip rendering to be within a rounded border?如何将渲染剪辑到圆形边框内？
【发布时间】：2011-05-15 01:15:04
【问题描述】：

我正在尝试创建一个带有圆角的边框，并在其上半部分突出显示。我正在使用带有径向渐变的椭圆，重叠边框的上半部分，以突出显示，但我不知道如何防止椭圆为边框的角着色。这是 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，但我必须承认我并不真正了解如何使用它，尤其是在椭圆被转换以进行渲染的情况下。无论我尝试什么，椭圆要么完全消失，要么完全不受影响。

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

标签： wpf xaml opacity clipping

【解决方案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>

这是最后的外观：

谢谢。

【讨论】：

【解决方案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>

【讨论】：

这将教会我不要过度简化我的示例代码。 :( 我没有将径向渐变放在边框本身的原因是，在我的实际应用程序中，边框包含其他元素。然后椭圆位于边框及其内容的顶部。使用径向渐变作为边框背景意味着它在边框内容的下方。抱歉，我不清楚这一点。
其实我会更新示例代码和图片，让它更清晰。
另外，我很惊讶您在 Visual Studio 中没有遇到问题。为了仔细检查，我自己也做了同样的事情，问题仍然存在。我正在使用 VS2008。
我会接受这个答案，因为它让我找到了一个解决方案 - 我将在单独的答案中发布，以便代码以格式显示。感谢您的帮助，阿尔法鼠标。