简单加法计算器MVVM

一、普通界面搭建

 <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button Content="Save"/>
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBox x:Name="tb1" Grid.Row="0" Background="LightBlue" FontSize="24" Margin="4" />
                <TextBox x:Name="tb2" Grid.Row="1" Background="LightBlue" FontSize="24" Margin="4" />
                <TextBox x:Name="tb3" Grid.Row="2" Background="LightBlue" FontSize="24" Margin="4" />
                <Button x:Name="addButton" Grid.Row="3" Content="Add" Width="120" Height="80" Click="addButton_Click" />
            </Grid>

二、为项目创建4个普通文件夹（services，models，view，viewmodels）

三、在viewmodels中创建基类NotificationObject.cs

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

 四、创建Commands并为其添加基类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace ADDM.commands
{
    class DelegateCommand : ICommand
    {
        public event EventHandler CanExecuteChanged;
        public bool CanExecute(object parameter)
        {
            if (this.CanExecuteFunc==null)
            {
                return true;
            }
            return  this.CanExecuteFunc(parameter);
        }
       
        public void Execute(object parameter)
        {
            if (this.ExecuteAction==null)
            {
                return;
            }
            this.ExecuteAction(parameter);
        }
        public Action<object> ExecuteAction { get; set; }
        public Func<object,bool> CanExecuteFunc { get; set;}
    }
}

1、Action是一个没有返回值的委托

2、Func是一个委托，最后一个类型为委托的返回值类型，前面的全部是参数的类型，如果只有一个参数，则是返回值的类型

五、为viewmodels添加一个mainwindowviewmodels类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using ADDM.commands;
using Microsoft.Win32;

namespace ADDM.viewmodels
{
    class MainWindowViewModels:NotificationObject
    {
        //创建3个数据属性
        private double input1;

        public double Input1
        {
            get { return input1; }
            set
            {
                input1 = value;
                this.RaisePropertyChange("Input1");
            }
        }

        private double input2;

        public double Input2
        {
            get { return input2; }
            set
            {
                input2 = value;
                this.RaisePropertyChange("Input2");
            }
        }

        private double result;

        public double Result
        {
            get { return result; }
            set
            {
                result = value;
                this.RaisePropertyChange("Result");
            }
        }
    
        //命令
        public DelegateCommand AddCommand { get; set; }
        public DelegateCommand SaveCommand { get; set; }

        public void Save(object parameter)
        {
            SaveFileDialog dlg = new SaveFileDialog();
            dlg.ShowDialog();
        }
        private void Add(object parameter)
        {
            //这里的result和input1、input2要用首字母大写，否则无法更新
            this.Result = this.Input1 + this.Input2;
        }

        //构造函数关联
        public MainWindowViewModels()
        {
            this.AddCommand = new DelegateCommand();
            this.AddCommand.ExecuteAction = new Action<object>(this.Add);
            this.SaveCommand = new DelegateCommand();
            this.SaveCommand.ExecuteAction = new Action<object>(this.Save);
        }
    }
}

六、为界面里的图形添加绑定，为button添加事件

<Window x:Class="ADDM.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:ADDM"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
        <Grid>
            <!--定义了2行-->
            <Grid.RowDefinitions>
                    <!--自动值：Auto 比例值：double数值后+一个星号“*” 绝对值：double数值后加单位后缀-->
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!--定义一个Button按钮，content 内容 Command决定按钮功效  绑定保存命令 -->
            <Button Content="Save" Command="{Binding SaveCommand }"/>
            <!--1行-->
            <Grid Grid.Row="1">
                <!--将1行分为4行-->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!--在0行放置名为tb1的Textbox X:name 告诉编译器该textBox的名字 Background背景色 fontsize字体大小 margin 离边缘距离 Text文本信息 绑定 Input1 下同-->
                <TextBox x:Name="tb1" Grid.Row="0" Background="LightBlue" FontSize="24" Margin="4" Text="{Binding Input1}" />
                <TextBox x:Name="tb2" Grid.Row="1" Background="LightBlue" FontSize="24" Margin="4" Text="{Binding Input2}"/>
            <TextBox x:Name="tb3" Grid.Row="2" Background="LightBlue" FontSize="24" Margin="4" Text="{Binding Result}"/>
            <Button x:Name="addButton" Grid.Row="3" Content="Add" Width="120" Height="80" Command="{Binding AddCommand}"/>
            </Grid>
        </Grid>
</Window>

 

 七、MainWindows.xmal.cs

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;

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

八、结果

刚启动：

 计算：