WPF中关于DataTemplate的示例（深入浅出WPF）

第一上，UI代码

<Window x:Class="WpfApp1.ImageWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="ImageWindow" Height="450" Width="800">

    <Window.Resources>
        <local:PathToImage x:Key="pathToImage"/>
        
        <DataTemplate x:Key="_carDetailViewTemplate">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
                <StackPanel Margin="5">
                    <Image Width="400" Height="250" Source="{Binding Path=ImagePath,Converter={StaticResource pathToImage}}"/>
                    <StackPanel Orientation="Horizontal" Margin="5,0">
                        <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
                        <TextBlock Text="{Binding Path=Name}" FontSize="20" Margin="5,0"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="_carListItemViewTemplate">
            <Grid Margin="2">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Path=Automarker,Converter={StaticResource pathToImage}}" Width="64" Height="64"/>
                    <StackPanel Margin="5,10">
                        <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Year}" FontSize="14"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <StackPanel Orientation="Horizontal" Margin="5">
        <UserControl ContentTemplate="{StaticResource _carDetailViewTemplate}" Content="{Binding Path=SelectedItem,ElementName=_listBoxCars}"/>
        <ListBox x:Name="_listBoxCars" Width="180" Margin="5,0" ItemTemplate="{StaticResource _carListItemViewTemplate}"/>
    </StackPanel>
</Window>

第二步，C#代码的实现

 public class Car
    {
        public string Name { get; set; }
        public string ImagePath { get; set; }
        public string Automarker { get; set; }
        public string Year { get; set; }
    }
    public class PathToImage : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string url = value as string;
            return (new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute)));
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    /// <summary>
    /// ImageWindow.xaml 的交互逻辑
    /// </summary>
    public partial class ImageWindow : Window
    {
        List<Car> cars = new List<Car>();
        public ImageWindow()
        {
            InitializeComponent();
            cars.Add(new Car { Name = "X-3SD", ImagePath = @"/Images/1.png", Automarker = @"/Images/1.png", Year = "2019" });
            cars.Add(new Car { Name = "S-010", ImagePath = @"/Images/2.png", Automarker = @"/Images/2.png", Year = "2014" });
            cars.Add(new Car { Name = "B-SS4", ImagePath = @"/Images/3.png", Automarker = @"/Images/3.png", Year = "2021" });
            cars.Add(new Car { Name = "X-888", ImagePath = @"/Images/4.png", Automarker = @"/Images/4.png", Year = "2008" });
            _listBoxCars.ItemsSource = cars;

        }
    }