WPF 使用MVVM设计模式对进行增删改操作

最新推荐文章于 2024-06-21 14:13:30 发布

Dear200892

最新推荐文章于 2024-06-21 14:13:30 发布

阅读量2k

点赞数 4

分类专栏： C# # WPF 文章标签： C# WPF MVVM 设计模式增删改

本文链接：https://blog.csdn.net/dear200892/article/details/101533249

版权

C# 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

WPF

8 篇文章 0 订阅

订阅专栏

什么是MVVM

MVVM即Model-View-ViewModel，通常适用于WPF或Silverlight开发。

MVC或MVP都是基于面向对象的设计模式，而MVVM是基于组件，数据驱动的设计模式。正是这一区别，造成大家对于MVVM学习起来比较费力。

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

View：使用XAML呈现给用户的界面，负责与用户交互，接收用户输入，把数据展现给用户。
Model：事物的抽象，开发过程中涉及到的事物都可以抽象为Model，例如姓名、年龄、性别、地址等属性。不包含方法，也不需要实现INotifyPropertyChanged接口。
ViewModel：负责收集需要绑定的数据和命令，聚合Model对象，通过View类的DataContext属性绑定到View，同时也可以处理一些UI逻辑。

MVVM优点

低耦合：View合一独立于Model变化和修改。一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成XAML代码。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。　

MVVM简单示例

为了让大家直观地了解MVVM的编程模式，下面会用到前面讲到的数据绑定以及命令等知识。

1.新建WPF项目，名称WpfMVVM。在Model中添加用户类（User）:

public class User :  ICloneable
{
   private int id;
   private string name;
   private int age;
   private string sex;
   private string address;
   /// <summary>
   /// 编号
   /// </summary>
   public int ID { get { return id; } set { id = value;} }
   /// <summary>
   /// 姓名
   /// </summary>
   public string Name { get { return name; } set { name = value;} }
   /// <summary>
   /// 年龄
   /// </summary>
   public int Age { get { return age; } set { age = value; } }
   /// <summary>
   /// 性别
   /// </summary>
   public string Sex { get { return sex; } set { sex = value; } }
   /// <summary>
   /// 地址
   /// </summary>
   public string Address { get { return address; } set { address = value; } }
   /// <summary>
   /// 使数据的复制变为深复制,需要实现ICloneable接口
   /// </summary>
   /// <returns></returns>
   public object Clone()
   {
       return (Object)this.MemberwiseClone();
   }
}

需要注意，后面ViewModel需要数值的复制，如果不实现ICloneable接口，那么将是浅复制，关于浅复制和深复制，请自行百度搜索，相关文章链接：https://blog.csdn.net/bigpudding24/article/details/48490145

2.在ViewModel中添加数据(ShowDataViewModel):

public class ShowDataViewModel 
{
   /// <summary>
   /// 添加用户数据
   /// </summary>
   /// <returns></returns>
   public ObservableCollection<User> GetUsers()
   {
      ObservableCollection<User> userList = new ObservableCollection<User>();
      for (int i = 0; i < 15; i++)
      {
           userList.Add(new User() { ID = (i + 1), Name = "李" + (i + 1), Age = (20 + i), Sex = (i + 1) % 2 == 0 ? "女" : "男", Address = "菜园西" + (i + 1) + "号" });
      }
      return userList;
   }
}

需要注意，集合请不要用List关键字，不然数据更新后，View是不会刷新数据的！请使用：ObservableCollection。

3.在ViewModel中创建命令绑定（DelegateCommands）：

    public class DelegateCommands : ICommand
    {
        //当命令可执行状态发生改变时,应当被激发
        public event EventHandler CanExecuteChanged;

        public Action<object> ExecuteCommand = null;

        public Func<object, bool> CanExecuteCommand = null;
        /// <summary>
        /// 用于判断命令是否可以执行
        /// </summary>
        /// <param name="parameter"></param>
        /// <returns></returns>
        public bool CanExecute(object parameter)
        {
            if (CanExecuteCommand !=null)
            {
                return CanExecuteCommand(parameter);
            }
            else
            {
                return true;
            }
        }
        /// <summary>
        /// 命令执行
        /// </summary>
        /// <param name="parameter"></param>
        public void Execute(object parameter)
        {
            if (ExecuteCommand !=null)
            {
                ExecuteCommand(parameter);
            }
        }
    }

实现接口ICommand。

