基本常识

开发/学习环境的准备

  • VS2019
  • Microsoft Prism 大框架支持MVVM PrismLibrary
  • Microsoft Blend SDK

VS2019已经集成4.0

必要知识的准备

  • 熟悉Data Binding 和Dependency Property
  • 了解WPF中的命令（知道ICommand接口即可）
  • 熟悉Lambda表达式

创建Code Snippet

  • Code Snippet使用

propdp propfull class等

  • Code Snippet创建

Tools-Code Snippet Manager
改写propfull模板，当属性发生变更时，进行通知：
此模板创建的RaisePropertyChanged()方法需要用下面MVVM设计模式实现：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  3.     <CodeSnippet Format="1.0.0">
  4.         <Header>
  5.             <Title>propn</Title>
  6.             <Shortcut>propn</Shortcut>
  7.             <Description>属性和支持字段的代码片段,属性改变通知</Description>
  8.             <Author>Albert</Author>
  9.             <SnippetTypes>
  10.                 <SnippetType>Expansion</SnippetType>
  11.             </SnippetTypes>
  12.         </Header>
  13.         <Snippet>
  14.             <Declarations>
  15.                 <Literal>
  16.                     <ID>type</ID>
  17.                     <ToolTip>属性类型</ToolTip>
  18.                     <Default>int</Default>
  19.                 </Literal>
  20.                 <Literal>
  21.                     <ID>property</ID>
  22.                     <ToolTip>属性名</ToolTip>
  23.                     <Default>MyProperty</Default>
  24.                 </Literal>
  25.                 <Literal>
  26.                     <ID>field</ID>
  27.                     <ToolTip>支持此属性的变量</ToolTip>
  28.                     <Default>myVar</Default>
  29.                 </Literal>
  30.             </Declarations>
  31.             <Code Language="csharp"><![CDATA[private $type$ $field$;
  33.     public $type$ $property$
  34.     {
  35.         get { return $field$;}
  36.         set 
  37.         { 
  38.         $field$ = value;
  39.         this.RaisePropertyChanged("$property$");
  40.         }
  41.     }
  42.     $end$]]>
  43.             </Code>
  44.         </Snippet>
  45.     </CodeSnippet>
  46. </CodeSnippets>

MVVM设计模式

MVVM = Model-View-ViewModel，技术主要集中在View和ViewModel之间。
image.png

为什么要使用MVVM模式

  • 团队层面：统一思维方式和实现方法
  • 架构层面：稳定，解耦，富有禅意
  • 代码层面：可读，可测，可替换

Prisim包含MVVM，模块化，依赖注入
适用范围：企业级，不适于游戏开发。

什么是Model

  • 现实世界中对象抽象结果

WPF 数据操作，即模型操作。

什么是View和ViewModel

  • View = UI
  • ViewModel = Model for View
  • ViewModel与View的沟通：
    • 传递数据—数据属性
    • 传递操作—命令属性

案例讲解

初级案例

  • NotificationObject与数据属性
  • DelegateCommand与命令属性
  • View与ViewModel的交互（技术难点）

View层：

  1. <Window x:Class="WPFMVVM.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WPFMVVM"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.     <Grid>
  10.         <Button x:Name="btn_Save" Content="Save" HorizontalAlignment="Left" VerticalAlignment="Top" Width="792" Height="32"/>
  11.         <TextBox x:Name="tb1" HorizontalAlignment="Left" Height="25" Margin="0,53,0,0" TextWrapping="Wrap" Text="{Binding Input1}" VerticalAlignment="Top" Width="792"/>
  12.         <TextBox x:Name="tb2" HorizontalAlignment="Left" Height="25" Margin="0,106,0,0" TextWrapping="Wrap" Text="{Binding Input2}" VerticalAlignment="Top" Width="792"/>
  13.         <TextBox x:Name="tb3" HorizontalAlignment="Left" Height="25" Margin="0,158,0,0" TextWrapping="Wrap" Text="{Binding Result}" VerticalAlignment="Top" Width="792"/>
  14.         <Button x:Name="btn_Add" Content="Add" HorizontalAlignment="Left" VerticalAlignment="Top" Width="792" Height="32" Margin="0,210,0,0" Command="{Binding AddCommand}"/>
  16.     </Grid>
  17. </Window>
  19.  public partial class MainWindow : Window
  20.     {
  21.         public MainWindow()
  22.         {
  23.             InitializeComponent();
  24.             this.DataContext = new MainWindowViewModel();//此句不可省略
  25.         }
  26.     }


