Adding Controls to an Application with WPF - Working with templates
(Page 4 of 4 )
If you run the application right now, you should see something like this:
As you can see, the ListBox is properly connected to the XML data in Tasks.xml, with one ListBox item for each task, but each task's data are crammed together. Obviously, each task needs to be presented more neatly. It would be nice if each item in the ListBox could have a checkbox to the left, indicating whether or not the task is done, and, on the right, have the title, colored according to the priority (green for low priority, orange for medium priority, and red for high priority), and the description. When the user checks the checkbox, the task is marked as done.
To do this, we need to use templates. Templates are defined in the Resources section. In particular, we need to define a DataTemplate. Inside it, we can lay out controls just as we did in the main window. Let's go ahead and define the DataTemplate:
<DataTemplate x:Key="TaskTemplate">
</DataTemplate>
Above, we create an empty DataTemplate. Inside of it, we can create a Grid to lay out the controls, just as we did with the window:
<Grid>
</Grid>
Inside the Grid, we need to define rows and columns. For the layout described above, we need two columns and two rows. The checkbox will occupy the first column and will span two rows. The title will occupy the second column of the first row, and the description will occupy the second column of the second row. Here are the appropriate definitions:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
Next, we need to add the controls to the Grid. For the checkbox, we'll use a CheckBox control (of course), and for the title and the description, we'll use two TextBlock controls:
<CheckBox Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Row="0" Grid.Column="1" FontWeight="Bold" />
<TextBlock Grid.Row="1" Grid.Column="1" Margin="0,0,0,5" />
The final step is databinding. We need to match the value of each control with an element in the XML. For the two TextBlock controls, this is very easy:
<TextBlock Grid.Row="0" Grid.Column="1" FontWeight="Bold" Text="{Binding XPath=Name}" />
<TextBlock Grid.Row="1" Grid.Column="1" Margin="0,0,0,5" Text="{Binding XPath=Description}" />
The CheckBox will require more work, however, as will the colorization according to priority. With the title and the description, we're simply taking string values form the source and using them as string values in the application. With the status and the priority, though, we need to convert a string value into a check and another string value into a color. This will require an extra step and some actual code.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
