#546 – Adding Gradient Stops in Blend

April 27, 2012 3 Comments

A gradient fill can have a number of different stops—positions within the gradient that should take on a color value that you specify.

To add or remove stops for a gradient, start by selecting the control containing a property that you’ll set to a gradient.  (E.g. The Background property of a Label).

In the Brushes area of the Properties panel, click the icon for a Gradient brush.

Now we have a gradient with two gradient stops, going from all black at the top of the control to all white at the bottom.

You can click anywhere within the gradient line to add a gradient stop.  Once added, click on the gradient that you want to change and then select a color for the gradient on the color palette.

We can continue adding as many gradient stops as we like.

Advertisement

Filed under Blend Tagged with , , , ,

#530 – Creating a Linear Gradient in Blend

April 5, 2012 1 Comment

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.

You can create a linear gradient directly in XAML using the <LinearGradientBrush> element.  You can also use the the tools in Blend to create a gradient.

Let’s create a new gradient to use as the background brush for a Window.  Start by selecting the window object.

Now click the Background property on the Properties panel.

Select the gradient brush option.

You’ll see that the default gradient has two gradient stops, going from black to white.

Click on the black gradient stop and select a new color in the color palette.  This will change the first gradient stop, so the gradient will now run from your new color, to white.

Your Window now has a gradient background.

Filed under Blend Tagged with , , ,

#213 – Changing the Gradient Line in a Linear Gradient Brush

February 10, 2011 1 Comment

By default, the gradient line in a linear gradient brush starts in the upper left corner of a control and extends to the lower right corner.  You can change the gradient line by specifying values for the StartPoint and EndPoint properties.

Each of these properties specifies a two-dimensional point (X,Y) indicating where the gradient line starts or ends.  The default StartPoint is (0,0) and the default EndPoint is (1,1).

For a gradient where we don’t specify start and end points and have two gradient stops:

                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>

We get the following gradient.  The gradient line is drawn, for reference.

A top-to-bottom gradient would look like this:

                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>


And left to right:

                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>

Filed under Graphics Tagged with , , ,