（1）NotificationObjects与数据属性**

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Linq;
  5. using System.Text;
  6. using System.Threading.Tasks;
  8. namespace WPFMVVM.ViewModels {
  9.     //ViewModel的基类
  10.     class NotificationObjects:INotifyPropertyChanged {
  11.         public event PropertyChangedEventHandler PropertyChanged;
  13.         public void RaisePropertyChanged(string propertyName) {
  14.             if (this.PropertyChanged != null) {
  15.                 this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
  16.             }
  17.         }
  18.     }
  19. }

（2）Commands与命令属性

  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.Input;
  8. namespace WPFMVVM.Commands {
  9.     class DelegateCommand : ICommand {
  11.         public Action<object> ExecuteAction { get; set; }
  12.         public Func<object,bool> CanExecuteFunc { get; set; }
  13.         public event EventHandler CanExecuteChanged;//当命令能够执行时，有机会通知一下命令的调用者
  15.         /// <summary>
  16.         /// 命令呼叫者，判断命令能不能执行
  17.         /// </summary>
  18.         /// <param name="parameter"></param>
  19.         /// <returns></returns>
  20.         public bool CanExecute(object parameter) {
  21.             if (this.CanExecuteFunc == null) {
  22.                 return true;
  23.             }
  24.             return this.CanExecuteFunc(parameter);
  25.         }
  27.         /// <summary>
  28.         /// 当命令执行的时候做什么事情
  29.         /// </summary>
  30.         /// <param name="parameter"></param>
  31.         public void Execute(object parameter) {
  32.             if (this.ExecuteAction == null) {
  33.                 return;
  34.             }
  35.             this.ExecuteAction(parameter); //这个命令把要执行的事情，委托给了ExecuteAction这个委托所指向的方法
  36.         }
  39.     }
  40. }

(3)建模MainWindowViewModel

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using WPFMVVM.Commands;
  8. namespace WPFMVVM.ViewModels {
  9.     class MainWindowViewModel:NotificationObjects {
  10.         //建模，需要三个数据属性，两个命令属性
  11.         private double input1;
  13.         public double Input1 {
  14.             get { return input1; }
  15.             set {
  16.                 input1 = value;
  17.                 this.RaisePropertyChanged("Input1");
  18.             }
  19.         }
  21.         private double input2;
  23.         public double Input2 {
  24.             get { return input2; }
  25.             set {
  26.                 input2 = value;
  27.                 this.RaisePropertyChanged("Input2");
  28.             }
  29.         }
  31.         private double result;
  33.         public double Result {
  34.             get { return result; }
  35.             set {
  36.                 result = value;
  37.                 this.RaisePropertyChanged("Result"); //这个字符串必须跟属性的值相同
  38.             }
  39.         }
  41.         public DelegateCommand AddCommand { get; set; }
  43.         private void Add(object parameter) {
  44.             this.Result = this.Input1 + this.Input2;
  45.         }
  47.         public MainWindowViewModel() {
  48.             this.AddCommand = new DelegateCommand();
  49.             this.AddCommand.ExecuteAction = new Action<object>(this.Add);//ExecuteAction委托变量
  51.         }
  52.     }
  53. }

进阶案例

  • 使用Microsoft Prism
  • 餐馆点餐系统Demo

