#548 – Change the Offset of a Gradient Stop in Blend

May 1, 2012 Leave a comment

Once you’ve added one or more gradient stops to a gradient brush, you can use the mouse to drag any of the gradient stops left or right.  Dragging a gradient stop changes the value of its Offset, which dictates where along the gradient line the specified color is achieved for the gradient.

For example, let’s say that we start with a simple gradient that goes from Blue at the top of a control to white at the bottom of a control.  The gradient line runs from the top of the control (Y=0) to the bottom (Y=1).  The first gradient is at an offset of 0 (top of control) and the second gradient is at an offset of 1 (bottom of control).

You can now move one of the gradient stops by sliding it.  This will change the value of its Offset, changing where on the gradient line that color is reached.

Advertisement

Filed under Blend Tagged with , , ,

#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.

Filed under Blend Tagged with , , , ,

#216 – Defining Several Different Gradient Stops in a Gradient Fill

February 13, 2011 3 Comments

When defining a gradient fill, you can include a number of different gradient stops.  For each stop, you define the color that the gradient should be at that stop (set Color property), and the location of the stop along the gradient line, from 0.0 to 1.0 (Offset property).

Here’s an example of a left-to-right gradient that has five different stops:

		<Button Content="5 stops - Red, Green, Orange, Blue, Pink" Height="200" Width="300">
			<Button.Background>
				<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
					<GradientStop Color="Red" Offset="0.0"/>
					<GradientStop Color="Green" Offset="0.2"/>
					<GradientStop Color="Orange" Offset="0.5"/>
					<GradientStop Color="Blue" Offset="0.9"/>
					<GradientStop Color="Pink" Offset="1.0"/>
				</LinearGradientBrush>
			</Button.Background>
		</Button>


Here’s a gradient brush that defines the seven colors of the rainbow.

                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Orange" Offset="0.17"/>
                    <GradientStop Color="Yellow" Offset="0.33"/>
                    <GradientStop Color="Green" Offset="0.5"/>
                    <GradientStop Color="Blue" Offset="0.67"/>
                    <GradientStop Color="Indigo" Offset="0.83"/>
                    <GradientStop Color="Violet" Offset="1.0"/>
                </LinearGradientBrush>

Filed under Graphics Tagged with , , , ,