本文假设你已经知道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}"
演示
作者:vaemc
链接:https://www.jianshu.com/p/19dc3ae7348a
共同学习,写下你的评论
评论加载中...
作者其他优质文章