WPF Gradient在2个方向

Question

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

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

Answer 1

的OpacityMask是要做到这一点,因为其他人已经提出一种方法,但因为你不能设置一个很轻微有挑战性OpacityMask上一刷.您只能在视觉上进行设置 - OpacityMask这是在每个视觉基础上完成的.但是Backgrounda中的a 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.你有更少的选项Effect,但它们通常是更好的选择,因为它们被设计为在硬件中渲染.