WPF 使用DataTemplate + Binding 展示ListBox內容

先看下運行效果：

項目框架如下：

Car.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WPFDatatemplate
{
    public class Car
    {
        public string Automaker { get; set; }
        public string Name { get; set; }
        public string Year { get; set; }
        public string TopSpeed { get; set; }
    }
}

ConverterClass.cs

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace WPFDatatemplate
{
    public class AutomakerToLogoPathConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string uriStr = string.Format(@"/Resources/Logos{0}.jpg",(string)value);
            return new BitmapImage(new Uri(uriStr,UriKind.Relative));
        }

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

    public class NameToPhotoPathConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string uriStr = string.Format(@"/Resources/Image/{0}.jpg",(string)value);
            return new BitmapImage(new Uri(uriStr, UriKind.Relative));
        }

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

}

MainWindow.xaml:

<Window x:Class="WPFDatatemplate.MainWindow"
        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:WPFDatatemplate"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600">
    <Window.Resources>
        <local:AutomakerToLogoPathConverter x:Key="a21"></local:AutomakerToLogoPathConverter>
        <local:NameToPhotoPathConverter x:Key="n2p"></local:NameToPhotoPathConverter>
        <DataTemplate x:Key="carDetailViewTemplate">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
                <StackPanel Margin="5">
                    <Image Width="400" Height="250" Source="{Binding Name,Converter={StaticResource n2p}}"></Image>
                
                    <StackPanel Orientation="Horizontal" Margin="5,0">
                        <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"></TextBlock>
                        <TextBlock Text="{Binding Name}" FontSize="20" Margin="5"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="5,0">
                        <TextBlock Text="Automaker:" FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding Automaker}" Margin="5,0"></TextBlock>
                        <TextBlock Text="Year:" FontWeight="Bold"></TextBlock>
                        <TextBlock Text="Top Speed:" FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding TopSpeed}" Margin="5,0"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="carListItemViewTemplate">
            <Grid Margin="2">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Automaker,Converter={StaticResource a21}}" Grid.RowSpan="3" Width="64" Height="64"></Image>
                    <StackPanel Margin="5,10">
                        <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding Year}" FontSize="14"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <StackPanel Orientation="Horizontal" Margin="5">
        <UserControl ContentTemplate="{StaticResource carDetailViewTemplate}" Content="{Binding SelectedItem,ElementName=listBoxCars}"></UserControl>
        <ListBox x:Name="listBoxCars" Width="180" Margin="5,0" ItemTemplate="{StaticResource carListItemViewTemplate}"></ListBox>
    </StackPanel>
</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPFDatatemplate
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitialCarList();
        }

        private void InitialCarList()
        {
            List<Car> carList = new List<Car>()
            {
                new Car(){Automaker = "Lamborghini",Name = "Diablo",Year="1990",TopSpeed="340"},
                new Car(){Automaker = "Lamborghini",Name = "Murcielago",Year = "2001",TopSpeed = "353"},
                new Car(){Automaker = "Lamborghini",Name = "Gallardo", Year = "2003",TopSpeed = "325"},
                new Car(){Automaker = "Lamborghini",Name = "Reventon", Year = "2008",TopSpeed = "356"},
            };
            this.listBoxCars.ItemsSource = carList;
        }
    }
}

工程下載地址：https://download.csdn.net/download/chulijun3107/11969578

如果無積分就留下郵箱，我看到發郵件。