#### Book

Home / Tips / View Tip

# Tip: How to use a LinearGradientBrush

8 comments   /   posted by Martin Mihaylov on Sep 08, 2008
Categories: Controls and UI

Here is an example of how to use a LinearGradient Brush to fill a rectangle for example:

Xaml

`<Rectangle x:Name="MyRect" Width="100" Height="100">`
`    <Rectangle.Fill>`
`        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >`
`            <GradientStop Color="Yellow" Offset="0.2"></GradientStop>`
`            <GradientStop Color="Orange" Offset="0.5"></GradientStop>`
`            <GradientStop Color="Red" Offset="0.8"></GradientStop>`
`        </LinearGradientBrush>`
`    </Rectangle.Fill>`
`</Rectangle>`

C#

`LinearGradientBrush gradient = new LinearGradientBrush();`
`gradient.StartPoint = new Point( 0, 0 );`
`gradient.EndPoint = new Point( 1, 1 );`
` `
`GradientStop color1 = new GradientStop();`
`color1.Color = Colors.Yellow;`
`color1.Offset = 0.2;`
`gradient.GradientStops.Add( color1 );`
` `
`GradientStop color2 = new GradientStop();`
`color2.Color = Colors.Orange;`
`color2.Offset = 0.5;`
`gradient.GradientStops.Add( color2 );`
` `
`GradientStop color3 = new GradientStop();`
`color3.Color = Colors.Red;`
`color3.Offset = 0.8;`
`gradient.GradientStops.Add( color3 );`
` `
`MyRect.Fill = gradient;`

We define the gradient and set its StartPoint and EndPoint properties. They are logical points, which means that the point 1,1 has coordinates 100,100 inside the rectangle or we have a point with coordinates 1 time the width of the rectangle and 1 time the height of the rectangle. In this case the gradient will be displayed diagonally, but with this two properties you can place as you please. After that we define the GradientStops and set their colors and offsets. The Offset property is used to determine where the gradient stop will have a solid color and is applied to the length of the gradient.

That's it!

• ### RE: Tip: How to use a LinearGradientBrush

posted by James Snider on Aug 18, 2009 05:01
this is shit.  if you can't in detail, then don't call it "how to use".
• ### This is not a Tip

posted by Jason Johnson on Oct 29, 2009 19:06
Please remove this nonsense. It doesn't explain a thing. Is it here just to generate traffic?
• ### RE: Tip: How to use a LinearGradientBrush

posted by Duncan on Nov 13, 2009 00:51

This is exactly what I needed to know, the C# equivilent to generating a gradient brush in XAML. Many thanks.

Cheers,
Duncan

• ### RE: Tip: How to use a LinearGradientBrush

posted by Tom Glenn on Dec 16, 2009 12:25
Perfect "How To". Don't know what the other two idiots are complaining about.

Nice post, thanks!

• ### SPAM!!!

posted by Ricardo Arjona on Dec 18, 2009 23:44
• ### A better article

posted by Alberto Gil on Dec 19, 2009 00:01
A better approach http://www.c-sharpcorner.com/UploadFile/mahesh/LGB04152009233225PM/LGB.aspx to explain it
• ### RE: Tip: How to use a LinearGradientBrush

posted by passerby on Feb 04, 2010 20:50