MVVM在WPF中的应用(一)
一、不使用MVVM
- 使用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();
}

- 使用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
- 先创建文件夹

- 创建一个类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));
}
}
}
- 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);
}
}
}
- 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; }
}
}
- 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>
- MainWindow.cs
using MVVM_Liu.ViewModels;
using System.Windows;
namespace MVVM_Liu {
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
this.DataContext = new MainWindowViewModel();
}
}
}

- 改为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>
