MVVM在WPF中的应用(一)

MVVM在WPF中的应用(一)

一、不使用MVVM

1. 使用TextBox

<Window x:Class="MVVM_Liu.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:MVVM_Liu"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Content="Save" Click="ButtonBase_OnClick"/>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBox Background="LightBlue" x:Name="TextBlock1" FontSize="24" Margin="4"></TextBox>
            <TextBox Background="LightBlue" Grid.Row="1" x:Name="TextBlock2" FontSize="24" Margin="4"></TextBox>
            <TextBlock Background="LightBlue" Grid.Row="2" x:Name="TextBlock3" FontSize="24" Margin="4"></TextBlock>
            <Button x:Name="Button1" Grid.Row="3" Content="Add" Height="80" Width="120" Click="Button1_OnClick"/>
        </Grid>
    </Grid>
</Window>

private void Button1_OnClick(object sender, RoutedEventArgs e)
{
    double d1 = double.Parse(TextBlock1.Text);
    double d2 = double.Parse(TextBlock2.Text);
    double res = d1 + d2;
    TextBlock3.Text = res.ToString();
}

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
    SaveFileDialog sf=new SaveFileDialog();
    sf.ShowDialog();
}

1. 使用Slider

<Window x:Class="MVVM_Liu.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:MVVM_Liu"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Menu>
            <MenuItem Header="_File">
                <MenuItem Header="_Save" x:Name="ItemSave" Click="ItemSave_OnClick"></MenuItem>
            </MenuItem>
        </Menu>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Slider Background="LightBlue" x:Name="Slied1" Minimum="-100" Maximum="100" Margin="4"></Slider>
            <Slider Background="LightBlue" Grid.Row="1" x:Name="Slied2" Minimum="-100" Maximum="100" Margin="4"></Slider>
            <Slider Background="LightBlue" Grid.Row="2" x:Name="Slied3" Minimum="-200" Maximum="200" Margin="4"></Slider>
            <Button x:Name="Button1" Grid.Row="3" Content="Add" Height="80" Width="120" Click="Button1_OnClick"/>
        </Grid>
    </Grid>
</Window>

public MainWindow() {
    InitializeComponent();
}

private void Button1_OnClick(object sender, RoutedEventArgs e)
{
    double d1 = Slied1.Value;
    double d2 = Slied2.Value;
    double res = d1 + d2;
    Slied3.Value = res;
}


private void ItemSave_OnClick(object sender, RoutedEventArgs e) {
    SaveFileDialog sf = new SaveFileDialog();
    sf.ShowDialog();
}

二、使用MVVM

1. 先创建文件夹

1. 创建一个类NoticationObject继承自INotifyPropertyChanged

class NoticationObject : INotifyPropertyChanged {
    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string properName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged.Invoke(this,new PropertyChangedEventArgs(properName));
        }
    }
}

1. MainWindowViewModel:NoticationObject

using Microsoft.Win32;
using MVVM_Liu.Commands;
using System;

namespace MVVM_Liu.ViewModels {
    class MainWindowViewModel:NoticationObject
    {
        private double input1;

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

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

        private double result;
        public double Result {
            get { return result; }
            set {
                result = value;
                this.RaisePropertyChanged("Result");
            }
        }

        public DelegateCommand AddCommand { get; set; }
        public DelegateCommand SaveCommand { get; set; }

        private void Add(object parameter)
        {
            this.Result = this.Input1 + this.Input2;
        }

        private void Save(object parameter)
        {
            SaveFileDialog dlg=new SaveFileDialog();
            dlg.ShowDialog();
        }

        public MainWindowViewModel()//ctor
        {
            this.AddCommand=new DelegateCommand();
            this.AddCommand.ExecuteAction = new Action<object>(this.Add);

            this.SaveCommand=new DelegateCommand();
            this.SaveCommand.ExecuteAction=new Action<object>(this.Save);
        }
    }
}

1. DelegateCommand : ICommand

using System;
using System.Windows.Input;

namespace MVVM_Liu.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. MainWindow.xaml

   <Window x:Class="MVVM_Liu.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:MVVM_Liu"
           mc:Ignorable="d"
           Title="MainWindow" Height="450" Width="500">
       <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="*"></RowDefinition>
           </Grid.RowDefinitions>
           <Button Content="Save" Command="{Binding SaveCommand}"/>
           <Grid Grid.Row="1">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"></RowDefinition>
                   <RowDefinition Height="Auto"></RowDefinition>
                   <RowDefinition Height="Auto"></RowDefinition>
                   <RowDefinition Height="*"></RowDefinition>
               </Grid.RowDefinitions>
               <TextBox Background="LightBlue" x:Name="TextBlock1" FontSize="24" Margin="4" Text="{Binding Input1}"/>
               <TextBox Background="LightBlue" Grid.Row="1" x:Name="TextBlock2" FontSize="24" Margin="4" Text="{Binding Input2}"/>
               <TextBlock Background="LightBlue" Grid.Row="2" x:Name="TextBlock3" FontSize="24" Margin="4" Text="{Binding Result}"/>
               <Button x:Name="Button1" Grid.Row="3" Content="Add" Height="80" Width="120" Command="{Binding AddCommand}"/>
           </Grid>
       </Grid>
   </Window>

1. MainWindow.cs

   using MVVM_Liu.ViewModels;
   using System.Windows;

   namespace MVVM_Liu {
       public partial class MainWindow : Window {
           public MainWindow() {
               InitializeComponent();
               this.DataContext = new MainWindowViewModel();
           }
       }
   }

1. 改为Slider

   <Window x:Class="MVVM_Liu.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:MVVM_Liu"
           mc:Ignorable="d"
           Title="MainWindow" Height="450" Width="500">
       <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="*"></RowDefinition>
           </Grid.RowDefinitions>
           <Button Content="Save" Command="{Binding SaveCommand}"/>
           <Grid Grid.Row="1">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"></RowDefinition>
                   <RowDefinition Height="Auto"></RowDefinition>
                   <RowDefinition Height="Auto"></RowDefinition>
                   <RowDefinition Height="*"></RowDefinition>
               </Grid.RowDefinitions>
               <Slider Background="LightBlue" x:Name="Slied1" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Input1}"></Slider>
               <Slider Background="LightBlue" Grid.Row="1" x:Name="Slied2" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Input2}"></Slider>
               <Slider Background="LightBlue" Grid.Row="2" x:Name="Slied3" Minimum="-200" Maximum="200" Margin="4" Value="{Binding Result}"></Slider>
               <Button x:Name="Button1" Grid.Row="3" Content="Add" Height="80" Width="120" Command="{Binding AddCommand}"/>
           </Grid>
       </Grid>
   </Window>