Skip Navigation LinksHome / Tips / View Tip

Tip: How to use a LinearGradientBrush

+ Add to SilverlightShow Favorites
8 comments   /   posted by Martin Mihaylov on Sep 08, 2008
(5 votes)
Categories: Controls and UI

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


<Rectangle x:Name="MyRect" Width="100" Height="100">
        <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 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!



Comments RSS RSS
  • 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.



  • 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
    bad artiicle
  • A better article  

    posted by Alberto Gil on Dec 19, 2009 00:01
    A better approach to explain it
  • RE: Tip: How to use a LinearGradientBrush  

    posted by passerby on Feb 04, 2010 20:50
    Succinct and helpful.
  • RE: Tip: How to use a LinearGradientBrush  

    posted by SSSS on Jun 08, 2010 17:14

Add Comment


Please add 7 and 2 and type the answer here:

Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)