一、WPF概要

WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互用户图形界面。

1.1、 MVVM简介

  在WPF中,MVVM(View-ViewModel-Model)开发模型用的很多,它具有低耦合,可重用行,相对独立的设计和逻辑。所以备受广大开发者的喜爱。View 说白了就是前台界面,ViewModel 是连接层(类似于MVC中的Controller),他将Model 层和View层结合起来,并封装好命令,供View层绑定,Model层提供类的对象,供ViewModel可以轻松的访问数据库。MVVM是典型的WPF设计模式,view通过命令将所有用户的输入传递给viewmodel。view通过数据绑定从viewmodel中获得数据。model不了解viewmodel的情况,viewmodel不了解view的情况

二、简单案例DataGrid Binding显示数据

1.Model:Model就是一个class,是对现实中事物的抽象,开发过程中涉及到的事物都可以抽象为Model,例如客户,客户的姓名、编号、电话、住址等属性也对应了class中的Property,客户的下订单、付款等行为对应了class中的方法。

2. View:View很好理解,就是视图界面。

3. ViewModel:上面说过Model抽象,那么ViewModel就是对View的抽象。显示的数据对应着ViewMode中的Property,执行的命令对应着ViewModel中的Command。

(通过一个例子来解释MVVM 让我使用MVVM创建一个简单的用户管理应用程序。按部就班我们必须首先定义Model(模式),然后定义ViewModel,最后定义View。)

2.1、创建Model

public class User
{
/// <summary>
/// 编号
/// </summary>
public int ID { get; set; }
/// <summary>
/// 姓名
/// </summary>
public string Name { get; set; } /// <summary>
/// 年龄
/// </summary>
public int Age { get; set; } /// <summary>
/// 性别
/// </summary>
public string Sex { get; set; }
/// <summary>
/// 备注
/// </summary>
public string Remarks { get; set; }
}

2.2、创建ViewModel

字面上看,ViewModel的意思是“视图 模型”,也可以被认为是view的抽象,但是它也是一个特殊化的模式,并且其view可以使用数据绑定。最新的角色,ViewModel包含了一个数据传送器,即将Model中的数据传送到View中。ViewModel中同样包含了一些命令,这样可以使得View可以与Model进行交互。

