WPF degradado en 2 direcciones

Question

Si quiero hacer los bordes de un elemento seleccionado en un cuadro de lista aspecto suave hago esto:

<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> 

Sin embargo, esto sólo hace que el borde izquierdo y derecho suave, no la parte superior y abajo. Si cambio StartPoint y EndPoint, puedo hacer que la parte superior e inferior se suavicen, pero luego pierdo la suavidad en los lados derechos de la izquierda &. Entonces, ¿cómo puedo suavizar las 4 fronteras usando un pincel de gradiente?

Answer 1

El

OpacityMask es una forma de hacer esto, como otros ya lo han sugerido, pero es un poco desafiante porque no se puede establecer un OpacityMask en un pincel. Solo puede configurarlo en un visual: OpacityMask es algo que se hace de forma visual. Pero el Background de ListBox no es un elemento separado en el árbol visual; es solo una propiedad del ListBox, y generalmente está vinculado a algo como un elemento Border en algún lugar de la plantilla.

Lo mismo ocurre con el uso de los efectos de mapa de bits que algunas personas han sugerido aquí; también se aplican a imágenes completas, no a pinceles individuales.

Sin embargo, puede manejar esto con VisualBrush - que le permite definir un pincel utilizando un árbol visual. Así que creo que esto hace más o menos lo que estás buscando:

<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> 

Las esquinas pueden no ser exactamente lo que está buscando, aunque - depende de lo grande que terminan siendo. No se ven especialmente redondos cuando usas esta técnica. Entonces podrías ir por la ruta del efecto. Es posible que prefiera esto:

<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> 

Nota que he utilizado un Effect en lugar de un BitmapEffect. Tiene menos opciones con Effect, pero generalmente son una mejor opción ya que están diseñadas para procesarse en hardware.

Answer 2

No creo que se pueda hacer con los cepillos de gradiente incorporados. Se podría implementar su propio RectangleGradientBrush, pero no creo que es fácil ... (en realidad no parece posible, ya que dependen de las implementaciones Brush materia de representación de bajo nivel que no es accesible desde el código de usuario)