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

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

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.开始

在ViewModel中添加窗口关闭事件委托

public DelegateCommand CloseCommand { get; set; }

在构造函数中实例化

CloseCommand = new DelegateCommand(()=> {

                Application.Current.Shutdown();

   });

在关闭按钮中绑定

Command="{Binding CloseCommand}"

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;

            });

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

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

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

教程

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

1. 准备

2.开始

演示