(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Tip: How to use a LinearGradientBrush

(7 votes)
Martin Mihaylov
>
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
9 comments   /   posted on Sep 08, 2008
Categories:   General , Design

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!


Subscribe

Comments

  • -_-

    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
    bad artiicle
  • -_-

    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
    Succinct and helpful.
  • -_-

    RE: Tip: How to use a LinearGradientBrush


    posted by SSSS on Jun 08, 2010 17:14
    DONT WORK!!! BAD EXAMPLE!!!! PLEASE REMOVE!!
  • -_-

    RE: Tip: How to use a LinearGradientBrush


    posted by minsu135 on Sep 26, 2010 14:34
    Thank you!!!!!!!!

Add Comment

Login to comment:
  *      *