本文假设你已经知道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.开始
- 在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
如果本教程对你有所帮助欢迎持续关注~~
