WPF系列教程——(二)使用Prism实现MVVM设计模式 - 简书

原文:WPF系列教程——(二)使用Prism实现MVVM设计模式 - 简书

本文假设你已经知道MVVM设计模式是什么，所以直接进入正题，今天我们就用Prism来实现WPF的MVVM设计模式，百度上关于Prism的教程少之又少，仅有的几个教程也是使用的很古老的版本，反正也是看不懂写的啥玩意，下面以最简洁明了的代码来演示事件绑定和数据绑定。

1. 准备

• 使用上一节的Demo，来继续完成本节教程WPF系列教程——(一)仿TIM QQ界面

• Prism
  
  Prism是一个MVVM框架，它包括，依赖注入(通过Unity或MEF)、Commands, EventAggregator。
  
  在NuGet包管理器中搜索Prism，找到Prism.WPF并添加到项目

  

  Prism

• interactivity
  
  每一个控件都会有很多不一样的事件，这里使用interactivity来绑定控件的事件， 在程序集中搜索interactivity，并添加引用。
  
  命名空间xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

  

  interactivity

• 创建一个ViewModels文件夹,并创建MainWindowViewModel.cs，视图模型的命名统一使用视图名+"ViewModel"，并继承BindableBase。

2.开始

1. 在ViewModel中添加窗口关闭事件委托
   
   public DelegateCommand CloseCommand { get; set; }
   
   在构造函数中实例化

CloseCommand = new DelegateCommand(()=> {
                Application.Current.Shutdown();
   });

在关闭按钮中绑定

Command="{Binding CloseCommand}"

1. ListView中Item的点击事件
   
   我们要实现的是点击Item，名片就会显示对应的头像和昵称。
   
   在ViewModel中创建Friend类

public class Friend
        {
            public string Nickname { get; set; } //昵称
            public BitmapImage Head { get; set; } //头像
        }

ListView数据源

private ObservableCollection<Friend> friends;

        public ObservableCollection<Friend> Friends
        {
            get { return friends; }
            set { friends = value; }
        }

添加测试数据

friends = new ObservableCollection<Friend>();
friends.Add(new Friend() {Nickname="Go to hell",Head= new BitmapImage(new Uri("pack://application:,,,/Images/head1.jpg")) });
friends.Add(new Friend() { Nickname = "糖宝", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head2.jpg")) });
friends.Add(new Friend() { Nickname = "胖虎", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head3.jpg")) });
friends.Add(new Friend() { Nickname = "小花", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head4.jpg")) });
friends.Add(new Friend() { Nickname = "隔壁老王", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head5.jpg")) });
friends.Add(new Friend() { Nickname = "狗子", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head6.jpg"))});

ListView绑定数据源

ItemsSource="{Binding Friends}"

ListView数据模板

把数据模板中昵称和网名换成Friend中对应的属性，完成数据绑定。

<ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal"
                                        Height="50"
                                        >
                                <Ellipse Cursor="Hand"
                                         Width="50"
                                         Height="50">
                                    <Ellipse.Fill>
                                        <ImageBrush  ImageSource="{Binding Head}" />
                                    </Ellipse.Fill>
                                </Ellipse>
                                <StackPanel
                                    Orientation="Vertical"
                                    VerticalAlignment="Center"
                                    Margin="5 0">
                                    <TextBlock
                                        FontSize="15"
                                        Foreground="Black"
                                        Text="{Binding Nickname}" />
                                    <TextBlock
                                        Margin="0 2 0 0"
                                        FontSize="12"
                                        Text="这家伙很懒,什么也没留下" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>

Item点击事件

在后台定义点击事件委托

public DelegateCommand<object> SelectItemChangedCommand { get; set; }

在视图中添加点击事件

EventName指定绑定的事件名称，Command绑定ViewModel中之前定义好的委托，CommandParameter传递至ViewModel的参数，这里传的值就是当前ListView对象。

<i:Interaction.Triggers>
          <i:EventTrigger EventName="SelectionChanged">
                     <i:InvokeCommandAction Command="{Binding SelectItemChangedCommand}"
                                                   CommandParameter="{Binding ElementName=FriendList}" />
                     </i:EventTrigger>
</i:Interaction.Triggers>

在构造函数中实例化SelectItemChangedCommand

参数P就是当前的ListView对象他的SelectedItem属性就是选中的Item，将SelectedItem转换为Friend对象，并赋值给名片中头像和昵称的数据源。

SelectItemChangedCommand = new DelegateCommand<object>((p)=>{
                ListView lv = p as ListView;
                Friend friend = lv.SelectedItem as Friend;
                Head= friend.Head;
                Nickname = friend.Nickname;
            });

1. 名片中的头像和昵称数据源

private BitmapImage head;
        public BitmapImage Head
        {
            get { return head; }
            set { SetProperty(ref head, value); }
        }

        private string nickname;
        public string Nickname
        {
            get { return nickname; }
            set { SetProperty(ref nickname, value); }
        }

在视图中绑定

头像Source="{Binding Head}"

昵称Text="{Binding Nickname}"

演示

演示

欢迎Star https://github.com/vaemc/WpfTimQQ

如果本教程对你有所帮助欢迎持续关注~~