ViewModels层

  1. using CrazyElephant.Models;
  2. using Microsoft.Practices.Prism.ViewModel;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Linq;
  6. using System.Text;
  7. using System.Threading.Tasks;
  9. namespace CrazyElephant.ViewModels {
  10.     class DishMenuItemViewModel:NotificationObject {
  11.         public Dish Dish { get; set; } //ViewModel有一个方式  另一种方式是一个，Dish派生自NotificationObject
  12.         //DishMenuItemViewModel派生自Dish
  13.         private bool isSelected; //通知界面是否改变
  15.         public bool IsSelected {
  16.             get { return isSelected; }
  17.             set {
  18.                 isSelected = value;
  19.                 this.RaisePropertyChanged("IsSelected");
  20.             }
  21.         }
  23.     }
  24. }
  26. using CrazyElephant.Models;
  27. using CrazyElephant.Services;
  28. using Microsoft.Practices.Prism.Commands;
  29. using Microsoft.Practices.Prism.ViewModel;
  30. using System;
  31. using System.Collections.Generic;
  32. using System.Linq;
  33. using System.Text;
  34. using System.Threading.Tasks;
  35. using System.Windows;
  37. namespace CrazyElephant.ViewModels {
  38.     class MainWindowViewModel:NotificationObject {
  39.         public DelegateCommand PlaceOrderCommand { get; set; }
  40.         public DelegateCommand SelectMenuItemCommand { get; set; }
  42.         private int count;
  44.         public int Count {
  45.             get { return count; }
  46.             set {
  47.                 count = value;
  48.                 this.RaisePropertyChanged("Count");
  49.             }
  50.         }
  52.         private Restaurant restaurant;
  54.         public Restaurant Restaurant {
  55.             get { return restaurant; }
  56.             set {
  57.                 restaurant = value;
  58.                 this.RaisePropertyChanged("Restaurant");
  59.             }
  60.         }
  62.         private List<DishMenuItemViewModel> dishMenu;
  64.         public List<DishMenuItemViewModel> DishMenu {
  65.             get { return dishMenu; }
  66.             set {
  67.                 dishMenu = value;
  68.                 this.RaisePropertyChanged("DishMenu");
  69.             }
  70.         }
  72.         public MainWindowViewModel() {
  73.             this.LoadRestaurant();
  74.             this.LoadDishMenu();
  75.             this.PlaceOrderCommand = new DelegateCommand(new Action(this.PlaceOrderCommandExecute));
  76.             this.SelectMenuItemCommand = new DelegateCommand(new Action(this.SelectMenuItemExecute));
  77.         }
  79.         private void LoadRestaurant() {
  80.             this.Restaurant = new Restaurant();
  81.             this.Restaurant.Name = "Crazy大象";
  82.             this.Restaurant.Address = "上海路8号";
  83.             this.Restaurant.PhoneNumber = 66884725;
  84.         }
  86.         private void LoadDishMenu() {
  87.             XmlDataService ds = new XmlDataService();
  88.             var dishes = ds.GetAllDishes();
  89.             this.DishMenu = new List<DishMenuItemViewModel>();
  90.             foreach (var dish in dishes) {
  91.                 var item = new DishMenuItemViewModel();
  92.                 item.Dish = dish;
  93.                 this.DishMenu.Add(item);
  94.             }
  95.         }
  97.         private void PlaceOrderCommandExecute() {
  98.             var selectedDishes = this.DishMenu.Where(i => i.IsSelected == true).Select(i => i.Dish.Name).ToList();
  99.             IOrderService orderService = new MockOrderService();
  100.             orderService.PlaceOrder(selectedDishes);
  101.             MessageBox.Show("Order Successfully!");
  102.         }
  104.         private void SelectMenuItemExecute() {
  105.             this.Count = this.DishMenu.Count(i => i.IsSelected == true);
  106.         }
  108.     }
  109. }

