Control
In previous articles we have started to look at the Control class. This is inherited by many WPF controls, including most of the layout controls that we have seen in earlier instalments of the tutorial. So far we've seen how the tab order is determined for a set of controls and how you can modify various font properties. In this instalment we'll look at several miscellaneous properties that change the way in which controls are rendered. They have all been used in earlier articles without mentioning the class in which they are defined. For this reason, I won't describe them in great detail.
To follow the samples in Visual Studio you'll need a new WPF application project. Create a new solution, naming it, "ControlDemo". This will ensure that you can copy and paste the example XAML directly into the automatically generated window to see the results.
Background and Foreground
The Background property allows you to change the background of controls that support it. In many cases this means changing the background to a solid colour. However, many other options are available, including using gradient fills or applying tiled images. This is because the Background is actually set to a Brush instance. There are many different types of brush. We'll see them in a later article when we consider pens and brushes.
Foreground allows you to change the foreground colour of controls. Generally this modifies the colour of text, although there is no reason why a control could not use the foreground colour for other visuals. As with Background, Foreground can be set to a solid colour in XAML with a simple colour name. You can also use a hexadecimal code that includes levels for red, green, blue and, optionally, transparency. More complex options are also available because the property uses a Brush value.
The following XAML includes a UniformGrid with four cells. Each cell holds a Label that is formatted with solid foreground and background colours.
<Window x:Class="ControlDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Control Demo"
Width="200"
Height="200">
<UniformGrid>
<Label Background="Red" Foreground="White">Red</Label>
<Label Background="Yellow" Foreground="Black">Yellow</Label>
<Label Background="Green" Foreground="White">Green</Label>
<Label Background="Blue" Foreground="White">Blue</Label>
</UniformGrid>
</Window>If you execute the code you will see that the window appears similar to that shown below:
BorderBrush and BorderThickness
We've already seen the BorderBrush and BorderThickness properties in the article describing the Border layout control. BorderBrush sets the colour of the border for controls that respect the property in their templates. The value can be set in XAML using a simple colour name or more complex elements for gradients or patterns. From code you can apply a Brush.
BorderThickness, as the name suggests, allows you to change the thickness of the lines that form a border. The property receives a Thickness value, which contains details for the left, right, top and bottom borders. As described in the earlier Border article, you can use one, two or four numbers to set the thickness in XAML. If you use a single value, all of the borders are the same width. When you specify two values the top and bottom borders are the same, as are the left and right borders. The two pairs of border elements might not be equal though. When four values are used, all of the borders are set independently.
<Window x:Class="ControlDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Control Demo"
Width="200"
Height="200">
<Border BorderBrush="Purple" BorderThickness="10"/>
</Window>Try replacing the contents of the Window XAML with the code above. This creates a window that contains a single border. The border is purple with a uniform width of 10 device independent units (DIU).
Padding
The Padding property was first described in the Border article. It creates an inner margin within a control that includes child elements. As with the Margin property, it is set using a Thickness value, allowing the top, bottom, left and right padding values to be changed freely.
The final sample XAML defines a window that holds a UniformGrid with four cells. In each cell is a Border with a pale background. Each border contains a label with an orange background. The margin and padding values vary for the four borders.
<Window x:Class="ControlDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Control Demo"
Width="300"
Height="175">
<UniformGrid>
<Border Background="PaleGoldenrod" Margin="10" Padding="10">
<Label Background="Orange">Margin/Padding</Label>
</Border>
<Border Background="PaleGoldenrod" Margin="0" Padding="10">
<Label Background="Orange">Padding</Label>
</Border>
<Border Background="PaleGoldenrod" Margin="10" Padding="0">
<Label Background="Orange">Margin</Label>
</Border>
<Border Background="PaleGoldenrod" Margin="0" Padding="0">
<Label Background="Orange">No Margin/Padding</Label>
</Border>
</UniformGrid>
</Window>When you run the program you can see the effects of combining Margin and Padding properties. Where no margin is present, in the two items on the right, the border fills its cell, hiding any white area. The cells to the left hold borders with margins so the grid's white background is exposed.
The top two borders include a padding value. This creates an inner margin between the border and its label. You can see these areas rendered with the "PaleGoldenrod" colour.
8 October 2013