DataTemplate(一)

DataTemplate常用的3个地方：

（1）ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。

（2）ItemsControl的ItemTemplate属性，相当于给ItemsControl的数据条目穿衣服。

（3）GridViewColum的CellTemplate属性，相当于给GridViewColumn单元格里的数据穿衣服。

 

 

数据类：

namespace CSDNWpfApp.com.data
{
    public class Car
    {
        /// <summary>
        /// 厂商名称
        /// </summary>
        public string Automaker { get; set; }

        /// <summary>
        /// 汽车名称
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 年份
        /// </summary>
        public string Year { get; set; }

        /// <summary>
        /// 最高时速
        /// </summary>
        public string TopSpeed { get; set; }
    }
}

 

转换类：

有些属性不能直接拿来用，比如汽车厂商名称不能直接拿来作为图片的路径，这时候要使用Converter。有两种办法可以在xaml代码中使用Converter:

(1)把Converter以资源的形式放在资源词典里（本例使用的方法）

(2)为Converter准备一个静态属性，形成单件模式，在xaml代码里使用{x:Static}标签扩展来访问。

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace CSDNWpfApp.com.data
{
    /// <summary>
    /// 厂商名称转换为Logo图片路径
    /// </summary>
    public class AutomakerToLogoPathConverter : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string imgUrl = String.Format("/Resources/Logos/{0}.jpg",value.ToString());
            return new BitmapImage(new Uri(imgUrl, UriKind.Relative));
        }

        //未被用到
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}





using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace CSDNWpfApp.com.data
{
    /// <summary>
    /// 汽车名称转换为图片路径
    /// </summary>
    public class NameToPhotoPathConverter : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string imgUrl = String.Format("Resources/Images/{0}.jpg", value.ToString());
            return new BitmapImage(new Uri(imgUrl, UriKind.Relative));
        }

        //未被用到
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

 

前台窗体代码：

<Window x:Class="CSDNWpfApp.ListBoxWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CSDNWpfApp" xmlns:da="clr-namespace:CSDNWpfApp.com.data"
        mc:Ignorable="d"
        Title="ListBoxWindow" Height="350" Width="623">
    <Window.Resources>
        <da:AutomakerToLogoPathConverter x:Key="a2l"/>
        <da:NameToPhotoPathConverter x:Key="n2p"/>

        <DataTemplate x:Key="carDetailViewTemplate">
            <StackPanel>
                <Image Width="400" Height="250" Source="{Binding Name,Converter={StaticResource n2p}}"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="名称："/>
                    <TextBlock Text="{Binding Name}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="carListItemViewTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Automaker,Converter={StaticResource a2l}}" Width="64" Height="64"/>
                <StackPanel>
                    <TextBlock Text="{Binding Name}"/>
                    <TextBlock Text="{Binding Year}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
        
    </Window.Resources>
    
    <Grid>
        <StackPanel Orientation="Horizontal">
            <UserControl ContentTemplate="{StaticResource carDetailViewTemplate}" Content="{Binding SelectedItem,ElementName=listBoxCars}"/>
            <ListBox x:Name="listBoxCars" Width="180" ItemTemplate="{StaticResource carListItemViewTemplate}"/>
        </StackPanel>
    </Grid>
</Window>

解析说明：

UserControl的Content绑定了ListBox的SelectedItem,可以通过断点查看这个ListBox.SelectItem就是Car数据类

 

 

 

后台代码：

using CSDNWpfApp.com.data;
using System.Collections.Generic;
using System.Windows;

namespace CSDNWpfApp
{
    /// <summary>
    /// ListBoxWindow.xaml 的交互逻辑
    /// </summary>
    public partial class ListBoxWindow : Window
    {
        public ListBoxWindow()
        {
            InitializeComponent();


            List<Car> carList = new List<Car>() {
                new Car(){ Automaker = "厂家1",Name="汽车1",Year="1990",TopSpeed="340"},
                new Car(){ Automaker = "厂家1",Name="汽车2",Year="2001",TopSpeed="353"}
            };

            listBoxCars.ItemsSource = carList;
        }
    }
}

 

 

效果图：