4.在ViewModel中进行业务处理(UserViewModel):

    public class UserViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }

        private ObservableCollection<User> userList;
        /// <summary>
        /// 用户集合
        /// </summary>
        public ObservableCollection<User> UserList
        {
            get
            {
                if (userList == null)
                {
                    userList = new ObservableCollection<User>();
                    userList = new ShowDataViewModel().GetUsers();
                }
                return userList;               
            }
            set {
                if (userList == null)
                {
                    userList = new ObservableCollection<User>();
                }
                userList = value;
                OnPropertyChanged("UserList");
            }
        }
        public User selectUser;
        /// <summary>
        /// 被选中的用户
        /// </summary>
        public User SelectUser
        {
            get
            {
                if (selectUser == null)
                {
                    selectUser = new User();

                }
                return selectUser;
            }
            set
            {
                if (selectUser == null)
                {
                    selectUser = new User();
                }
                selectUser = value; OnPropertyChanged("SelectUser");
            }
        }
        /// <summary>
        /// 注册命令
        /// </summary>
        private void RegisterCommands()
        {
            AddCommand = new DelegateCommands();
            AddCommand.ExecuteCommand = new Action<object>(AddUser);
            UpdateCommand = new DelegateCommands();
            UpdateCommand.ExecuteCommand = new Action<object>(UpdateUser);
            DeleteCommand = new DelegateCommands();
            DeleteCommand.ExecuteCommand = new Action<object>(DeleteUser);
            SelectionCommand = new DelegateCommands();
            SelectionCommand.ExecuteCommand = new Action<object>(SelectionUser);
        }
        public UserViewModel()
        {
            RegisterCommands();
        }
        /// <summary>
        /// 显示提示信息
        /// </summary>
        /// <param name="txt"></param>
        public void MsgShow(string txt)
        {
            System.Windows.MessageBox.Show(txt);
            //删除后清空选择用户
            SelectUser = null;
        }
        #region 注册命令
        /// <summary>
        /// 新增用户
        /// </summary>
        public DelegateCommands AddCommand { get; set; }
        /// <summary>
        /// 更新用户
        /// </summary>
        public DelegateCommands UpdateCommand { get; set; }
        /// <summary>
        /// 删除用户
        /// </summary>
        public DelegateCommands DeleteCommand { get; set; }
        /// <summary>
        /// 选择用户
        /// </summary>
        public DelegateCommands SelectionCommand { get; set; }
        public void AddUser(object parameter)
        {
            //新增用户的ID为【最小】编号
            int id = 0;
            for (int i = 0; i < UserList.Count; i++)
            {
                if (UserList[i].ID != (i + 1))
                {
                    id = (i + 1);
                    break;
                }
            }
            if (id == 0)
            {
                id = UserList.Max(a => a.ID) + 1;
            }           
            UserList.Insert((id - 1), new User() { ID = id, Name = SelectUser.Name, Age = SelectUser.Age, Sex = SelectUser.Sex, Address = SelectUser.Address });
            MsgShow("用户编号:" + id + "\n新增成功！");
        }
        public void UpdateUser(object parameter)
        {
            if (SelectUser.ID < 1)
            {
                MsgShow("请选择修改项！");
                return;
            }
            //查找需要修改的对象
            User user = UserList.Where(a => a.ID == SelectUser.ID).SingleOrDefault();
            //查找需要修改的对象索引
            int index = UserList.IndexOf(user);
            //使数据的复制变为深复制,需要实现ICloneable接口
            UserList[index]= (User)SelectUser.Clone();
            MsgShow("用户编号:" + SelectUser.ID + "\n修改成功！");
        }
        public void DeleteUser(object parameter)
        {
            if (SelectUser.ID < 1)
            {
                MsgShow("请选择修改项！");
                return;
            }
            User user = UserList.Where(a => a.ID == SelectUser.ID).SingleOrDefault();
            UserList.Remove(user);
            MsgShow("用户编号:" + SelectUser.ID + "\n删除成功！");
        }
        public void SelectionUser(object parameter)
        {
            DataGrid grid = (DataGrid)parameter;
            //使数据的复制变为深复制,需要实现ICloneable接口
            if (grid.SelectedItem!=null)
            {
                SelectUser = (User)((User)grid.SelectedItem).Clone();
            }           
        }
        #endregion
    }

注意事项：需要实现接口INotifyPropertyChanged,不然数据更新后界面无法更新。

对于引用类型的值之间复制，是需要使用深复制，不然改动其中一个值，另一个值同时也会变更，使用方法： SelectUser = (User)((User)grid.SelectedItem).Clone();

