#212 – Creating a Linear Gradient Brush

Whenever WPF expects a Brush, e.g. for a control’s Background property, you can use a linear gradient brush rather than a solid color brush.

A linear gradient is a fill style that fills an area with a pattern that starts out as one color and gradually changes to one or more other colors.

A linear gradient changes colors along a gradient line.  By default, this line extends from the upper left corner down to the lower right corner of the area being filled.

You specify the colors to be used by defining a series of gradient stops.  Each stop describes the color to use and an offset (0.0 to 1.0) indicating how far along the gradient line that color will appear.

Here’s an example, with the gradient changing from red to blue.

        <Button Height="100" Width="200" Content="A button" Margin="10">
            <Button.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>
            </Button.Background>
        </Button>

About these ads

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

4 Responses to #212 – Creating a Linear Gradient Brush

  1. Pingback: Tweets that mention #212 – Creating a Linear Gradient Brush « 2,000 Things You Should Know About WPF -- Topsy.com

  2. Pingback: #213 – Changing the Gradient Line in a Linear Gradient Brush « 2,000 Things You Should Know About WPF

  3. Pingback: #530 – Creating a Linear Gradient in Blend « 2,000 Things You Should Know About WPF

  4. Pingback: #809 – You Can Use a Brush for a Control’s Background | 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 312 other followers

%d bloggers like this: