#531 – Adjusting a Gradient Using the Gradient Tool

April 6, 2012 1 Comment

You can change an existing gradient fill by using the Gradient Tool.

To adjust a gradient, start by selecting the control that uses a gradient that you want to change, either in the Objects and Timeline panel, or in the XAML editor.  In this example, we’re going to change the background color gradient for a Border.

If your control uses a gradient for more than one property, select the property on the Properties panel.  You’ll see the existing gradient displayed.

Click the Gradient Tool icon.

You’ll see a visual indication of the gradient drawn on the control, with an arrow showing the direction of the gradient and little circles showing each gradient stop.

You can move the head or tail of the arrow to change the starting/stopping point of the gradient, as well as its direction.

You can change the position of a gradient stop by dragging the corresponding circle.

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 , , ,

#228 – Starting/Ending a Gradient Fill Outside a Control

February 25, 2011 Leave a comment

If you specify start and end points for a linear gradient that are inside the control (i.e. between 0 and 1), the start/stop colors are extended to the edge of the control based on the value of the SpreadMethod property.

You can also specify StartPoint and EndPoint positions that are outside the control, i.e. by using X/Y values that are less than 0.0 or greater than 1.0.

When you specify start/stop positions outside of a control, the control will be filled with that portion of the larger gradient that corresponds to the control’s position within the gradient.

Here’s an example with a red-blue fill that starts and finishes outside of the control.  Notice that the control is filled with a subset of the full red-blue gradient, so ends up being shades of magenta.

		<Rectangle Width="200" Height="100" Margin="30">
			<Rectangle.Fill>
				<LinearGradientBrush StartPoint="-1,-1" EndPoint="1.5,1.5">
				    <GradientStop Color="Red" Offset="0.0"/>
				    <GradientStop Color="Blue" Offset="1.0"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>

Filed under Graphics Tagged with , , , ,

#215 – Other Choices for Gradient Spreads Outside the Fill Area

February 12, 2011 1 Comment

If a gradient fill has start/stop points that lie within the control, the fill behavior outside the gradient is dictated by the SpreadMethod property of the gradient brush.

In the example below, the gradient starts at X=0.33 and stops at X=0.67.  There are three different values that you can set SpreadMethod to, dictating how the control is filled at X < 0.33 and X > 0.67.

SpreadMethod = GradientSpreadMethod.Pad (the default).  The colors at each end of the gradient are used to fill the rest of the control.

SpreadMethod = GradientSpreadMethod.Reflect. The gradient repeats, reversing its direction, to fill the rest of the control.

SpreadMethod = GradientSpreadMethod.Repeat.  The gradient repeats, but in the original direction.  As much of the gradient as will fit is used.

 

 

Filed under Graphics Tagged with , , , ,

#214 – Starting/Ending a Gradient Fill Inside a Control

February 11, 2011 2 Comments

You typically set the StartPoint and EndPoint of a gradient fill at the control’s boundary.  For example, a red-blue gradient might start at the left edge of the control and end at the right edge.  This is done with a StartPoint of (0,0.5) and an EndPoint of (1,0.5).

You can also specify start and end points that are in the interior of the control.  If we specify (0.33,0.5) as the StartPoint and (0.67,0.5) as the EndPoint, we get the following.  (Gradient line drawn, for reference).

We still have a red-to-blue gradient, but the gradient starts 1/3 of the way into the rectangle and finishes 2/3 of the way into the rectangle.

The fill behavior outside the specified gradient line depends on the value of the GradientBrush.SpreadMethod.  The default for this property, GradientSpreadMethod.Pad, specifies that the color at the edge of the gradient should just be extended to the edge of the control.

Filed under Graphics Tagged with , , , , , ,