WPF Demo(MVVM设计模式)

WPF MVVM设计模式实例

本人是WPF初学者，以下实例仅为本人的理解，如有错漏欢迎补充。

我们先看成品样图，并一步一步按此效果完成。

 

 

 

开发环境：Win10、VS2019

（一）实现将学生信息显示与主界面功能。

1.使用WPF模板创建一个项目。

 

2.新建Model类Student，其中继承的ViewModdelBase需要安装MvvmLightLibs库。

public class Student : ViewModelBase
    {
        /// <summary>
        /// id
        /// </summary>
        private int id;
        public int Id
        {
            get { return id; }
            set { id = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 姓名
        /// </summary>
        private string name;
        public string Name
        {
            get { return name; }
            set { name = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 性别
        /// </summary>
        private string sex;
        public string Sex
        {
            get { return sex; }
            set { sex = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 爱好
        /// </summary>
        private string hobby;
        public string Hobby
        {
            get { return hobby; }
            set { hobby = value; RaisePropertyChanged(); }
        }

        /// <summary>
        /// 出生日期
        /// </summary>
        private DateTime birthDate;
        public DateTime BirthDate
        {
            get { return birthDate; }
            set { birthDate = value; RaisePropertyChanged(); }
        }
    }

 

3.新建LocalDb类作为本地内存数据库，并支持新增、删除和查询功能。因为MVVM设计模式有通知属性变化的功能，所以自带了修改的效果。

public class LocalDb
    {
        public LocalDb()
        {
            Init();
        }

        List<Student> lstStu;
        public void Init()
        {
            lstStu = new List<Student>
            {
                new Student
                {
                    Id = 1,
                    Name = "小明",
                    Sex = "男",
                    Hobby = "篮球、跑步",
                    BirthDate = Convert.ToDateTime("2014/1/14")
                },
                new Student
                {
                    Id = 2,
                    Name = "小红",
                    Sex = "女",
                    Hobby = "跳绳",
                    BirthDate = Convert.ToDateTime("2014/5/19")
                },
                new Student
                {
                    Id = 3,
                    Name = "小军",
                    Sex = "男",
                    Hobby = "足球",
                    BirthDate = Convert.ToDateTime("2013/11/14")
                },
                new Student
                {
                    Id = 4,
                    Name = "小芳",
                    Sex = "女",
                    Hobby = "唱歌、画画",
                    BirthDate = Convert.ToDateTime("2014/3/5")
                },
                new Student
                {
                    Id = 5,
                    Name = "小李",
                    Sex = "男",
                    Hobby = "武术",
                    BirthDate = Convert.ToDateTime("2014/10/25")
                }
            };
        }

        public Student GetStudentById(int id)
        {
            var data = lstStu.FirstOrDefault(o => o.Id == id);
            return data;
        }

        public List<Student> GetStudentByName(string name)
        {
            var dataList = lstStu.FindAll(o => o.Name.Contains(name));
            return dataList;
        }

        public void Add(Student stu)
        {
            if (stu != null)
            {
                lstStu.Add(stu);
            }
        }

        public void Del(int id)
        {
            var data = lstStu.FirstOrDefault(o => o.Id == id);
            if (data != null)
            {
                lstStu.Remove(data);
            }
        }
    }

 

4.新建一个ViewStudentModel类，用于创建视图与模型间增删改查操作命令。我们先来把查询功能做出来，然后看一下运行效果。

public class ViewStudentModel : ViewModelBase
    {
        private string search = string.Empty;
        public string Search
        {
            get { return search; }
            set { search = value; RaisePropertyChanged(); }
        }

        private ObservableCollection<Student> gridModelList;
        public ObservableCollection<Student> GridModelList
        {
            get { return gridModelList; }
            set { gridModelList = value; RaisePropertyChanged(); }
        }

        public RelayCommand QueryCommand { get; set; }

        private LocalDb localDb;
        public ViewStudentModel()
        {
            localDb = new LocalDb();
            QueryCommand = new RelayCommand(Query);
        }

        public void Query()
        {
            var dataList = localDb.GetStudentByName(Search);
            GridModelList = new ObservableCollection<Student>();
            if (dataList != null)
            {
                dataList.ForEach(o => GridModelList.Add(o));
            }
        }
    }

 

5.在主程序MainWindow.cs类初始化ViewStudentModel类，并调用查询命令，给DataContext赋值，用于UI界面绑定数据。

public MainWindow()
        {
            InitializeComponent();

            var view = new ViewStudentModel();
            view.Query();

            this.DataContext = view;
        }

 

6.编写UI界面。

<Window x:Class="WpfMVVMDemo.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:WpfMVVMDemo"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <TextBlock Text="搜索:" VerticalAlignment="Center" FontSize="16" Margin="10 0 0 0"></TextBlock>
            <TextBox Text="{Binding Search}" Width="180" Height="25" Margin="10 0 0 0"></TextBox>
            <Button Command="{Binding QueryCommand}" Content="查询" Width="75" Height="25" Margin="10 0 0 0"></Button>
            <Button Content="新增" Width="75" Height="25" Margin="10 0 0 0"></Button>
            <Button Content="重置" Width="75" Height="25" Margin="10 0 0 0"></Button>
        </StackPanel>

        <DataGrid Grid.Row="1" IsReadOnly="True" ItemsSource="{Binding GridModelList}" AutoGenerateColumns="False" ColumnWidth="*">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Id" Binding="{Binding Id}">
                </DataGridTextColumn>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}">
                </DataGridTextColumn>
                <DataGridTextColumn Header="性别" Binding="{Binding Sex}">
                </DataGridTextColumn>
                <DataGridTextColumn Header="爱好" Binding="{Binding Hobby}">
                </DataGridTextColumn>
                <DataGridTextColumn Header="出生日期" Binding="{Binding BirthDate, StringFormat='yyyy/MM/dd'}">
                </DataGridTextColumn>
                <DataGridTemplateColumn Header="操作">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button Content="修改" Width="60" Height="25" Foreground="Black" Background="Yellow"></Button>
                                <Button Content="删除" Width="60" Height="25" Foreground="Black" Background="Red"></Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

此时我们运行就能看到数据了，并且查询功能也可以使用了。

 

（二）完善新增、修改、删除和重置数据功能。

1.我们先完成简单的删除功能。

首先在ViewStudentModel.cs添加删除命令。

public RelayCommand<int> DelCommand { get; set; }

public ViewStudentModel()
        {
            localDb = new LocalDb();
            QueryCommand = new RelayCommand(Query);
            DelCommand = new RelayCommand<int>(Del);
        }

public void Del(int id)
        {
            var data = localDb.GetStudentById(id);
            if (data != null)
            {
                var r = MessageBox.Show($"是否删除学生：{data.Name}？", "删除学生", MessageBoxButton.YesNoCancel);
                if (r == MessageBoxResult.Yes)
                {
                    localDb.Del(id);
                    Query();
                }
                
            }
        }

 然后在UI界面使用删除命令。

<Button Content="删除" Width="60" Height="25" Foreground="Black" Background="Red"
                                        CommandParameter="{Binding Id}"
                                        Command="{Binding DataContext.DelCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}">
                                </Button>

 

2.接着，我们再完成比较简单的重置功能。

跟删除功能的实现类似，首先在ViewStudentModel.cs添加重置命令。

public RelayCommand<int> DelCommand { get; set; }

public ViewStudentModel()
        {
            localDb = new LocalDb();
            QueryCommand = new RelayCommand(Query);
            ResetCommand = new RelayCommand(Reset);
            DelCommand = new RelayCommand<int>(Del);
        }

public void Reset()
        {
            Search = string.Empty;
            localDb.Init();
            Query();
        }

然后在UI界面使用重置命令。

<Button Command="{Binding ResetCommand}" Content="重置" Width="75" Height="25" Margin="10 0 0 0"></Button>

 

3.添加新增功能。

3.1.新建一个WPF窗体ViewStudent，编写UI界面。

<Window x:Class="WpfMVVMDemo.Views.ViewStudent"
        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:WpfMVVMDemo.Views"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="ViewStudent" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="40"></RowDefinition>
        </Grid.RowDefinitions>

        <TextBlock Text="{Binding Title}" FontSize="14" HorizontalAlignment="Left" Margin="10 0 0 0"></TextBlock>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <StackPanel Orientation="Vertical"  HorizontalAlignment="Right">
                <TextBlock Text="姓名：" Height="25" Margin="0 0 0 0"></TextBlock>
                <TextBlock Text="性别：" Height="25" Margin="0 20 0 0"></TextBlock>
                <TextBlock Text="爱好：" Height="25" Margin="0 20 0 0"></TextBlock>
                <TextBlock Text="出生日期：" Height="25" Margin="0 20 0 0"></TextBlock>
            </StackPanel>

            <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Left">
                <TextBox Text="{Binding Model.Name}" Width="150" Height="25" Margin="0 0 0 0"></TextBox>
                <ComboBox x:Name="cbSex" Text="{Binding Model.Sex}" Width="150" Height="25" Margin="0 20 0 0"></ComboBox>
                <TextBox Text="{Binding Model.Hobby}" Width="150" Height="25" Margin="0 20 0 0"></TextBox>
                <DatePicker Text="{Binding Model.BirthDate}" Width="150" Height="25" Margin="0 20 0 0"></DatePicker>
            </StackPanel>
        </Grid>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button x:Name="btnSave" Click="btnSave_Click" Content="确定" Width="60" Height="25" Margin="0 0 10 0"></Button>
            <Button x:Name="btnCancel" Click="btnCancel_Click" Content="取消" Width="60" Height="25" Margin="0 0 10 0"></Button>
        </StackPanel>
    </Grid>
</Window>

3.2.初始化页面资源，使用构造方法接收Model。

public partial class ViewStudent : Window
    {
        private List<string> lstSex = new List<string>
        {
            "男","女","未知"
        };

        public ViewStudent(string title, Student stu)
        {
            InitializeComponent();

            this.DataContext = new
            {
                Model = stu,
                Title = title
            };

            cbSex.ItemsSource = lstSex;
            if (title.Equals("新增学生："))
            {
                stu.BirthDate = DateTime.Now;
            }
        }

        private void btnCancel_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }

        private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }
    }

3.3.然后跟重置功能的实现类似，首先在ViewStudentModel.cs添加新增命令。

public RelayCommand AddCommand { get; set; }

public ViewStudentModel()
        {
            localDb = new LocalDb();
            QueryCommand = new RelayCommand(Query);
            AddCommand = new RelayCommand(Add);
            ResetCommand = new RelayCommand(Reset);
            DelCommand = new RelayCommand<int>(Del);
        }

public void Add()
        {
            var stu = new Student();
            var view = new ViewStudent("新增学生：", stu);
            var r = view.ShowDialog();
            if (r.Value)
            {
                stu.Id = GridModelList.Max(o => o.Id) + 1;
                localDb.Add(stu);
                Query();
            }
        }

3.4.最后在UI界面使用新增命令。

<Button Command="{Binding AddCommand}" Content="新增" Width="75" Height="25" Margin="10 0 0 0"></Button>

 

4.添加编辑功能。因为已经完成添加功能，我们可以继续使用ViewStudent页面，只要将标题改成修改就好了。

4.1.跟删除功能的实现类似，首先在ViewStudentModel.cs添加编辑命令。

public RelayCommand<int> EditCommand { get; set; }

public ViewStudentModel()
        {
            localDb = new LocalDb();
            QueryCommand = new RelayCommand(Query);
            AddCommand = new RelayCommand(Add);
            EditCommand = new RelayCommand<int>(Edit);
            ResetCommand = new RelayCommand(Reset);
            DelCommand = new RelayCommand<int>(Del);
        }

public void Edit(int id)
        {
            var data = localDb.GetStudentById(id);
            if (data != null)
            {
                var tData = new Student
                {
                    Id = data.Id,
                    Name = data.Name,
                    Sex = data.Sex,
                    Hobby = data.Hobby,
                    BirthDate = data.BirthDate
                };

                var view = new ViewStudent("编辑学生：", data);
                var r = view.ShowDialog();
                if (!r.Value)
                {
                    var model = GridModelList.FirstOrDefault(o => o.Id == id);
                    model.Name = tData.Name;
                    model.Sex = tData.Sex;
                    model.Hobby = tData.Hobby;
                    model.BirthDate = tData.BirthDate;
                }
            }
        }

4.2.然后在UI界面使用修改命令。

<Button Content="修改" Width="60" Height="25" Foreground="Black" Background="Yellow"
                                        CommandParameter="{Binding Id}"
                                        Command="{Binding DataContext.EditCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}"></Button>

到现在为止，我们把一个使用MVVM设计模式的WPF项目完成了，并且具有最基本的增删改查功能。

 本实例源码：https://github.com/Jcanc/WpfMVVMDemo.git