Linear Gradient Brush Fade WPF

Question

I have a brush that colors the background of a header. I like the way the brush looks but would like it to fade to transparent in the bottom third. Any ideas how to do this?

<LinearGradientBrush 
  x:Key="HeaderBackgroundBrush" 
  EndPoint=".5,1" 
  StartPoint="1,0">
  <GradientStop Color="#006699" Offset="1"/>
  <GradientStop Color="#80A8CC" Offset="0.5"/>
</LinearGradientBrush>

score 27 · Accepted Answer · answered Jul 20 '10 at 21:36

I'm not sure you can do it by working only at the brush level, however you could apply an OpacityMask to your control:

<LinearGradientBrush
    x:Key="HeaderBackgroundOpacityMask"
    StartPoint="0,0"
    EndPoint="0,1">
  <GradientStop Color="#FFFFFFFF" Offset="0"/>
  <GradientStop Color="#FFFFFFFF" Offset="0.667"/>
  <GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>

...
<Border Background="{StaticResource HeaderBackgroundBrush}"
        OpacityMask="{StaticResource HeaderBackgroundOpacityMask}">

score 10 · Answer 2 · answered Jul 20 '10 at 21:25

10

just specify the colors as ARGB (including alpha) like this: #AARRGGBB. Then give your last gradient stop an alpha value of 0 (fully transparent; in your case #0080A8CC). HTH.

answered Jul 20 '10 at 21:25

andyp

6,229
3
38
55

This won't work, because the desired direction of the opacity gradient is not the same as the direction of the color gradient – Thomas Levesque Jul 20 '10 at 21:37
Change it to this and it will work. gradient = new LinearGradientBrush(startColour.Color, endColour.Color,new Point(0,0),new Point(1,0)); – rollsch Apr 27 '18 at 04:49
This worked for my needs. I was in fact not aware of using alpha values. I had seen "extra" values in the RGB hex values, but did not realize what it was. – N_tro_P May 02 '18 at 14:31

score 0 · Answer 3 · answered Apr 27 '18 at 04:50

If you want to do it in C# use the following code. This will give you a light pink/salmon to fully transparent brush. Change the #FF and #00 to get a different transparency gradient.

var startColour = (SolidColorBrush)new BrushConverter().ConvertFrom("#FFff99a8");
var endColour = (SolidColorBrush)new BrushConverter().ConvertFrom("#00ff99a8");
_dirtyColourBackground = new LinearGradientBrush(startColour.Color, endColour.Color,new Point(0,0),new Point(1,0));

Linear Gradient Brush Fade WPF

3 Answers3

Linked