初学wpf-数据驱动之数据外衣

正在学习wpf，做笔记学习，还是个超级菜鸟
例：一个listbox显示汽车的logo，通过厂商名字显示；点击listbox的列显示汽车的名字，图片，等信息。
1，首先新建程序，添加Resources文件夹，包含汽车的图片Images文件夹，汽车的图片Logos文件夹
准备一个汽车类

public class Car
    {
        public string Automaker { get; set; }
        public string Name { get; set; }
        public string Year { get; set; }
        public string Topspeed { get; set; }
    }

2，思考：汽车厂商和汽车名字不能直接作为图片路径，本例是通过厂商的名字显示Logo，汽车的名字显示Image，那么就需要两个convert来把名字资源转换成图片路径。
代码如下：

//把汽车名字转换成image图片路径
    public class NameToPath : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {

            string uriStr = string.Format(@"Resources/Images/{0}.png", (string)value);
            return new BitmapImage(new Uri(uriStr, UriKind.Relative));
        }
        
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

//把产商转换成logo图片路径
    public class AutoConvertLogo : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //UriKind.Relative表示这个uri是相对的

            string uriStr = string.Format(@"Resources/Logos/{0}.png", (string)value);
            return new BitmapImage(new Uri(uriStr, UriKind.Relative));
        }
        //未被用的
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

3，有了这两个convert之后，开始设计datetemplate
建立windows资源

<Window.Resources>
        <!--converters-->
        <local:AutoConvertLogo x:Key="a"/>
        <local:NameToPath x:Key="b"/>
        <!--DateTemplate for Detail View-->
        <DataTemplate x:Key="carDetailTemplate">
            <Border BorderBrush="Black" BorderThickness="3">
                <StackPanel Margin="5">
                    <Image Width="400" Height="250" Source="{Binding Name,Converter={StaticResource b}}"/>
                    <StackPanel Orientation="Horizontal" Margin="5,0">
                        <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="5,0"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="5,0">
                        <StackPanel Orientation="Horizontal" Margin="5,0">
                            <TextBlock Text="Automaker:" FontWeight="Bold"/>
                            <TextBlock Text="{Binding Automaler}" Margin="5,0"/>
                            <TextBlock Text="year:" FontWeight="Bold"/>
                            <TextBlock Text="{Binding Year}" Margin="5,0"/>
                            <TextBlock Text="Topspeed:" FontWeight="Bold"/>
                            <TextBlock Text="{Binding TopSpeed}" Margin="5,0"/>
                        </StackPanel>
                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>
        <!--DateTemplate for Item View-->
        <DataTemplate x:Key="carListItemViewTemplate">
            <Grid Margin="2">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Automaker,Converter={StaticResource a}}"
                           Grid.RowSpan="3" Width="64" Height="64"/>
                    <StackPanel Margin="5,0">
                        <TextBlock Text="{Binding Name}" FontSize="20" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Year}" FontSize="20"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Window.Resources>

4，最后添加窗体内容

<StackPanel Orientation="Horizontal" Margin="5">
        <UserControl ContentTemplate="{StaticResource carDetailTemplate}"
                     Content="{Binding SlectedItem,ElementName=listBoxCars}"/>
        <ListBox x:Name="listBoxCars" Width="180" Margin="5,0"
                 ItemTemplate="{StaticResource carListItemViewTemplate}"/>
    </StackPanel>

5，.cs代码（比较简单的一个初始化和数据绑定，相比较于事件驱动要简单很多）

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            init();
        }
        //初始化listbox
        private void init()
        {
            List<Car> carlist = new List<Car>()
            {
                new Car(){Automaker = "AGV1",Name="in1",Year="1999",Topspeed = "190"},
                new Car(){Automaker = "AGV1",Name="in2",Year="2000",Topspeed = "111"},
                new Car(){Automaker = "AGV1",Name="in3",Year="2222",Topspeed = "222"},
                new Car(){Automaker = "AGV1",Name="out1",Year="1111",Topspeed = "333"},
            };
            //填充数据源
            this.listBoxCars.ItemsSource = carlist;
        }
    }

运行效果图如下，比较简单，随便找的几张图用用