public class UserViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged(string propertyName)
{
if (propertyName != null)
{
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

在ViewModel中增加一个类UserViewModel ,这个类用来实现INotifyPropertyChanged接口。

public class ShowDataViewModel : UserViewModel
{
//数据源
ObservableCollection<User> _mylist = new ObservableCollection<User>();
public ObservableCollection<User> mylist
{ get { return _mylist; }
set
{
_mylist = value;
RaisePropertyChanged("mylist");
}
}
     //构造函数
public ShowDataViewModel()
{
mylist.Add(new User() { ID = , Name = "张三", Age = , Sex = "女", Remarks = "无" });
mylist.Add(new User() { ID = , Name = "李四", Age = , Sex = "女", Remarks = "无" });
mylist.Add(new User() { ID = , Name = "王五", Age = , Sex = "女", Remarks = "无" });
mylist.Add(new User() { ID = , Name = "赵六", Age = , Sex = "女", Remarks = "无" });
} }

在创建一个类ShowDataViewModel,继承UserViewModel 添加测试数据

2.3、创建View

View在MAML中定义的,并且在后台不用写代码,View不应该含有任何的逻辑。它仅仅通过数据绑定就能达到显示。

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
Title="MainWindow" Height="350" Width="413">
<Window.DataContext>
<vm:ShowDataViewModel/>
</Window.DataContext>
<Grid Margin="0,0,2,0">
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{Binding mylist}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding ID}" Header="编号"/>
<DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="100"/>
<DataGridTextColumn Binding="{Binding Age}" Header="年龄"/>
<DataGridTextColumn Binding="{Binding Sex}" Header="性别" Width="60"/>
<DataGridTextColumn Binding="{Binding Remarks}" Header="备注" Width="172"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
<Window.DataContext>
<vm:ShowDataViewModel/>
</Window.DataContext>

引入一下命名空间完成上面绑定然后给DataGrid 绑定一下ItemsSource不用运行就能直接看到数据在控件上面显示

以上就完成了简单的数据显示

三、DataGrid的增改删功能

3.1、数据绑定

3.1.1、wpf中的数据绑定

在wpf中界面中绑定了数据源后,数据在界面上的修改能反映到绑定源

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
Title="MainWindow" Height="337" Width="419">
<Window.DataContext>
<vm:ShowDataViewModel/>
</Window.DataContext>
<Grid Margin="0,0,2,182">
<DataGrid x:Name="dataGrid" SelectionUnit="FullRow" IsReadOnly="True" AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{Binding mylist}" Height="135" Margin="1,0,0,-11">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding ID}" Header="编号"/>
<DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="100"/>
<DataGridTextColumn Binding="{Binding Age}" Header="年龄"/>
<DataGridTextColumn Binding="{Binding Sex}" Header="性别" Width="60"/>
<DataGridTextColumn Binding="{Binding Remarks}" Header="备注" Width="172"/>
</DataGrid.Columns>
</DataGrid>
<Label x:Name="labID" Content="编号:" HorizontalAlignment="Left" Margin="17,152,0,-53"/>
<TextBox x:Name="txtID" IsEnabled ="False" Text="{Binding ID}" HorizontalAlignment="Left" Height="22" Margin="63,154,0,-52" TextWrapping="Wrap" Width="60"/>
<Label x:Name="labName" Content="姓名:" HorizontalAlignment="Left" Margin="143,154,0,-55" />
<TextBox x:Name="txtName" Text="{Binding Name}" HorizontalAlignment="Left" Height="22" Margin="189,152,0,-50" TextWrapping="Wrap" Width="62"/>
<Label x:Name="labPAge" Content="年龄:" HorizontalAlignment="Left" Margin="273,152,0,-53" VerticalAlignment="Top" RenderTransformOrigin="-0.233,0.68"/>
<TextBox x:Name="txtAge" Text="{Binding Age}" HorizontalAlignment="Left" Height="22" Margin="319,152,0,-50" TextWrapping="Wrap" Width="58"/>
<Label x:Name="labSex" Content="性别:" HorizontalAlignment="Left" Margin="17,188,0,-89" RenderTransformOrigin="-0.233,0.68"/>
<ComboBox Text="{Binding Sex}" SelectedIndex="0" x:Name="comboBox" HorizontalAlignment="Left" Margin="63,191,0,-88" Width="61">
<ComboBoxItem Tag="1" Content="男"/>
<ComboBoxItem Tag="2" Content="女"/>
</ComboBox>
<Label x:Name="labRemarks" Content="备注:" HorizontalAlignment="Left" Margin="144,187,0,-88" VerticalAlignment="Top" RenderTransformOrigin="-0.233,0.68"/>
<TextBox x:Name="txtRemarks" Text="{Binding Remarks}" HorizontalAlignment="Left" Height="22" Margin="189,184,0,-82" TextWrapping="Wrap" VerticalAlignment="Top" Width="188" RenderTransformOrigin="0.5,0.5"/>
<Button x:Name="butSave" Command="{Binding AddCommand}" Content="新增" HorizontalAlignment="Left" Margin="70,240,0,-135" VerticalAlignment="Top" Width="69" Height="19" RenderTransformOrigin="0.466,0.941"/>
<Button x:Name="butUpdate" Command="{Binding UpdateCommand}" Content="修改" HorizontalAlignment="Left" Margin="160,240,0,-135" VerticalAlignment="Top" Width="69" Height="19" RenderTransformOrigin="0.466,0.941"/>
<Button x:Name="butDelete" Command="{Binding DeleteCommand}" Content="删除" HorizontalAlignment="Left" Margin="250,240,0,-135" VerticalAlignment="Top" Width="69" Height="19" RenderTransformOrigin="0.466,0.941"/>
</Grid>
</Window>

3.2、命令绑定

在上面代码我们给按钮 Command 绑定了 Add Update Delete,接下来我们就开始实现功能

我们新建一个文件DelegateCommands.cs  实现接口ICommand

public class DelegateCommands : ICommand
{
public Action<object> ExecuteCommand = null; public Func<object, bool> CanExecuteCommand = null; //当命令可执行状态发生改变时,应当被激发
public event EventHandler CanExecuteChanged; //用于判断命令是否可以执行
public bool CanExecute(object parameter)
{
if (CanExecuteCommand != null)
{
return this.CanExecuteCommand(parameter);
}
else
{
return true;
}
}
//命令执行
public void Execute(object parameter)
{
if (this.ExecuteCommand != null) this.ExecuteCommand(parameter);
} }

回到ShowDataViewModel.cs 定义下面命令

