(ZZ)WPF经典编程模式-MVVM示例讲解

http://www.cnblogs.com/xjxz/archive/2012/11/14/WPF.html

 

本篇从两个方面来讨论MVVM模式:

  1. MVVM理论知识
  2. MVVM示例讲解

 

一,MVVM理论知识

  从上一篇文章中,我们已经知道,WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI。 

  我们使用模式,一般是想达到高内聚低耦合。在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很少,甚至不用修改。与WinForm开发相比,我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI,而在WPF中通常是通过数据绑定来更新UI;在响应用户操作上,WinForm是通过控件的事件来处理,而WPF可以使用命令绑定的方式来处理,耦合度将降低。

  我们可以通过下图来直观的理解MVVM模式:  

  View就是用xaml实现的界面,负责与用户交互,接收用户输入,把数据展现给用户。
  ViewModel,一个C#类,负责收集需要绑定的数据和命令,聚合Model对象,通过View类的DataContext属性绑定到View,同时也可以处理一些UI逻辑。
  Model,就是系统中的对象,可包含属性和行为。

  一般,View对应一个ViewModel,ViewModel可以聚合N个Model,ViewModel可以对应多个View,Model不知道View和ViewModel的存在。

二,MVVM示例讲解

  这个示例是为了让大家直观地了解MVVM的编程模式,关于其中用到的数据绑定和命令等知识,在后面的文章会专门讨论。

  1. 首先定义NotificationObject类。目的是绑定数据属性。这个类的作用是实现了INotifyPropertyChanged接口。WPF中类要实现这个接口,其属性成员才具备通知UI的能力,数据绑定的知识,后面详细讨论。
复制代码
using System.ComponentModel;

namespace WpfFirst
{
    class NotificationObject : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}
复制代码

  2.定义DelegateCommand类。目的是绑定命令属性。这个类的作用是实现了ICommand接口,WPF中实现了ICommand接口的类,才能作为命令绑定到UI。命令的知识,后面详细讨论。

复制代码
using System;
using System.Collections.Generic;
using System.Windows.Input;

namespace WpfFirst
{
    class DelegateCommand : ICommand
    {
        //A method prototype without return value.
        public Action<object> ExecuteCommand = null;
        //A method prototype return a bool type.
        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);
        }

        public void RaiseCanExecuteChanged()
        {
            if (CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }
    }
}
复制代码

  3.开始定义Model类。一个属性成员"WPF",它就是数据属性,的有通知功能,它改变后,会知道通知UI更新。一个方法“Copy”,用来改变属性“WPF”的值,它通过命令的方式相应UI事件。

复制代码
using System.ComponentModel;
using System.Windows.Input;

namespace WpfFirst
{
    class Model : NotificationObject
    {
        private string _wpf = "WPF";

        public string WPF
        {
            get { return _wpf; }
            set
            {
                _wpf = value;
                this.RaisePropertyChanged("WPF");
            }
        }        

        public void Copy(object obj)
        {
            this.WPF += " WPF";
        }
        
    }
}
复制代码

  4.定义ViewModel类。定义了一个命令属性"CopyCmd",聚合了一个Model对象"model"。这里的关键是,给CopyCmd命令指定响应命令的方法是model对象的“Copy”方法。

复制代码
using System;
namespace WpfFirst
{
    class ViewModel
    {
        public DelegateCommand CopyCmd { get; set; }        
        public Model model { get; set; }

        public ViewModel()
        {
            this.model = new Model();
            this.CopyCmd = new DelegateCommand();
            this.CopyCmd.ExecuteCommand = new Action<object>(this.model.Copy);
        }
    }
}
复制代码

  5.定义View.

  MainWindow.xaml代码:我们能看到,TextBlock控件的text属性,绑定在model对象的WPF属性上; Button的click事件通过命令绑定到CopyCmd命令属性。  

复制代码
<Window x:Class="WpfFirst.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel VerticalAlignment="Center" >
            <TextBlock Text="{Binding model.WPF}" Height="208" TextWrapping="WrapWithOverflow"></TextBlock>
            <Button Command="{Binding CopyCmd}" Height="93" Width="232">Copy</Button>
        </StackPanel>
    </Grid>
</Window>
复制代码

  MainWindow.xaml.cs代码:它的工作知识把ViewModel对象赋值到DataContext属性,指定View的数据源就是这个ViewModel。

复制代码
using System.Windows;

namespace WpfFirst
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new ViewModel();
        }
    }
}
复制代码

  6.运行结果。每当我们点击按钮,界面就是被更新了,因为Copy方法改变了WFP属性的值。  

  写这个简单的例子,就是为了直观地了解MVVM的编程模式。在实际开发中,不管程序有多复杂,也就是增加Model, View, ViewModel,和其他的一些辅助类(Helpers or Services)了,模式不会改变。

