#558 – Reversing a Gradient Using Blend

When defining a gradient fill in Blend, the Offset property of each gradient stop indicates the location of the gradient stop along the gradient line, from StartPoint to EndPoint.

In the example below, the gradient runs from white at the top of the control to blue at the bottom.

		<Button Content="Gradient Fill" HorizontalAlignment="Center"
		        Padding="15,10" Margin="20">
			<Button.Background>
				<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
					<GradientStop Color="White" Offset="0"/>
					<GradientStop Color="Pink" Offset="0.75"/>
					<GradientStop Color="Blue" Offset="1"/>
				</LinearGradientBrush>
			</Button.Background>
		</Button>


You can easily reverse the order of the gradient stops by clicking on a button in Blend. The button is located on the color editing panel.

If we reverse the gradient stops for the example above, the offsets are reversed and the gradient flips upside down.

		<Button Content="Gradient Fill" HorizontalAlignment="Center"
		        Padding="15,10" Margin="20">
			<Button.Background>
				<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
					<GradientStop Color="White" Offset="1"/>
					<GradientStop Color="Pink" Offset="0.25"/>
					<GradientStop Color="Blue"/>
				</LinearGradientBrush>
			</Button.Background>
		</Button>

About these ads

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #558 – Reversing a Gradient Using Blend

  1. Pingback: Dew Drop – May 15, 2012 (#1,327) | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 366 other followers

%d bloggers like this: