XAML 101: The LinearGradientBrush

FacebookTwitterGoogle+Share

Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/007_LinearGradientBrush

We will pick up where the last post left off where we had a red SolidColorBrush on the Grid for MainPage.xaml:

<Grid>
    <Grid.Background>
        <SolidColorBrush Color="Red"/>
    </Grid.Background>
</Grid>

There are other default Brushes available, and this post focuses on the LinearGradientBrush. What this Brush does is let you specify a sequence of colors that will be used to create a color gradient pattern.

NOTE: There is a RadialGradientBrush for creating a circular or elliptical gradient that was available in Silverlight and WPF, but it is not currently supported in UWP apps so we won’t cover it at this point. If you want RadialGradientBrush added to Windows 10 Universal Apps vote for it here: http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/5890481-please-add-the-radialgradientbrush-to-windows-stor

Let’s change the Background to use a LinearGradientBrush:

<Grid>
    <Grid.Background>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Blue"/>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

The first thing you will probably notice is the GradientStop elements. These values go from 0 to 1, and you can specify any value in between. We will see that soon. The result looks like this:

image

By default, the gradient goes from the upper left corner to the lower left corner. We can change this by modifying the StartPoint and EndPoint poprerties:

<Grid>
    <Grid.Background>
        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Blue"/>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

And the result is like this:

image

Here we changed the start point and end point so that the X value is .5, and the Y value goes from 0 to 1. The default is a start point of 0,0 and and end point of 1,1. We can do a gradient along the X axis like this:

<Grid.Background>
    <LinearGradientBrush StartPoint="0,.5" EndPoint="1,.5">
        <GradientStop Offset="0" Color="Red"/>
        <GradientStop Offset="1" Color="Blue"/>
    </LinearGradientBrush>
</Grid.Background>

image

You can have any number of gradient stops, let’s add another:

<Grid.Background>
    <LinearGradientBrush StartPoint="0,.5" EndPoint="1,.5">
        <GradientStop Offset="0" Color="Red"/>
        <GradientStop Offset=".5" Color="Yellow"/>
        <GradientStop Offset="1" Color="Blue"/>
    </LinearGradientBrush>
</Grid.Background>

image

The colors blend from one to the other between the gradient stops, but let’s say you wanted a sharp transition. We can do something like this:

<Grid.Background>
     <LinearGradientBrush StartPoint="0,.5" EndPoint="1,.5">
         <GradientStop Offset="0" Color="Orange"/>
         <GradientStop Offset=".5" Color="Red"/>
         <GradientStop Offset=".5" Color="Yellow"/>
         <GradientStop Offset="1" Color="Blue"/>
     </LinearGradientBrush>
 </Grid.Background>

By having 2 gradient stops at the same offset, the transition between those 2 colors is immediate and gives us a sharp change in color:

image

So far the StartPoint and the EndPoint have encompassed the entire surface. What if we change the EndPoint to halfway?

<LinearGradientBrush StartPoint="0,.5" EndPoint=".5,.5">
    <GradientStop Offset="0" Color="Orange"/>
    <GradientStop Offset=".5" Color="Red"/>
    <GradientStop Offset=".5" Color="Yellow"/>
    <GradientStop Offset="1" Color="Blue"/>
</LinearGradientBrush>

And this is the result:

image

There is another property on the LinearGradientBrush called SpreadMethod which determines what happens in the parts of the surface that the brush doesn’t cover. This deafaults to “Pad”, where the extra area is filled with whatever the last color was. There are a couple of other options, one is Reflect:

<LinearGradientBrush StartPoint="0,.5" EndPoint=".5,.5" SpreadMethod="Reflect">

image

Pretty cool. The other is Repeat:

<LinearGradientBrush StartPoint="0,.5" EndPoint=".5,.5" SpreadMethod="Repeat">

image

A long post, but there are a lot of options with this Brush. Be creative and try your own combinations.

  • hugovermaak

    Hi Bill.
    Is there a way to use an SVG image as a background? That way one can create a radial gradient background in say for example InkScape and use that to achieve a crisp radial gradient background. It will be static I know but in most of my use cases I would not want to dynamically change it anyway.

    • billreiss

      Yeah I don’t think there is a good workaround for this, there is no way to show SVG natively in XAML, and if you tried to convert it, it would probably try to convert to a RadialGradientBrush and wouldn’t work. One possibility would be to create a Win2D canvas and draw the radial gradient on that, I’ll see if I can get a sample of this working, would be a good thing to blog about.