 public DelegateCommands AddCommand { get; set; }
public DelegateCommands UpdateCommand { get; set; }
public DelegateCommands DeleteCommand { get; set; }

把操作对应的方法写好

#region 方法
private void Binding()
{
ShowList.Clear();
mylist.ToList().ForEach(p => ShowList.Add(p));
}
public void addStudent(object parameter)
{
int id = mylist[mylist.Count-].ID;
mylist.Add(new User() { ID= id + , Name=Name,Age=Age,Sex=Sex,Remarks=Remarks});
Binding();
}
public void updateStudent(object parameter)
{
if (ID == )
{
MessageBox.Show("请选择修改项");
return;
}
foreach (var item in mylist)
{
if (item.ID==user.ID)
{
item.ID =ID;
item.Name = Name;
item.Sex = Sex;
item.Remarks = Remarks;
item.Age = Age;
break;
}
}
Binding();
}
public void deleteStudent(object parameter)
{
if (ID == )
{
MessageBox.Show("请选择删除项");
return;
}
User user1 = mylist.Single(p => p.ID == ID);
mylist.Remove(user1);
Binding();
}
#endregion

在进行绑定一下这样我们就能实现增删改了

 public ShowDataViewModel()
{
AddCommand = new DelegateCommands();
AddCommand.ExecuteCommand = new Action<object>(addStudent); UpdateCommand = new DelegateCommands();
UpdateCommand.ExecuteCommand = new Action<object>(updateStudent);//修改方法 DeleteCommand = new DelegateCommands();
DeleteCommand.ExecuteCommand = new Action<object>(deleteStudent);//修改方法 mylist.Add(new User() { ID = , Name = "张三", Age = , Sex = "女", Remarks = "无" });
mylist.Add(new User() { ID = , Name = "李四", Age = , Sex = "女", Remarks = "无" });
mylist.Add(new User() { ID = , Name = "王五", Age = , Sex = "女", Remarks = "无" });
mylist.Add(new User() { ID = , Name = "赵六", Age = , Sex = "女", Remarks = "无" }); Binding();
}

3.3、事件绑定

如果我们想点击控件里面的一行,下面对应的文本框就显示我们该怎么样呢?

回到View给DataGrid绑定事件 首先我们需要给项目添加引用:System.Windows.Interactivity 并且给页面引用命名空间

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
<DataGrid  SelectionUnit="FullRow" AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding ShowList,Mode=TwoWay}" x:Name="dataGrid" VerticalAlignment="Top" Height="182" HorizontalAlignment="Left" Width="408">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged" >
<i:InvokeCommandAction Command="{Binding SelectionChangedCommand}" CommandParameter="{Binding ElementName=dataGrid}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding ID}" Header="编号"/>
<DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="100"/>
<DataGridTextColumn Binding="{Binding Age}" Header="年龄"/>
<DataGridTextColumn Binding="{Binding Sex}" Header="性别" Width="60"/>
<DataGridTextColumn Binding="{Binding Remarks}" Header="备注" Width="172"/>
</DataGrid.Columns>
</DataGrid>

我们在这里CommandParameter参数传的是控件dataGrid

然后我们去ViewModel  ShowDataViewModel.cs

public ICommand SelectionChangedCommand
{
get
{
return new DelegateCommand<DataGrid>((datagrid) =>
{
if (datagrid.SelectedItems.Count > )
{
user =(User)datagrid.SelectedItems[];
ID = user.ID;
Name = user.Name;
Age = user.Age;
Sex = user.Sex;
Remarks = user.Remarks;
}
});
}
}

上一步 需添加引用 Microsoft.Practices.Prism.dll 这样就完成了

这样一个小案例就完成了。

