WPF MVVM简单理解

WPF MVVM简单理解

示例一：
测试界面：
运行程序后文本框显示hello，当鼠标点击数据一按钮后，文本框显示数据一；当鼠标点击数据二按钮后，文本框显示数据二；当鼠标点击数据三按钮后，文本框显示数据三；

Xaml代码：

<Window x:Class="WPF0310_001.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:WPF0310_001"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <TextBox Height="30" Margin="10" Name="tb_name" Text="{Binding Name}"></TextBox>
            <Button Name="tb_value1" Content="数据一" Margin="10" Click="Tb_value1_Click" ></Button>
            <Button Name="tb_value2" Content="数据二" Margin="10" Click="Tb_value2_Click" ></Button>
            <Button Name="tb_value3" Content="数据三" Margin="10" Click="Tb_value3_Click" ></Button>
        </StackPanel>
    </Grid>
</Window>

MainViewModel类中代码：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System.Collections.ObjectModel;
using WPF0310_001.Models;

namespace WPF0310_001.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
        }

        private string name;

        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                RaisePropertyChanged();
            }
        }
    }
}

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using WPF0310_001.ViewModel;

namespace WPF0310_001
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        MainViewModel mydata;
        public MainWindow()
        {
            InitializeComponent();

            mydata = new MainViewModel() { Name = "hello" };
            this.DataContext = mydata;
        }

        private void Tb_value1_Click(object sender, RoutedEventArgs e)
        {
            mydata.Name = "数据一";
        }

        private void Tb_value2_Click(object sender, RoutedEventArgs e)
        {
            mydata.Name = "数据二";
        }

        private void Tb_value3_Click(object sender, RoutedEventArgs e)
        {
            mydata.Name = "数据三";
        }
    }
}

示例二：
UI上放置一个TextBlock，代码如下：

<Window x:Class="WPF0313.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>
        <TextBlock Name="textblock1" Text="{Binding StuName}" FontSize="25"></TextBlock>
    </Grid>
</Window>

上面TextBlock控件绑定的是一个Student类的实例，Student类如下，包含一个StuName属性：

class Student
    {
        private string stuName;
        public string StuName 
        {
            get { return stuName; } 
            set
            {
                stuName = value;
            }
        }
    }

后台代码：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new Student() { StuName = "Danny"};
        }
    }

运行效果：

示例三：
如果在示例二基础上在界面上添加一个按钮，点击按钮改变显示的名称，我们在按钮的点击事件中添加如下代码：

private void btn_Change_Click(object sender, RoutedEventArgs e)
        {
            var p = this.DataContext as Student;
            p.StuName = "Eric";
        }

此时点击按钮界面不会改变，我们需要在Student类中继承一个接口（INotifyPropertyChanged），使StuName改变后自动能触发绑定，代码如下：

class Student : INotifyPropertyChanged
    {
        private string stuName;
        public string StuName 
        {
            get { return stuName; } 
            set
            {
                stuName = value;
                OnPropertyChanged("StuName");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

此时运行效果：

而且：Student类也可以这样写，不用在每个OnPropertyChanged()写属性名：

class Student : INotifyPropertyChanged
    {
        private string stuName;
        public string StuName 
        {
            get { return stuName; } 
            set
            {
                stuName = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }