为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Java

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


webp

1. 准备

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

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


    webp

    Prism

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

    webp

    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}"

演示

webp



作者:vaemc
链接:https://www.jianshu.com/p/19dc3ae7348a


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消