Data Template in WPF)

Data Template in WPF)
Zhou yinhui

In WPF, We can customize the display mode for our own data. That is to say, although some data is certain, we can make it behave in a variety of ways, such as a time, in the past, we generally used a string (for example, "") for display, but why can't we display a small clock? In fact, this is more reasonable, use the data template Technology in WPF to show your data at will and easily.

The data template is applicable to Content Control and Items Control controls.

Let's assume that there is a class of using System;

Namespace Demo
{
Public class People
{
Private string name;

Private string photo;

Public People (string name, string photo)
{
This. name = name;
This. photo = photo;
}

Public string Name
{
Get
{
Return this. name;
}
Set
{
This. name = value;
}
}

Public string Photo
{
Get
{
Return this. photo;
}
Set
{
This. photo = value;
}
}
}
}

This class represents a person, his name, and his photos (paths)

If there is a ListBox control in our software to display a list composed of multiple people. before net 3.0, we may only use text to list the names of people, or spend a lot of time rewriting the list control to Display photos while displaying the names of people in the list.

See the following code: <ListBox x: Name = "ListBox_PeopleList" ItemTemplate = "{StaticResource MyTemplate}"/>

We define a ListBox and define its ItemTemplate as our custom MyTemplate. That is to say, the list items will display the list content according to the method specified by MyTemplate.
In this way, we can use our imagination to customize MyTemplate.
To use our People class in XAML, we need to introduce its namespace. refer to the following code: xmlns: demo = "clr-namespace: Demo"

Here, Demo is the namespace where our People class is located. You can use demo to represent this namespace in the future.

The following code defines our MyTemplate template to show how the List displays its project: <Window. Resources>
<! -- List template -->
<DataTemplate x: Key = "MyTemplate" DataType = "{x: Type demo: People}">
<Grid verticalignment = "Center" HorizontalAlignment = "Center" Margin = "4,4, 4,4">
<Grid. ColumnDefinitions>
<ColumnDefinition Width = "Auto"/>
<ColumnDefinition Width = "Auto"/>
</Grid. ColumnDefinitions>
<Image Source = "{Binding Photo}" Width = "50" Height = "50" Grid. Column = "0" Grid. RowSpan = "1"/>
<TextBlock Text = "{Binding Name}" Grid. Column = "1" Grid. ColumnSpan = "1" HorizontalAlignment = "Center" verticalignment = "Center"/>
</Grid>
</DataTemplate>
</Window. Resources>

We define a template as a window resource. The resource is saved in a resource dictionary. x: Key = "MyTemplate" indicates its Key in the resource dictionary. DataType = "{x: type demo: People} "indicates that the data Type of the data template is the People class under the demo namespace. In Gird, we define the visual tree of the data template, this is also the focus of our work, that is, the visual tree defines how to display our data. We use an Image control and bind its Source to the Photo property of People, so that the Image can be displayed on the Imag control, then, on the right side of the Image, we use a TextBlock control to display the Name of the person (bind the Name attribute of People to the Text attribute of TextBlock ).
Notice what this data template is actually doing: it defines the Representation of the People type object, here is the display of the People photo and show the name on the right side of the photo.
When we need People objects to be displayed to users in this way, we only need to specify the data template to the control for displaying People objects.
For example

<ListBox x: Name = "ListBox_PeopleList" ItemTemplate = "{StaticResource MyTemplate}"/>

The list control displays its project as defined by MyTemplate.

It is easier to create a sex list control than the previous Code method.