WPF-数据模板

WPF设计数据模板(DataTemplete)是为了让数据也有外衣。

DataTemplete常应用在三个地方：

1、ContentControl(内容控件)的ContentTemplete属性，应用在内容控件的内容上；

2、ItemsControl(条目控件/也叫列表控件)的ItemTemplete属性，应用在列表控件的每一个项上；

3、GridViewColumn的cellTemplete属性，应用在GridViewColumn的单元格上。

如何创建一个DataTemplete?

1、WPF数据模板其实并不难，通常在写数据模板前，我们都会把数据模板的布局代码写在一个窗体中或者UserControl中；

2、观察预览界面感觉差不多之后，直接把布局部分的代码拷贝到DataTemplete标签中。

3、拷到DataTemplete标签里面后，只需再注意使用Binding，让每一个控件都知道自己要与哪个数据建立关联就好了。

比如我们现在准备写一个ListBox的项的数据模板，也就是给ListBoxItem添加一个数据外衣：让每一个ListBoxItem都是一个左边是人的头像，右边是上下分布，上面显示人名下面显示人的个性签名的列表。该怎么实现呢？

第一步：创建一个空UserControl，现根据上面的需求写好布局。

<Border BorderBrush="Blue" BorderThickness="1" CornerRadius="6">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="86"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="pack://application:,,,/MyTemplete;component/Pic/bobo.jpg" Margin="6"/>
        <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center" Margin="6 0">
            <TextBlock Text="博哥" Foreground="Green" FontSize="22" TextAlignment="Left" Margin="0 6"/>
            <TextBlock Text="知之为知之，不知为不知，是知也!哈哈哈哈!!!" Foreground="Brown" FontSize="18" TextWrapping="Wrap" TextAlignment="Left" Margin="0 6"/>
        </StackPanel>
    </Grid>
</Border>

在编辑器里面的预览图：

第二步：创建一个用户信息实体类UserInfo，属性有UserLogo、UserName、UserWords。

/// <summary>
/// 用户信息
/// </summary>
public class UserInfo
{
    /// <summary>
    /// 用户名
    /// </summary>
    public string UserName { get; set; }
    /// <summary>
    /// 用户头像
    /// </summary>
    public string UserLogo { get; set; }
    /// <summary>
    /// 个性签名
    /// </summary>
    public string UserWords { get; set; }
}

第三步：新建一个资源字典ListBoxStyle.xaml，写入资源<DataTemplete></DataTemplete> 设置好资源的key比如就叫myListBoxItemDataTemplete和DataType(数据模板依赖哪个目标数据类型)

<DataTemplate x:Key="MyListBoxItemTemplete" DataType="{x:Type local:UserInfo}">
    <Border BorderBrush="Blue" BorderThickness="1" CornerRadius="6">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="{Binding UserLogo}" Margin="6 0"/>
            <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center" Margin="6 0">
                <TextBlock Text="{Binding UserName}" Foreground="Green" FontSize="22" TextAlignment="Left" Margin="0 6"/>
                <TextBlock Text="{Binding UserWords}" Foreground="Brown" FontSize="18" TextWrapping="Wrap" TextAlignment="Left" Margin="0 6"/>
            </StackPanel>
        </Grid>
    </Border>
</DataTemplate>

PS:这里最好设置我们的数据模板要给哪种数据类型做外衣，先指定了DataType以后，下面的Binding才会智能提示，UserName等属性。

第四步：在程序窗口中，添加LisBox，并设置ListBox的ItemTemplete属性的资源值是myListBoxItemDataTemplete。在后台添加C#代码组装数据，设置数据源。

在进行这一步之前，别忘记把我们写的数据模板引入到App.xaml里面，这样ListBox才能识别到。

<Application x:Class="MyTemplete.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MyTemplete"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Style/ListBoxStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

我把数据模板写到了ListBoxStyle.xaml资源字典里面了,接下来在主窗体写入ListBox:

<ListBox  Name="MyListBox" HorizontalAlignment="Center" ItemTemplate="{StaticResource MyListBoxItemTemplete}"/>　　

public MainWindow()
{
    InitializeComponent();
    List<UserInfo> userInfos = new List<UserInfo>()
    {
        new UserInfo(){UserLogo="pack://application:,,,/MyTemplete;component/Pic/chaoge.jpg",UserName="超哥",UserWords="我就是天天要带坑货队友吃鸡的花满楼,砖石玩家了解一下。"},
        new UserInfo(){UserLogo="pack://application:,,,/MyTemplete;component/Pic/minshener.jpg",UserName="敏婶儿",UserWords="我走中路，法师让给我我贼溜。我排位3000场，我贼稳。下路鲁班巡航导弹支援一下。"},
        new UserInfo(){UserLogo="pack://application:,,,/MyTemplete;component/Pic/bobo.jpg",UserName="博哥",UserWords="知之为知之，不知为不知，是知也。学而时习之，不亦乐乎。"},
    };
    MyListBox.ItemsSource = userInfos;
}

至此，我们的数据模板的分享就结束了。效果图如下：

我的项目目录结构：

问题：ListBoxItem设置完数据模板之后，还能再设置控件模板么?

答：当然可以了，控件模板是任何一个控件都有的属性。数据模板和控件模板是两个概念，它两个同时使用都没问题。