Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Data Templates

Data Templates

In Section Hiba! A hivatkozási forrás nem található. we showed an example how to display complex data on a GUI. There we used a ListBox for enumerating dog breeds (own Dog class), and displayed the photo of the breed selected in the ListBox. We implemented this by using the DisplayMemberPath property of the list control and binding controls to each other. WPF provides a more sophisticated toolkit, which improves the limited way in which one can display data on controls. This toolkit is based on the so-called data templates (DataTemplate).

Content controls (with Content property) (Section 0), such as e.g. a Button, have a ContentTemplate property, which can get such a data template as value. For example, if a Dog instance is assigned to Button.Content, then the data template given in Button.ContentTemplate makes it possible to display the name, the photo, and any other property of a given dog on the surface of the button, in any layout and design.

The ItemTemplate property of list controls (Section V.3) has a similar purpose, since it can be used to customize the (uniform) outlook of list elements. In the following example, it can be seen how to assign a DataTemplate to this property.[8] DataType is an important attribute of DataTemplate, and can be used to specify the data type (our Dog class in this case) that the template is allowed to format.

In the following example, we are going to improve the example in Section Hiba! A hivatkozási forrás nem található., by employing and modifying, in a self-explanatory way, the Dog class and the converter that we introduced there. The Path in Section Hiba! A hivatkozási forrás nem található. is going to be used again as a design element. We would like to emphasize the following elements in the source code:

  1. The properties of the Dog class are bound (Binding) one by one to the desired controls. For instance, the Weight property to a TextBox (which can even edit the property), the ImageName property to an Image (by using a self-explanatory converter).

  2. The controls in the template can be aligned on demand. In the current example, a Grid is used, and, furthermore, a StackPanel in one of the cells of the Grid.

<ListBox ItemsSource="{x:Static my:Dog.dogs}">

        <ListBox.ItemTemplate>

                <DataTemplate DataType="my:Dog">

                        <Grid Width="130">

                                ...

                                <Path ... Grid.RowSpan="2" Grid.ColumnSpan="2">

                                        ...

                                </Path>

                                <TextBlock ... Grid.ColumnSpan="2" Text="{Binding Name}"/>

                                <Image ... Grid.Row="1" Source="{Binding ImageName,

                                                Converter={StaticResource imagenameToImageConverterObject}}"/>

                                <StackPanel ... Grid.Row="1" Grid.Column="1">

                                        <TextBlock ... Text="weight: "/>

                                        <TextBox ... Text="{Binding Weight}"/>

                                        <TextBlock ... Text=" kg"/>

                                </StackPanel>

                        </Grid>

                </DataTemplate>

        </ListBox.ItemTemplate>

</ListBox>

Although we are not giving details on the actual design of the template in the above XAML code, the result should be something similar to the one in Figure 3.

XIV.3. Using a data template in a ListBox



[8] Another way to do the same is, of course, to define the DataTemplate as a resource, and to reference its key in the form of ItemTemplate={StaticResource ...}.