Recommended

Skip Navigation LinksHome / Search

Search

 
Results Per Page

Found 2 results for gradient.
Date between: <not defined> and <not defined>
Search in: News , Articles , Tips , Shows , Showcase , Books

Order by Publish Date   Ascending |  Title   |  Rating  

  • Tip: How to use RadialGradientBrush

    1 comments  /  posted by  Martin Mihaylov  on  Sep 07, 2008 (more than a year ago)
    Tags: Silverlight , RadialGradientBrush , gradient

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

    <Rectangle x:Name="MyRect" Width="100" Height="100">
        <Rectangle.Fill>
            <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0.5,0.5">
                <GradientStop Color="Yellow" Offset="0.3"></GradientStop>
                <GradientStop Color="Orange" Offset="0.8"></GradientStop>
                <GradientStop Color="Red" Offset="1"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    C#

    RadialGradientBrush gradient = new RadialGradientBrush();
    gradient.Center = new Point( 0.5, 0.5 );
    gradient.GradientOrigin = new Point( 0.5, 0.5 );
    gradient.RadiusX = 0.5;
    gradient.RadiusY = 0.5;
     
    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;

    First we define the RadialGradientBrush and set its Center, GradientOrigin, RadiusX and RadiusY properties. The Center property determines the center of the outermost circle of the gradient and the GradientOrigin defines the beginning of the radial gradient. Note that the GradientOrigin property and the Center property can have different values. The RadiusX and RadiusY properties are used to define the size of the gradient and are applied as coefficients to the width and the height of the rectangle. 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!



  • Tip: How to use a LinearGradientBrush

    8 comments  /  posted by  Martin Mihaylov  on  Sep 07, 2008 (more than a year ago)
    Tags: Silverlight , LinearGradientBrush , gradient

    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!


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)