#216 – Defining Several Different Gradient Stops in a Gradient Fill

When defining a gradient fill, you can include a number of different gradient stops.  For each stop, you define the color that the gradient should be at that stop (set Color property), and the location of the stop along the gradient line, from 0.0 to 1.0 (Offset property).

Here’s an example of a left-to-right gradient that has five different stops:

		<Button Content="5 stops - Red, Green, Orange, Blue, Pink" Height="200" Width="300">
			<Button.Background>
				<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
					<GradientStop Color="Red" Offset="0.0"/>
					<GradientStop Color="Green" Offset="0.2"/>
					<GradientStop Color="Orange" Offset="0.5"/>
					<GradientStop Color="Blue" Offset="0.9"/>
					<GradientStop Color="Pink" Offset="1.0"/>
				</LinearGradientBrush>
			</Button.Background>
		</Button>

Here’s a gradient brush that defines the seven colors of the rainbow.

                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Orange" Offset="0.17"/>
                    <GradientStop Color="Yellow" Offset="0.33"/>
                    <GradientStop Color="Green" Offset="0.5"/>
                    <GradientStop Color="Blue" Offset="0.67"/>
                    <GradientStop Color="Indigo" Offset="0.83"/>
                    <GradientStop Color="Violet" Offset="1.0"/>
                </LinearGradientBrush>