关于AddUser方法，我为何不直接让ID去集合的最大值呢？因为几天前我在论坛看到一个帖子，按照他说的内容，特意这么做，请不要模仿！！！

5.在View中创建用户界面(MainWindow.xaml) :

<Window x:Class="WpfMVVM.View.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:WpfMVVM.View"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="450" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="1.5*"/>
        </Grid.RowDefinitions>
        <DataGrid x:Name="dgUser" IsReadOnly="True" AutoGenerateColumns="False" CanUserAddRows="False" HorizontalAlignment="Left" ItemsSource="{Binding UserList}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged" >
                    <i:InvokeCommandAction Command="{Binding SelectionCommand}" CommandParameter="{Binding ElementName=dgUser}" />
                </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 Address}" Header="地址" Width="172"/>
            </DataGrid.Columns>
        </DataGrid>
        <GroupBox Header="用户基本信息" Grid.Row="1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
                    <Label x:Name="lblID" Content="编号：" VerticalAlignment="Center" />
                    <TextBox x:Name="tbxID" IsEnabled ="False"  Text="{Binding SelectUser.ID}" VerticalAlignment="Center" MaxLength="5" Height="22"  Width="90"/>
                </StackPanel>
                <StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal">
                    <Label x:Name="lblName"  Content="姓名：" VerticalAlignment="Center" />
                    <TextBox x:Name="tbxName" Text="{Binding SelectUser.Name}" VerticalAlignment="Center" Height="22" MaxLength="6" Width="90"/>
                </StackPanel>
                <StackPanel Grid.Column="2" Grid.Row="0" Orientation="Horizontal">
                    <Label x:Name="lblAge" Content="年龄：" VerticalAlignment="Center" />
                    <TextBox x:Name="tbxAge" Text="{Binding SelectUser.Age}" VerticalAlignment="Center" Height="22" MaxLength="4" Width="90"/>
                </StackPanel>
                <StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
                    <Label x:Name="lblSex" Content="性别：" VerticalAlignment="Center"/>
                    <ComboBox Text="{Binding SelectUser.Sex}"  SelectedIndex="0" x:Name="cbxSex" VerticalAlignment="Center"  Width="90">
                        <ComboBoxItem Tag="1" Content="男"/>
                        <ComboBoxItem Tag="2" Content="女"/>
                    </ComboBox>
                </StackPanel>
                <StackPanel  Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2" Orientation="Horizontal">
                    <Label x:Name="lblRemarks" Content="地址：" VerticalAlignment="Center"/>
                    <TextBox x:Name="tbxRemarks" Text="{Binding SelectUser.Address}" VerticalAlignment="Center" Height="22" Width="235" />
                </StackPanel>
            </Grid>
        </GroupBox>
        <GroupBox Header="功能操作" Grid.Row="2">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button x:Name="btnSave" Command="{Binding AddCommand}" Content="新增" VerticalAlignment="Center"  Width="69" Height="19" Margin="10,0,10,0" />
                <Button x:Name="btnUpdate" Command="{Binding UpdateCommand}" Content="修改" VerticalAlignment="Center" Width="69" Height="19" Margin="10,0,10,0"/>
                <Button x:Name="btnDelete" Command="{Binding DeleteCommand}" Content="删除" VerticalAlignment="Center" Width="69" Height="19" Margin="10,0,10,0"/>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

如果你想点击表格内容，就能够在下方的用户基本信息刷新数据，那么你就需要引用：xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"，如果没有这个dll，请在【工具=》Nuget包管理器=》管理解决方案的Nuget程序包】中搜索System.Windows.Interactivity,选择【System.Windows.Interactivity.WPF】即可！

cs:

    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new UserViewModel();
        }
    }

6.运行效果图：

若你们二位不幸看到我举例用户，找到我再说~~~~

7.项目源码：

百度网盘链接：https://pan.baidu.com/s/1fxsZAtfFURIJi-g2kqunjw 提取码：2zy4
CSDN下载: https://download.csdn.net/download/dear200892/11827306

Dear200892

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
10
评论
WPF 使用MVVM设计模式对进行增删改操作

什么是MVVMMVVM即Model-View-ViewModel，通常适用于WPF或Silverlight开发。MVC或MVP都是基于面向对象的设计模式，而MVVM是基于组件，数据驱动的设计模式。正是这一区别，造成大家对于MVVM学习起来比较费力。我们可以通过下图来直观的理解MVVM设计模式：　　View：使用XAML呈现给用户的界面，负责与用户交互，接收用户输入，把数据展现...
复制链接

扫一扫

专栏目录