WPF+MVVM学习总结 DataGrid简单案例的更多相关文章

  1. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  2. WPF MVVM 学习总结(一)

    ---恢复内容开始--- 1. MVVM简介 在WPF中,MVVM(View-ViewModel-Model)开发模型用的很多,它具有低耦合,可重用行,相对独立的设计和逻辑.所以备受广大开发者的喜爱. ...

  3. WPF MVVM+EF增删改查 简单示例(二) 1对1 映射

    WPF MVVM+EF增删改查 简单示例(一)实现了对学生信息的管理. 现在需求发生变更,在录入学生资料的时候同时需要录入学生的图片信息,并且一名学生只能有一张图片资料.并可对学生的图片资料进行更新. ...

  4. 个人 WPF+EF(DBFirst) 简单应用开发习惯及EF学习测试(备忘) -- 2

    接上篇:个人 WPF+EF(DBFirst) 简单应用开发习惯及EF学习测试(备忘) -- 1 Step1 在主程序中设置连接数据库 从Model类库的 App.Config 把数据库字符串拷贝出来, ...

  5. Struts2学习笔记NO.1------结合Hibernate完成查询商品类别简单案例(工具IDEA)

    Struts2学习笔记一结合Hibernate完成查询商品类别简单案例(工具IDEA) 1.jar包准备 Hibernate+Struts2 jar包 struts的jar比较多,可以从Struts官 ...

  6. WPF自学入门(十一)WPF MVVM模式Command命令 WPF自学入门(十)WPF MVVM简单介绍

    WPF自学入门(十一)WPF MVVM模式Command命令   在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式 ...

  7. wpf mvvm datagrid数据过滤

    原文:wpf mvvm datagrid数据过滤 datagrid数据过滤,你可以通过设置RowStyle属性,通过将Visibility绑定到ViewModel层的属性来控制是否可见,比如:   & ...

  8. WPF MVVM 从Prism中学习设计模式之Event Aggregator 模式

    Prism简介 Prism是由微软Patterns & Practices团队开发的项目,目的在于帮助开发人员构建松散耦合的.更灵活.更易于维护并且更易于测试的WPF应用或是Silverlig ...

  9. SpringBoot基础学习(一) SpringBoot概念、简单案例实现、单元测试及热部署讲解

    SpringBoot概念 Spring优缺点分析 Spring优点 Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE)的轻量级代替品,无需开发重量级的 ...

随机推荐

  1. Struts2的validator和WEB-INF下页面交互以及路径问题

    当我使用短路校验器时(客户端),在页面下方老是出来 FreeMarker template error!然后我就把我的页面都放在了WEB-INF中,结果很多路径都不对了,因为客户端是没有直接访问Str ...

  2. iPhone与iWatch连接、控制、数据传递(Swift)

    最近在做一个项目,涉及到iPhone设备和手表传输数据.控制彼此界面跳转,在网上找了很多资料,发现国内的网站这方面介绍的不多,而国外的网站写的也不是很全,所以在这写这篇博客,给大家参考一下,望大神指点 ...

  3. 当在浏览器地址栏里输入URL后会发生什么事情

    其实这个很多大神已经说的很多了.但是为了自己更好的理解,在自己所接触的层面上,重新对自己讲解一下.当然,这是站在一个前端开发者的角度上来看问题的. 说说一次HTTP完整事务的过程 输入URL 浏览器从 ...

  4. Servlet小总结(转)

    一,什么是Servlet? Servlet是一个Java编写的程序,此程序是基于Http协议的,在服务器端运行的(如tomcat), 是按照Servlet规范编写的一个Java类. 二,Servlet ...

  5. JAVA优化建议

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...

  6. STM32GPIO口8种模式细致分析(类比51单片机)

    关于STM32GPIO口的8种工作模式,我们先引出一些问题? STM32GPIO口如果既要输入又要输出怎么办? 1.浮空输入模式 上图红色的表示便是浮空输入的过程,外部输入时0读出的就是0,外部输入时 ...

  7. 老李分享:https协议

    老李分享:https协议   最近我们看到很多站点使用 HTTPS 协议提供网页服务.通常情况下我们都是在一些包含机密信息的站点像银行看到 HTTPS 协议. 如果你访问 google,查看一下地址栏 ...

  8. Java中利用BigInteger类进行大数开方

    在Java中有时会用到大数据,基本数据类型的存储范围已经不能满足要求了,如要对10的1000次方的这样一个数据规模的数进行开方运算,很明显不能直接用Math.sqrt()来进行计算,因为已经溢出了. ...

  9. 学习HTML5的第二周

    ---恢复内容开始--- 这是我学习H5的第二周,在本周,我独立完成了一个网站的首页和一个二级页,虽然在做网页的时候我遇到了许多问题,但我自己想办法解决了其中的大部分,只留下了一小部分没有头绪的问题等 ...

  10. C#调用WebService接口实现天气预报在web前端显示

    本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...