原文: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

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

WPF系列教程——(二)使用Prism实现MVVM设计模式 - 简书的更多相关文章

  1. WPF系列教程——(三)使用Win10 Edge浏览器内核 - 简书

    原文:WPF系列教程--(三)使用Win10 Edge浏览器内核 - 简书 在需要显示一些 H5网站的时候自带的WebBrowser总是显示不了,WebBrowser使用的是IE内核,许多H5新特性都 ...

  2. WPF系列教程——(一)仿TIM QQ界面 - 简书

    原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...

  3. CRL快速开发框架系列教程二(基于Lambda表达式查询)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  4. C#微信公众号开发系列教程二(新手接入指南)

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

  5. Android Studio系列教程二--基本设置与运行

    Android Studio系列教程二--基本设置与运行 2014 年 11 月 28 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处! 上面一篇博客,介绍了Studio的 ...

  6. NGUI系列教程二

    接下来我们创建一个Label,NGUI->Open the Widget Wizard,打开widgetTool对话框,在Template中选择Label,确定AddTo右侧选项为panel,点 ...

  7. 黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...

  8. 黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级) 企业库加密应用程序模块提供了2种方 ...

  9. Fastify 系列教程二 (中间件、钩子函数和装饰器)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) 中间件 Fastify 提供了与 Express 和 Restify ...

随机推荐

  1. 【起航计划 016】2015 起航计划 Android APIDemo的魔鬼步伐 15 App->Activity->Wallpaper 系统壁纸作为当前Activity的背景

    Wallpaper介绍一个Activity如何通过Style把系统Wallpaper作为当前Activity的背景. 这是WallpaperActivity在AndroidManifest.xml中的 ...

  2. 夜色的 cocos2d-x 开发笔记 02

    本章我们让飞机发射子弹,因此我们要写这样一个方法 子弹资源:欢迎下载 很详细的注释吧,现在有几个地方报错,.h文件里面一定要先声明 这里是本章所有的新方法,你可以一次声明全部,嗯,还有个报错应该是我们 ...

  3. rpm打包工具

    http://fedoraproject.org/wiki/How_to_create_an_RPM_package # rpm --showrc|grep _topdir -14: _builddi ...

  4. 批处理实现虚拟WIFI

    类似于360免费WiFi那个软件,可以PC发射WiFi(需要有无线网卡). 源码如下: @Echo off title Windows7 虚拟Wifi----By yllinux mode con c ...

  5. April 6 2017 Week 14 Thursday

    If you smile when no one else is around, you really mean it. 独处时的微笑,才是发自内心的. Recently I found I seld ...

  6. CRUD全栈式编程概述

    业务场景 CRUD,从数据驱动的角度几乎所有的的业务都是在做这样的事情.  几乎所有的操作都是在做对表的增删改查.  假设我们将数据库数据规个类:  分为基础/配置数据和业务/增长数据,或者说静态数据 ...

  7. vuejs样式绑定

    第一种:class的对象绑定,class引用的是一个对象,这个对象的属性显示不显示由变量决定 <style> .activated{ color:red; } </style> ...

  8. Shell编程学习之重定向

    这一篇讲一下重定向 有些时候你想要保存某些命令产生的输出而不是在显示器上显示它. 为了应对这样的问题 bash shell 也就提供了一些重定向的操作符. 我们先了解一些基本的应用. 输出重定向 输出 ...

  9. innerHTML动态添加标签的注意事项

    在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

  10. 关于vue中的nextTick深入理解

    定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新 ...