2010-12-06 7 views
6

Wenn ich die Kanten eines ausgewählten Elements in einer Listbox machen wollen aussehen glatt ich dies tun:WPF Gradient in 2 Richtungen

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

Dies macht jedoch nur die linken und rechten Rand glatt, nicht die Spitze und unten. Wenn ich StartPoint und EndPoint ändere, kann ich oben und unten glatt machen, aber dann verliere ich die Glätte auf der linken Seite & rechten Seiten. Also, wie kann ich mit einem Farbverlaufspinsel alle 4 Ränder glatt machen?

Antwort

5

Die OpacityMask ist eine Möglichkeit, dies zu tun, wie andere bereits vorgeschlagen haben, aber es ist etwas schwierig, weil Sie OpacityMask auf einem Pinsel nicht festlegen können. Sie können es nur auf einem visuellen setzen - OpacityMask ist etwas, was auf einer visuellen Basis getan wird. Aber die Background einer ListBox ist kein separates Element in der visuellen Struktur - es ist nur eine Eigenschaft der ListBox, und es ist in der Regel Vorlage an etwas wie ein Border Element irgendwo in der Vorlage gebunden.

Gleiches gilt für die Verwendung von Bitmap-Effekten, die einige Leute hier vorgeschlagen haben - diese werden auch auf ganze Bilder angewendet, nicht auf einzelne Pinsel.

Sie können dies jedoch mit einer VisualBrush umgehen - das können Sie einen Pinsel definieren, indem Sie eine visuelle Struktur verwenden. Also ich denke, das macht ungefähr das, was Sie suchen:

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

Die Ecken nicht ganz sein könnten, was Sie für obwohl gesucht - hängt davon ab, wie groß sie am Ende werden. Sie sehen nicht besonders rund aus, wenn Sie diese Technik anwenden. Du könntest also die Effekt-Route runter gehen. Sie könnten dies bevorzugen:

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

Bitte beachte, dass ich eine Effect verwendet haben, anstatt eine BitmapEffect. Sie haben weniger Optionen mit Effect, aber sie sind normalerweise eine bessere Option, da sie in Hardware gerendert werden sollen.

+0

Danke! Ich habe den Blureffekt benutzt! – Muis

0

Ich glaube nicht, dass es mit den integrierten Gradientenbürsten getan werden kann. Sie könnten Ihre eigene RectangleGradientBrush implementieren, aber ich glaube nicht, es ist einfach ... (eigentlich ist es nicht möglich scheint, als Brush Implementierungen auf niedrigem Niveau Rendering Sachen ab, die aus Benutzercode nicht zugänglich ist)

+0

Was ist mit einem Gradienten auf einem anderen Gradienten? – Machinarius

+0

vielleicht, aber dann müssten Sie mit der OpacityMask spielen, und es könnte ziemlich hässlich werden ... –