转载于:https://www.cnblogs.com/jamey/p/5151228.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MVVM(Model-View-ViewModel)是一种经典WPF编程模式,它将应用程序分为三个部分:模型(Model)、视图(View)和视图模型(ViewModel)。其中,模型表示业务数据和规则,视图显示用户界面,视图模型则充当模型和视图之间的中介,负责协调数据和业务逻辑与视图的交互。 下面我将通过一个简单的示例讲解MVVM模式WPF中的应用。 首先,我们需要创建一个WPF应用程序,并添加一个MainWindow.xaml文件作为主窗口。 然后,我们定义一个模型类,表示一个人员信息,包括姓名和年龄: ```csharp public class Person { public string Name { get; set; } public int Age { get; set; } } ``` 接着,我们创建一个视图模型类,负责管理人员信息的增删改查操作,并与视图进行交互。在这个示例中,我们只实现了添加和删除功能: ```csharp public class ViewModel : INotifyPropertyChanged { private ObservableCollection<Person> _persons; public ObservableCollection<Person> Persons { get { return _persons; } set { _persons = value; OnPropertyChanged(nameof(Persons)); } } private string _name; public string Name { get { return _name; } set { _name = value; OnPropertyChanged(nameof(Name)); } } private int _age; public int Age { get { return _age; } set { _age = value; OnPropertyChanged(nameof(Age)); } } public RelayCommand AddCommand { get; set; } public RelayCommand<Person> RemoveCommand { get; set; } public ViewModel() { Persons = new ObservableCollection<Person>(); AddCommand = new RelayCommand(AddPerson); RemoveCommand = new RelayCommand<Person>(RemovePerson); } private void AddPerson() { Persons.Add(new Person { Name = Name, Age = Age }); Name = ""; Age = 0; } private void RemovePerson(Person person) { Persons.Remove(person); } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } public class RelayCommand : ICommand { private readonly Action _execute; private readonly Func<bool> _canExecute; public RelayCommand(Action execute, Func<bool> canExecute = null) { _execute = execute; _canExecute = canExecute; } public bool CanExecute(object parameter) { return _canExecute == null || _canExecute(); } public void Execute(object parameter) { _execute(); } public event EventHandler CanExecuteChanged; public void RaiseCanExecuteChanged() { CanExecuteChanged?.Invoke(this, EventArgs.Empty); } } public class RelayCommand<T> : ICommand { private readonly Action<T> _execute; private readonly Func<T, bool> _canExecute; public RelayCommand(Action<T> execute, Func<T, bool> canExecute = null) { _execute = execute; _canExecute = canExecute; } public bool CanExecute(object parameter) { return _canExecute == null || _canExecute((T)parameter); } public void Execute(object parameter) { _execute((T)parameter); } public event EventHandler CanExecuteChanged; public void RaiseCanExecuteChanged() { CanExecuteChanged?.Invoke(this, EventArgs.Empty); } } ``` 注意,在这个视图模型类中,我们实现了INotifyPropertyChanged接口,以便在属性值发生变化时通知视图进行更新。此外,我们还定义了两个命令AddCommand和RemoveCommand,分别用于添加和删除人员信息,这里使用了一个简单的ICommand实现RelayCommand。 最后,我们在MainWindow.xaml中定义视图,并将其绑定到视图模型中的属性和命令: ```xml <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1" Title="MainWindow" Height="350" Width="525"> <Window.DataContext> <local:ViewModel/> </Window.DataContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="10"> <Label Content="Name:" VerticalAlignment="Center"/> <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Width="100" Margin="5"/> <Label Content="Age:" VerticalAlignment="Center" Margin="10,0,0,0"/> <TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}" Width="50" Margin="5"/> <Button Content="Add" Command="{Binding AddCommand}" Margin="10,0"/> </StackPanel> <ListBox Grid.Row="1" ItemsSource="{Binding Persons}" Margin="10" SelectedItem="{Binding SelectedPerson}" SelectionMode="Single"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}" Margin="5"/> <TextBlock Text="{Binding Age}" Margin="5"/> <Button Content="Remove" Command="{Binding DataContext.RemoveCommand, RelativeSource={RelativeSource AncestorType=ListBox}}" CommandParameter="{Binding}" Margin="10,0"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </Window> ``` 在这个视图中,我们使用了DataTemplate来定义ListBox的项模板,其中包含一个文本块和一个删除按钮。注意,在删除按钮的命令绑定中,我们使用了RelativeSource来指定数据上下文为ListBox的视图模型,并将选中的人员信息作为参数传递给RemoveCommand。 到此为止,一个简单的MVVM示例就完成了。通过这个示例,我们可以看到MVVM模式WPF中的应用,它能够有效地将业务逻辑和用户界面进行分离,使得应用程序更加清晰、易于维护。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值