2个方向的WPF渐变答案

【问题标题】：WPF Gradient in 2 directions2个方向的WPF渐变
【发布时间】：2011-05-20 17:42:21
【问题描述】：

如果我想让列表框中选定项目的边缘看起来平滑，我这样做：

<Setter Property="Background" TargetName="Bd">
     <Setter.Value>
         <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
           <GradientStop Offset="0" Color="Transparent"/>
           <GradientStop Offset="0.05" Color="{x:Static SystemColors.HighlightColor}"/>
           <GradientStop Offset="0.95" Color="{x:Static SystemColors.HighlightColor}"/>
           <GradientStop Offset="1" Color="Transparent"/>
         </LinearGradientBrush>
     </Setter.Value>
 </Setter>

但是，这只会使左右边缘平滑，而不是顶部和底部。如果我改变 StartPoint 和 EndPoint，我可以使顶部和底部平滑，但是我会失去左右两侧的平滑度。那么如何使用渐变画笔使所有 4 个边框都平滑呢？

【问题讨论】：

标签： wpf gradient brush

【解决方案1】：

我不认为它可以用内置的渐变画笔来完成。 ~~你可以实现自己的RectangleGradientBrush，但我认为这并不容易......~~（实际上这似乎不可能，因为Brush 的实现依赖于无法访问的低级渲染内容来自用户代码）

【讨论】：

另一个渐变之上的渐变呢？
也许可以，但是你需要使用 OpacityMask，它可能会变得很丑......

【解决方案2】：

OpacityMask 是执行此操作的一种方法，正如其他人已经建议的那样，但这有点具有挑战性，因为您不能在画笔上设置 OpacityMask。您只能在视觉上设置它 - OpacityMask 是在每个视觉的基础上完成的。但是ListBox 的Background 不是可视化树中的一个单独元素——它只是ListBox 的一个属性，它通常是模板绑定到模板中某处的Border 元素之类的东西。

有些人在这里建议使用位图效果也是如此 - 这些效果也适用于整个视觉效果，而不是单个画笔。

但是，您可以使用VisualBrush 处理此问题 - 让您可以使用可视化树来定义画笔。所以我认为这大致符合您的要求：

<Setter Property="Background" TargetName="Bd">
  <Setter.Value>
    <VisualBrush>
      <VisualBrush.Visual>
        <Rectangle Width="1" Height="1">
          <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
              <GradientStop Offset="0" Color="Transparent"/>
              <GradientStop Offset="0.05" Color="{x:Static SystemColors.HighlightColor}"/>
              <GradientStop Offset="0.95" Color="{x:Static SystemColors.HighlightColor}"/>
              <GradientStop Offset="1" Color="Transparent"/>
            </LinearGradientBrush>
          </Rectangle.Fill>
          <Rectangle.OpacityMask>
            <LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
              <GradientStop Offset="0" Color="Transparent"/>
              <GradientStop Offset="0.05" Color="White"/>
              <GradientStop Offset="0.95" Color="White"/>
              <GradientStop Offset="1" Color="Transparent"/>
            </LinearGradientBrush>
          </Rectangle.OpacityMask>
        </Rectangle>
      </VisualBrush.Visual>
    </VisualBrush>
  </Setter.Value>
</Setter>

不过，这些角落可能不是您想要的 - 取决于它们最终有多大。当你使用这种技术时，它们看起来并不特别圆。所以你可以沿着效果路线走。你可能更喜欢这个：

<Setter Property="Background" TargetName="Bd">
  <Setter.Value>
    <VisualBrush Viewbox="0.1,0.1,0.8,0.8">
      <VisualBrush.Visual>
        <Border Width="100" Height="100" CornerRadius="10"
             Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}">
          <Border.Effect>
            <BlurEffect Radius="20"/>
          </Border.Effect>
        </Border>
      </VisualBrush.Visual>
    </VisualBrush>
  </Setter.Value>
</Setter>

请注意，我使用的是Effect 而不是BitmapEffect。 Effect 的选项较少，但它们通常是更好的选择，因为它们设计用于在硬件中渲染。

【讨论】：

谢谢！我使用了模糊效果！