#231 – You Can Use a Brush for a Control’s Foreground

February 28, 2011 1 Comment

Though brushes in WPF are most often used to fill in the background for a window or a control,  you can also render the foreground of many controls using a brush.

For example, we can use a brush instead of a solid color for the Foreground property of a Label.  The text of the label will be rendered in a specified font and the body of the letters will be rendered using the specified brush.

		<Label Content="You can render text with a brush.." HorizontalAlignment="Center" Margin="20"
			   FontSize="24" FontWeight="Bold">
			<Label.Foreground>
				<LinearGradientBrush StartPoint="0,0.5" EndPoint="1.0,0.5">
					<GradientStop Color="DarkSlateBlue" Offset="0.0"/>
					<GradientStop Color="SkyBlue" Offset="1.0"/>
				</LinearGradientBrush>
			</Label.Foreground>
		</Label>

Advertisement

Filed under Graphics Tagged with , , , , ,

#228 – Starting/Ending a Gradient Fill Outside a Control

February 25, 2011 Leave a comment

If you specify start and end points for a linear gradient that are inside the control (i.e. between 0 and 1), the start/stop colors are extended to the edge of the control based on the value of the SpreadMethod property.

You can also specify StartPoint and EndPoint positions that are outside the control, i.e. by using X/Y values that are less than 0.0 or greater than 1.0.

When you specify start/stop positions outside of a control, the control will be filled with that portion of the larger gradient that corresponds to the control’s position within the gradient.

Here’s an example with a red-blue fill that starts and finishes outside of the control.  Notice that the control is filled with a subset of the full red-blue gradient, so ends up being shades of magenta.

		<Rectangle Width="200" Height="100" Margin="30">
			<Rectangle.Fill>
				<LinearGradientBrush StartPoint="-1,-1" EndPoint="1.5,1.5">
				    <GradientStop Color="Red" Offset="0.0"/>
				    <GradientStop Color="Blue" Offset="1.0"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>

Filed under Graphics 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 , , ,

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

February 13, 2011 3 Comments

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>

Filed under Graphics Tagged with , , , ,

#215 – Other Choices for Gradient Spreads Outside the Fill Area

February 12, 2011 1 Comment

If a gradient fill has start/stop points that lie within the control, the fill behavior outside the gradient is dictated by the SpreadMethod property of the gradient brush.

In the example below, the gradient starts at X=0.33 and stops at X=0.67.  There are three different values that you can set SpreadMethod to, dictating how the control is filled at X < 0.33 and X > 0.67.

SpreadMethod = GradientSpreadMethod.Pad (the default).  The colors at each end of the gradient are used to fill the rest of the control.

SpreadMethod = GradientSpreadMethod.Reflect. The gradient repeats, reversing its direction, to fill the rest of the control.

SpreadMethod = GradientSpreadMethod.Repeat.  The gradient repeats, but in the original direction.  As much of the gradient as will fit is used.

 

 

Filed under Graphics Tagged with , , , ,

#214 – Starting/Ending a Gradient Fill Inside a Control

February 11, 2011 2 Comments

You typically set the StartPoint and EndPoint of a gradient fill at the control’s boundary.  For example, a red-blue gradient might start at the left edge of the control and end at the right edge.  This is done with a StartPoint of (0,0.5) and an EndPoint of (1,0.5).

You can also specify start and end points that are in the interior of the control.  If we specify (0.33,0.5) as the StartPoint and (0.67,0.5) as the EndPoint, we get the following.  (Gradient line drawn, for reference).

We still have a red-to-blue gradient, but the gradient starts 1/3 of the way into the rectangle and finishes 2/3 of the way into the rectangle.

The fill behavior outside the specified gradient line depends on the value of the GradientBrush.SpreadMethod.  The default for this property, GradientSpreadMethod.Pad, specifies that the color at the edge of the gradient should just be extended to the edge of the control.

Filed under Graphics Tagged with , , , , , ,

#213 – Changing the Gradient Line in a Linear Gradient Brush

February 10, 2011 1 Comment

By default, the gradient line in a linear gradient brush starts in the upper left corner of a control and extends to the lower right corner.  You can change the gradient line by specifying values for the StartPoint and EndPoint properties.

Each of these properties specifies a two-dimensional point (X,Y) indicating where the gradient line starts or ends.  The default StartPoint is (0,0) and the default EndPoint is (1,1).

For a gradient where we don’t specify start and end points and have two gradient stops:

                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>

We get the following gradient.  The gradient line is drawn, for reference.

A top-to-bottom gradient would look like this:

                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>


And left to right:

                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>

Filed under Graphics Tagged with , , ,

#212 – Creating a Linear Gradient Brush

February 9, 2011 4 Comments

Whenever WPF expects a Brush, e.g. for a control’s Background property, you can use a linear gradient brush rather than a solid color brush.

A linear gradient is a fill style that fills an area with a pattern that starts out as one color and gradually changes to one or more other colors.

A linear gradient changes colors along a gradient line.  By default, this line extends from the upper left corner down to the lower right corner of the area being filled.

You specify the colors to be used by defining a series of gradient stops.  Each stop describes the color to use and an offset (0.0 to 1.0) indicating how far along the gradient line that color will appear.

Here’s an example, with the gradient changing from red to blue.

        <Button Height="100" Width="200" Content="A button" Margin="10">
            <Button.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>
            </Button.Background>
        </Button>

Filed under Graphics Tagged with , , ,