WPF DataTemplate

这里的程序借鉴的的是刘铁猛老师《深入浅出WPF》
为了帮助我更好的学习，我就写了一些自己的理解，可能不太对，希望有路过的大哥大姐指正一下
需求分析：点击右边的小图片与文字，会在左边出现这个图片和文字，并且是放大版的
下面开始做:
首先把要显示的图片加入到项目中，直接建立文件夹把图片导入即可
下面做model

public class yuanyuan
    {
        public string Name { get; set; }
        public int Year { get; set; }
        public  string Connection{ get; set; }
    }

下面是实现转换器 这一步的目的是因为在很多情况下view层要表现的样子不一定就是Model的那种数据类型，所以用到了转换。

public class NameToLogoPathConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string uriStr = string.Format(@"Resources\Images\{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();
        }
    }

到这一步我有很多不明白的地方，查阅资料之后得到下面的理解：
String.Format：这里是为了得到value所代表的值的图片地址，方便下面的使用。它有很多的重构。
BitmapImage:翻阅资料后知道，当Image控件想要显示图片的时候都要用到它，它可以通过Uri对象指向磁盘中的某一文件。
UriKind.Relative 是指相对路径 在使用绝对路径时，不需要把原图片添加到项目中就可以加载图片。但在使用相对路径是一定应该把图片添加到项目中的。
下面的ConvertBak这次没有用到，等到下次用到再来补充。
下面是View 这里的开头是固定的 忽略我里面写的汉语。。。。

<Window x:Class="WpfText.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:WpfText"
        mc:Ignorable="d"
        Title="我最爱的原原" Height="350" Width="623">
    <Window.Resources>
        <local:NameToLogoPathConverter x:Key="nm"/>
        <DataTemplate x:Key="yuanyuanDetailViewTempate">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
                <StackPanel Margin="5">
                    <Image Height="200" Width="400" Source="{Binding Name, Converter={StaticResource nm}}"/>
                    <StackPanel Orientation="Horizontal" Margin="5,0"/>
                    <TextBlock Text="姓名:" FontWeight="Bold" FontSize="20"/>
                    <TextBlock Text="{Binding Name}" FontSize="20" Margin="5,0"/>
                    <StackPanel Orientation="Horizontal" Margin="5,0">
                        <TextBlock Text="年龄:" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Year}" Margin="5,0"/>
                        <TextBlock Text="与我的关系:" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Connection}" Margin="5,0"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="yuanyuanViewTemplate">
            <Grid Margin="2">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Name, Converter={StaticResource nm}}" Grid.RowSpan="3" Width="64" Height="64"/>
                    <StackPanel Margin="5,10">
                        <TextBlock Text="姓名:" FontSize="16" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"/>
                        <TextBlock Text="年龄" FontSize="14"/>
                        <TextBlock Text="{Binding Year}" FontSize="14"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <StackPanel Orientation="Horizontal" Margin="0,5">
        <UserControl ContentTemplate="{StaticResource yuanyuanDetailViewTempate}" Content="{Binding SelectedItem, ElementName=ListBox}"/>
        <ListBox x:Name="ListBox" Width="180" Margin="5,0" ItemTemplate="{StaticResource yuanyuanViewTemplate}"/>
    </StackPanel>
</Window>

1.local这是指本地
2.Border 是绘制边框和背景
3.DataTemplate里面就是数据模板的部分，这部分是为了数据的展示 这里面的Image的Sources就用到了上面的转换，value就是Name。
4.第二个DataTemplate里面的Grid是为了在一页显示多少项。
5.UserControl是用户自定义控件 可以重用 就是为了满足自己的需要自己用现有的控件组合成一个复杂的控件做自己用
在上面的UserControl中，它的内容如何显示就是刚才定义的第一个DataTemplate 而内容就是绑定的选择项 这个选择项来自于ListBox点击ListBox上的内容 就会在这个界面显示。
6.ListBox
这就一个包含可选择项的列表 这个列表的数据在ViewModel里面 它的内容如何显示就是刚才定义的第二个DataTempate。这个控件的特点就是项目通过程序插入的。
下面是ViewModel

public MainWindow()
        {
            InitializeComponent();
            yuanyuanList();
        }

        private void yuanyuanList()
        {
            List<yuanyuan> list = new List<yuanyuan>()
            {
                new yuanyuan(){Name = "阿原",Year=8,Connection="同桌" },
                new yuanyuan(){Name = "原原",Year=18,Connection="同桌" },
                new yuanyuan(){Name = "原原大宝贝",Year=28,Connection="同桌" },
                new yuanyuan(){Name = "李枖原",Year=38,Connection="同桌" },
            };

            this.ListBox.ItemsSource = list;
        }

这里要注意的是，Name的值一定要和图片的名字一样，要不然根本无法显示和图片。