#558 – Reversing a Gradient Using Blend

May 15, 2012 1 Comment

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>

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

#227 – You Can Specify Gradient Fills in Absolute Coordinates

February 24, 2011 Leave a comment

When you specify a gradient fill’s starting position in 2D space, you typically use coordinates that are normalized to the size of the control, ranging from 0.0 to 1.0.

With the MappingMode property, you can instead specify the gradient’s start and stop points in absolute (device-independent) units, rather than as a ratio of the control’s size.

In the example below, we set MappingMode to Absolute, and then specify the gradients start/stop in absolute units.  This has the effect of having the gradient reach its target colors the same number of pixels into each control.

	<Window.Resources>
		<LinearGradientBrush x:Key="HappyFill" MappingMode="Absolute" StartPoint="0,10" EndPoint="50,10">
		    <GradientStop Color="AliceBlue" Offset="0.0"/>
		    <GradientStop Color="Chocolate" Offset="1.0"/>
		</LinearGradientBrush>
	</Window.Resources>

	<StackPanel>
		<Rectangle Height="100" Width="100" Fill="{StaticResource HappyFill}" Margin="30"/>
		<Button Content="!" Width="25" Background="{StaticResource HappyFill}" Height="25"/>
		<Label Content="We few, we happy few, we band of brothers.  --Hal V"
			HorizontalAlignment="Center" Margin="15"
			Background="{StaticResource HappyFill}"/>
	</StackPanel>


Note that MappingMode does not apply to the gradient stop offsets.

Filed under Graphics Tagged with , , ,

#226 – Gradient Fills Adjust to the Size of the Control

February 23, 2011 Leave a comment

Because the start/stop points and gradient stops within a gradient fill are normalized to a 0.0-1.0 range, the same gradient can be used to fill controls of different sizes.  The fill changes color proportionally, relative to the size of the control, rather than at specific pixel positions.

In the example below, we define a linear gradient brush and then apply it to several controls of different sizes.

	<Window.Resources>
		<LinearGradientBrush x:Key="HappyFill" StartPoint="0,0.5" EndPoint="1,0.5">
		    <GradientStop Color="AliceBlue" Offset="0.0"/>
		    <GradientStop Color="Chocolate" Offset="1.0"/>
		</LinearGradientBrush>
	</Window.Resources>

	<StackPanel>
		<Rectangle Height="100" Width="200" Fill="{StaticResource HappyFill}" Margin="30"/>
		<Button Content="!" Width="25" Background="{StaticResource HappyFill}" Height="25"/>
		<Label Content="We few, we happy few, we band of brothers.  --Hal V"
			HorizontalAlignment="Center" Margin="15"
			Background="{StaticResource HappyFill}"/>
	</StackPanel>

Filed under Graphics Tagged with , ,