View层

  1. <Window x:Class="CrazyElephant.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:CrazyElephant"
  7.         mc:Ignorable="d"
  8.         Title="{Binding Restaurant.Name,StringFormat=\{0\}-在线订餐}" Height="600" Width="1000">
  9.     <Border BorderBrush="AntiqueWhite" BorderThickness="3" CornerRadius="6" Background="Orange">
  10.         <Grid x:Name="Root" Margin="4">
  11.             <Grid.RowDefinitions>
  12.                 <RowDefinition Height="Auto"/>
  13.                 <RowDefinition Height="*"/>
  14.                 <RowDefinition Height="Auto"/>
  15.             </Grid.RowDefinitions>
  16.             <Border BorderBrush="Orange" BorderThickness="1" CornerRadius="6" Padding="4">
  17.                 <StackPanel>
  18.                     <StackPanel Orientation="Horizontal">
  19.                         <StackPanel.Effect>
  20.                             <DropShadowEffect Color="LightGray"/>
  21.                         </StackPanel.Effect>
  22.                         <TextBlock Text="欢迎光临" FontSize="60" FontFamily="LiShu"/>
  23.                         <TextBlock Text="{Binding Restaurant.Name}" FontSize="60" FontFamily="Lishu"/>
  24.                     </StackPanel>
  25.                     <StackPanel Orientation="Horizontal">
  26.                         <TextBlock Text="小店地址:" FontSize="24" FontFamily="LiShu"/>
  27.                         <TextBlock Text="{Binding Restaurant.Address}" FontSize="24" FontFamily="LiShu"/>
  28.                     </StackPanel>
  29.                     <StackPanel Orientation="Horizontal">
  30.                         <TextBlock Text="订餐电话:" FontSize="24" FontFamily="LiShu"/>
  31.                         <TextBlock Text="{Binding Restaurant.PhoneNumber}" FontSize="24" FontFamily="LiShu"/>
  32.                     </StackPanel>
  33.                 </StackPanel>
  34.             </Border>
  35.             <DataGrid AutoGenerateColumns="False" GridLinesVisibility="None" CanUserDeleteRows="False"
  36.                       CanUserAddRows="False" Margin="0.4" Grid.Row="1" FontSize="16" ItemsSource="{Binding DishMenu}">
  37.                 <DataGrid.Columns>
  38.                     <DataGridTextColumn Header="菜品" Binding="{Binding Dish.Name}" Width="120"/>
  39.                     <DataGridTextColumn Header="种类" Binding="{Binding Dish.Category}" Width="120"/>
  40.                     <DataGridTextColumn Header="点评" Binding="{Binding Dish.Comment}" Width="120"/>
  41.                     <DataGridTextColumn Header="推荐分数" Binding="{Binding Dish.Score}" Width="120"/>
  42.                     <DataGridTemplateColumn Header="选中" SortMemberPath="IsSelected" Width="120">
  43.                         <DataGridTemplateColumn.CellTemplate>
  44.                             <DataTemplate>
  45.                                 <CheckBox IsChecked="{Binding Path=IsSelected,UpdateSourceTrigger=PropertyChanged}"
  46.                                           VerticalAlignment="Center" HorizontalAlignment="Center"
  47.                                           Command="{Binding Path=DataContext.SelectMenuItemCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGrid}}}"/>
  48.                             </DataTemplate>
  49.                         </DataGridTemplateColumn.CellTemplate>
  50.                     </DataGridTemplateColumn>
  51.                 </DataGrid.Columns>
  52.             </DataGrid>
  53.             <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="2">
  54.                 <TextBlock Text="共计" VerticalAlignment="Center"/>
  55.                 <TextBox IsReadOnly="True" TextAlignment="Center" Width="120" Text="{Binding Count}" Margin="4.0"/>
  56.                 <Button Content="Order" Height="24" Width="120" Command="{Binding PlaceOrderCommand}"/>
  57.             </StackPanel>
  58.         </Grid>
  59.     </Border>
  60. </Window>

示例代码

WPFMVVMSample.7z
CrazyElephant.7z