#532 – Using the Gradient Tool to Move Gradient Stops

April 9, 2012 Leave a comment

You can use the Gradient Tool in Blend to adjust an existing gradient.  You can move the starting and ending points of the gradient, as well as any of the gradient stops.

When you first create a gradient, the endpoints are typically located on the edge of the control and there is a gradient stop at each end.

		<Border.Background>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="Green" Offset="0.0"/>
				<GradientStop Color="White" Offset="1"/>
			</LinearGradientBrush>
		</Border.Background>


Using the Gradient Tool, you can move one or more gradient stops outside of the control boundaries, to indicate what the color should be at that starting or ending point.  The gradient used inside the control will then be a subset of the full gradient.

Advertisement

Filed under Blend Tagged with , , ,

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

Filed under Blend Tagged with , , , ,