Quantcast
Channel: 2,000 Things You Should Know About WPF » Gradient Fill
Viewing all articles
Browse latest Browse all 4

#558 – Reversing a Gradient Using Blend

0
0

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>


Filed under: Blend Tagged: Blend, Gradient Fill, Gradient Stop, GradientStop, WPF

Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images