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

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>

Advertisements

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: