.NET: WPF Template

Data Template:

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

car class:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6
 7 namespace WpfApplication1
 8 {
 9     public class Car
10     {
11         public string Automaker { get; set; }
12         public string Name { get; set; }
13         public string Year { get; set; }
14         public string TopSpeed { get; set; }
15     }
16 }

carListItemView.xaml:

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

carListItemView.xaml.cs:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15
16 namespace WpfApplication1
17 {
18     /// <summary>
19     /// Interaction logic for CarListItemView.xaml
20     /// </summary>
21     public partial class CarListItemView : UserControl
22     {
23         private Car car;
24         public CarListItemView()
25         {
26             InitializeComponent();
27         }
28         public Car Car
29         {
30             get { return car; }
31             set
32             {
33                 car = value;
34                 this.textBlockName.Text = car.Name;
35                 this.textBlockYear.Text = car.Year;
36                 string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", car.Automaker);
37                 this.imageLogo.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
38             }
39         }
40     }
41 }

carDetailView.xaml:

 1 <UserControl x:Class="WpfApplication1.CarDetailView"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6              mc:Ignorable="d"
 7              d:DesignHeight="500" d:DesignWidth="500">
 8     <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
 9         <StackPanel Margin="5">
10             <Image x:Name="imagePhoto" Width="200" Height="250"/>
11             <StackPanel Orientation="Horizontal" Margin="5, 0">
12                 <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
13                 <TextBlock x:Name="textBlockName" FontSize="20" Margin="5, 0"/>
14             </StackPanel>
15             <StackPanel Orientation="Horizontal" Margin="5, 0">
16                 <TextBlock Text="Automaker:" FontWeight="Bold"/>
17                 <TextBlock x:Name="textBlockAutomaker" Margin="5, 0"/>
18                 <TextBlock Text="Year:" FontWeight="Bold"/>
19                 <TextBlock x:Name="textBlockYear" Margin="5, 0"/>
20                 <TextBlock Text="Top Speed:" FontWeight="Bold"/>
21                 <TextBlock x:Name="textBlockTopSpeed" Margin="5, 0"/>
22             </StackPanel>
23         </StackPanel>
24     </Border>
25 </UserControl>

carDetailView.xaml.cs

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15
16 namespace WpfApplication1
17 {
18     /// <summary>
19     /// Interaction logic for CarDetailView.xaml
20     /// </summary>
21     public partial class CarDetailView : UserControl
22     {
23         public CarDetailView()
24         {
25             InitializeComponent();
26         }
27         private Car car;
28         public Car Car
29         {
30             get { return car; }
31             set
32             {
33                 car = value;
34                 this.textBlockName.Text = car.Name;
35                 this.textBlockYear.Text = car.Year;
36                 this.textBlockTopSpeed.Text = car.TopSpeed;
37                 this.textBlockAutomaker.Text = car.Automaker;
38                 string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", car.Name);
39                 this.imagePhoto.Source = new BitmapImage(new Uri(uriStr, UriKind.Relative));
40             }
41         }
42     }
43 }

MainWindow.xaml:

 1 <Window x:Class="WpfApplication1.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:local="clr-namespace:WpfApplication1"
 5         Title="MainWindow" Height="350" Width="623">
 6     <StackPanel Orientation="Horizontal" Margin="5">
 7         <local:CarDetailView x:Name="detailView"/>
 8         <ListBox x:Name="listBoxCars" Width="180" Margin="5, 0"
 9                  SelectionChanged="listBoxCars_SelectionChanged"/>
10     </StackPanel>
11 </Window>

MainWindow.xaml.cs:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15
16 namespace WpfApplication1
17 {
18     /// <summary>
19     /// Interaction logic for MainWindow.xaml
20     /// </summary>
21     public partial class MainWindow : Window
22     {
23         public MainWindow()
24         {
25             InitializeComponent();
26             InitialCarList();
27         }
28
29         private void InitialCarList()
30         {
31             List<Car> carList = new List<Car>()
32             {
33                 new Car(){Automaker="eclipse", Name="eclipse", Year="2010", TopSpeed="200"},
34                 new Car(){Automaker="google", Name="google", Year="2013", TopSpeed="400"},
35             };
36
37             foreach(Car car in carList)
38             {
39                 CarListItemView view = new CarListItemView();
40                 view.Car = car;
41                 this.listBoxCars.Items.Add(view);
42             }
43         }
44
45         private void listBoxCars_SelectionChanged(object sender, SelectionChangedEventArgs e)
46         {
47             CarListItemView view = e.AddedItems[0] as CarListItemView;
48             if (view != null)
49             {
50                 this.detailView.Car = view.Car;
51             }
52         }
53     }
54 }

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

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

car.cs

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Globalization;
 7 using System.Windows;
 8 using System.Windows.Controls;
 9 using System.Windows.Data;
10 using System.Windows.Documents;
11 using System.Windows.Input;
12 using System.Windows.Media;
13 using System.Windows.Media.Imaging;
14 using System.Windows.Navigation;
15 using System.Windows.Shapes;
16
17 namespace WpfApplication2
18 {
19     public class Car
20     {
21         public string Automaker { get; set; }
22         public string Name { get; set; }
23         public string Year { get; set; }
24         public string TopSpeed { get; set; }
25     }
26
27     public class AutomakerToLogoPathConverter : IValueConverter
28     {
29         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
30         {
31             string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", (string)value);
32             return new BitmapImage(new Uri(uriStr, UriKind.Relative));
33         }
34         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
35         {
36             throw new NotImplementedException();
37         }
38     }
39     public class NameToPhotoPathConverter : IValueConverter
40     {
41         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
42         {
43             string uriStr = string.Format(@"/Resource/Logos/{0}.jpg", (string)value);
44             return new BitmapImage(new Uri(uriStr, UriKind.Relative));
45         }
46         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
47         {
48             throw new NotImplementedException();
49         }
50     }
51 }

MainWindow.xaml:

 1 <Window x:Class="WpfApplication2.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:local="clr-namespace:WpfApplication2"
 5         Title="MainWindow" Height="350" Width="623">
 6     <Window.Resources>
 7         <local:AutomakerToLogoPathConverter x:Key="a21"/>
 8         <local:NameToPhotoPathConverter x:Key="n2p"/>
 9         <DataTemplate x:Key="carDetailViewTemplate">
10             <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
11                 <StackPanel Margin="5">
12                     <Image Width="400" Height="250"
13                            Source="{Binding Name, Converter={StaticResource n2p}}"/>
14                     <StackPanel Orientation="Horizontal" Margin="5, 0">
15                         <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
16                         <TextBlock Text="{Binding Name}" FontSize="20" Margin="5, 0"/>
17                     </StackPanel>
18                     <StackPanel Orientation="Horizontal" Margin="5, 0">
19                         <TextBlock Text="Automaker:" FontWeight="Bold"/>
20                         <TextBlock Text="{Binding Automaker}" Margin="5, 0"/>
21                         <TextBlock Text="Year:" FontWeight="Bold"/>
22                         <TextBlock Text="{Binding Year}" Margin="5, 0"/>
23                         <TextBlock Text="Top Speed:" FontWeight="Bold"/>
24                         <TextBlock Text="{Binding TopSpeed}" Margin="5, 0"/>
25                     </StackPanel>
26                 </StackPanel>
27             </Border>
28         </DataTemplate>
29         <DataTemplate x:Key="carListItemViewTemplate">
30             <Grid Margin="2">
31                 <StackPanel Orientation="Horizontal">
32                     <Image Source="{Binding Automaker, Converter={StaticResource a21}}"
33                            Grid.RowSpan="3" Width="64" Height="64"/>
34                     <StackPanel Margin="5, 10">
35                         <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"/>
36                         <TextBlock Text="{Binding Year}" FontSize="14"/>
37                     </StackPanel>
38                 </StackPanel>
39             </Grid>
40         </DataTemplate>
41     </Window.Resources>
42     <StackPanel Orientation="Horizontal" Margin="5">
43         <UserControl ContentTemplate="{StaticResource carDetailViewTemplate}"
44                      Content="{Binding SelectedItem, ElementName=listBoxCars}"/>
45         <ListBox x:Name="listBoxCars" Width="180" Margin="5, 0"
46                  ItemTemplate="{StaticResource carListItemViewTemplate}"/>
47     </StackPanel>
48 </Window>

MainWindow.xaml.cs:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15
16 namespace WpfApplication2
17 {
18     /// <summary>
19     /// Interaction logic for MainWindow.xaml
20     /// </summary>
21     public partial class MainWindow : Window
22     {
23         public MainWindow()
24         {
25             InitializeComponent();
26             InitialCarList();
27         }
28         private void InitialCarList()
29         {
30             List<Car> carList = new List<Car>()
31             {
32                 new Car(){Automaker="eclipse", Name="eclipse", Year="2010", TopSpeed="200"},
33                 new Car(){Automaker="google", Name="google", Year="2013", TopSpeed="400"},
34             };
35             this.listBoxCars.ItemsSource = carList;
36         }
37     }
38 }