Completing a WPF To-Do List Application - Stylizing the application
(Page 3 of 5 )
The to-do list works fine, but it does look a bit dull. We need to fix this by stylizing the application a bit. After all, WPF was built with the user's visual experience in mind, and why not take advantage of this?
One way—the most basic way—to change the look of the to-do list is to manipulate properties of the controls at the attribute level in XAML. The Properties Window in Visual Studio provides a convenient way to explore some of these properties and assign values.
Using attributes in XAML, we can easily modify the look of the “Add Task” button to give it an orange look:
<Button Name="AddButton" Grid.Row="1" Grid.Column="0" Margin="0,3,2,0" Content="Add Task" Click="AddButton_Click" Background="PaleGoldenrod" BorderBrush="DarkOrange" FontSize="14" Foreground="DarkOrange" />
If you run the application, you'll see that this works just fine: the button now sports a new look. However, if the look of one button is changed, then the look of other buttons must be changed, along with the looks of the other controls. Otherwise, the look is inconsistent and probably unappealing. However, applying a style to each control individually through attributes quickly gets tiring, and, moreover, the resulting XAML will look like a complete mess and be very difficult to read, much less manage or update. Rather than dealing with every control individually, we need to deal with the controls in groups.
Fortunately, WPF provides a way to do just that. Using styles, we can apply a consistent look for a target set of controls. This way, we can style the buttons the exact same way, the labels, and so on, without having to apply the style to each control individually. All we need to do is set the attributes one time. This saves a lot of work, and the resulting XAML is neat. Moreover, the look of the application can be changed very quickly, since it doesn't involve changing each control individually.
Styles belong in the same group as templates: they're resources, and so they need to go in a Resources section of the XAML. However, the to-do list application uses two windows, and, as a result, we can't put styles in Windows.Resources. Instead, the styles must be put in Application.Resources inside the App.xaml file. This way, the styles will be global rather than specific to a certain window. If you look inside of App.xaml, you'll notice that the Application.Resources tag is already there.
Defining styles is very simple. We only need to specify the target type (Button, CheckBox, etc.) and then list the properties we want to set and the values with which we'll be setting them. Let's start by applying the style from the “Add Task” button to all buttons. Go ahead and remove the style attributes from the button, if you've added them. Next, put the following XAML inside of the Application.Resources element:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="PaleGoldenrod" />
<Setter Property="BorderBrush" Value="DarkOrange" />
<Setter Property="Foreground" Value="Orange" />
<Setter Property="FontSize" Value="14" />
</Style>
When the application is run, all buttons will share the same look, even the buttons in the add task dialog. This creates a little problem, however. The dialog buttons are much smaller than the main window buttons, but the font size is the same in both. This means the text on the dialog buttons is cut off at the bottom. In this situation, a completely consistent look works against us.
Next: Stylizing the application, continued >>
More Windows Scripting Articles
More By Peyton McCullough
