两个方向的WPF渐变

时间:2010-12-06 01:40:27

标签: wpf gradient brush

如果我想让列表框中所选项目的边缘看起来平滑,我会这样做:

<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个边框平滑?

2 个答案:

答案 0 :(得分:6)

OpacityMask是一种方法,正如其他人已经建议的那样,但它有点挑战,因为你无法在画笔上设置OpacityMask。你只能在视觉上设置它 - OpacityMask是基于每个视觉的东西。但是Background的{​​{1}}不是视觉树中的单独元素 - 它只是ListBox的一个属性,它通常模板绑定到像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的选项较少,但它们通常是更好的选项,因为它们旨在以硬件呈现。

答案 1 :(得分:0)

我不认为可以使用内置渐变画笔完成。 你可以实现自己的RectangleGradientBrush,但我觉得这很简单...... (实际上它似乎不可能,因为Brush实现依赖于低级渲染无法从用户代码访问的东西)