#227 – You Can Specify Gradient Fills in Absolute Coordinates

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.

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

		<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}"/>

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

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: