.NET: WPF Template

Data Template:

要做一个listBox，里面有车子的简单信息，点了里面的item后就会显示详细信息。

car class:

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

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

carListItemView.xaml:

 <UserControl x:Class="WpfApplication1.CarListItemView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              mc:Ignorable="d"
              d:DesignHeight="50" d:DesignWidth="300">
     <Grid Margin="2">
         <StackPanel Orientation="Horizontal">
             <Image x:Name="imageLogo" Grid.RowSpan="3" Width="64" Height="64"/>
             <StackPanel Margin="5, 10">
                 <TextBlock x:Name="textBlockName" FontSize="16" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockYear" FontSize="14"/>
             </StackPanel>
         </StackPanel>
     </Grid>
 </UserControl>

carListItemView.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 WpfApplication1
 {
     /// <summary>
     /// Interaction logic for CarListItemView.xaml
     /// </summary>
     public partial class CarListItemView : UserControl
     {
         private Car car;
         public CarListItemView()
         {
             InitializeComponent();
         }
         public Car Car
         {
             get { return car; }
             set
             {
                 car = value;
                 this.textBlockName.Text = car.Name;
                 this.textBlockYear.Text = car.Year;
                 string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", car.Automaker);
                 this.imageLogo.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
             }
         }
     }
 }

carDetailView.xaml:

 <UserControl x:Class="WpfApplication1.CarDetailView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              mc:Ignorable="d"
              d:DesignHeight="500" d:DesignWidth="500">
     <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
         <StackPanel Margin="5">
             <Image x:Name="imagePhoto" Width="200" Height="250"/>
             <StackPanel Orientation="Horizontal" Margin="5, 0">
                 <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
                 <TextBlock x:Name="textBlockName" FontSize="20" Margin="5, 0"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Margin="5, 0">
                 <TextBlock Text="Automaker:" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockAutomaker" Margin="5, 0"/>
                 <TextBlock Text="Year:" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockYear" Margin="5, 0"/>
                 <TextBlock Text="Top Speed:" FontWeight="Bold"/>
                 <TextBlock x:Name="textBlockTopSpeed" Margin="5, 0"/>
             </StackPanel>
         </StackPanel>
     </Border>
 </UserControl>

carDetailView.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 WpfApplication1
 {
     /// <summary>
     /// Interaction logic for CarDetailView.xaml
     /// </summary>
     public partial class CarDetailView : UserControl
     {
         public CarDetailView()
         {
             InitializeComponent();
         }
         private Car car;
         public Car Car
         {
             get { return car; }
             set
             {
                 car = value;
                 this.textBlockName.Text = car.Name;
                 this.textBlockYear.Text = car.Year;
                 this.textBlockTopSpeed.Text = car.TopSpeed;
                 this.textBlockAutomaker.Text = car.Automaker;
                 string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", car.Name);
                 this.imagePhoto.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
             }
         }
     }
 }

MainWindow.xaml:

 <Window x:Class="WpfApplication1.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfApplication1"
         Title="MainWindow" Height="350" Width="623">
     <StackPanel Orientation="Horizontal" Margin="5">
         <local:CarDetailView x:Name="detailView"/>
         <ListBox x:Name="listBoxCars" Width="180" Margin="5, 0"
                  SelectionChanged="listBoxCars_SelectionChanged"/>
     </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 WpfApplication1
 {
     /// <summary>
     /// Interaction logic for MainWindow.xaml
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             InitialCarList();
         }

         private void InitialCarList()
         {
             List<Car> carList = new List<Car>()
             {
                 "},
                 "},
             };

             foreach(Car car in carList)
             {
                 CarListItemView view = new CarListItemView();
                 view.Car = car;
                 this.listBoxCars.Items.Add(view);
             }
         }

         private void listBoxCars_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
             CarListItemView view = e.AddedItems[] as CarListItemView;
             if (view != null)
             {
                 this.detailView.Car = view.Car;
             }
         }
     }
 }

这种方式的编程跟传统Win Form的编程方法并没有什么区别，只是语言换成了xaml，思维方式并没有改变，还是事件驱动

转换下思维，listBox里的item作为target绑定car类的source，对于detailView里也是一样。用数据绑定的方式来做，xaml需要写好data template, 而cs文件就非常简单了，因为不需要关心UI

car.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Globalization;
 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 WpfApplication2
 {
     public class Car
     {
         public string Automaker { get; set; }
         public string Name { get; set; }
         public string Year { get; set; }
         public string TopSpeed { get; set; }
     }

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

MainWindow.xaml:

 <Window x:Class="WpfApplication2.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfApplication2"
         Title="MainWindow" Height="350" Width="623">
     <Window.Resources>
         <local:AutomakerToLogoPathConverter x:Key="a21"/>
         <local:NameToPhotoPathConverter x:Key="n2p"/>
         <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}}"/>
                     <StackPanel Orientation="Horizontal" Margin="5, 0">
                         <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
                         <TextBlock Text="{Binding Name}" FontSize="20" Margin="5, 0"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal" Margin="5, 0">
                         <TextBlock Text="Automaker:" FontWeight="Bold"/>
                         <TextBlock Text="{Binding Automaker}" Margin="5, 0"/>
                         <TextBlock Text="Year:" FontWeight="Bold"/>
                         <TextBlock Text="{Binding Year}" Margin="5, 0"/>
                         <TextBlock Text="Top Speed:" FontWeight="Bold"/>
                         <TextBlock Text="{Binding TopSpeed}" Margin="5, 0"/>
                     </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"/>
                     <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 SelectedItem, ElementName=listBoxCars}"/>
         <ListBox x:Name="listBoxCars" Width="180" Margin="5, 0"
                  ItemTemplate="{StaticResource carListItemViewTemplate}"/>
     </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 WpfApplication2
 {
     /// <summary>
     /// Interaction logic for MainWindow.xaml
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             InitialCarList();
         }
         private void InitialCarList()
         {
             List<Car> carList = new List<Car>()
             {
                 "},
                 "},
             };
             this.listBoxCars.ItemsSource = carList;
         }
     }
 }