WPF之mvvm框架下点击事件

前言：mvvm框架的主旨是实现前后端分离开发，对于小型的项目确实没必要，直接在.xaml.cs文件中写自己的click点击事件就行。

现在我将使用mvvm模式前后区别记录一下：

首先，我的工程下有着三个文件：

1）TwoDimensionalPlaneView.xaml

2)   TwoDimensionalPlaneView.xaml.cs

2)   TwoDimensionalPlaneViewModel.cs

这个是我的界面。我想实现的逻辑大概是：点击确定，控制台输出输入框中的文字。点击取消，则输出台输出关闭界面。下面我以第二个输入框为例！

1.使用click事件

1）在xaml界面对应的输入框，名字为RadiationL。

                <Border Grid.Row="1" Grid.Column="2" Name="RadiantionLocation"  BorderBrush="#FF707070" BorderThickness="1,1,1,1"   Height="40" Margin="0,14,0,14.8" >
                    <TextBox  FontFamily="Courier New" x:Name="RadiantionL"  FontSize="16" Foreground="White" 
                             BorderBrush="{x:Null}" BorderThickness="0"  Style="{DynamicResource TextBoxStyle1}" />
                </Border>

2）在xaml界面对应的button按键，名字为RadiantionLOK和RadiantionLESC。

        在TwoDimensionalPlaneView.xaml中可以看到分别对应的取消和确定按钮，并且各自有自己的click事件：Click="RadiantionLOK_Click" 和Click="RadiantionLESC_Click"。

                <StackPanel  Grid.Row="1" Grid.Column="3" HorizontalAlignment="Left" Orientation="Horizontal" Margin="50,0,0,0" Grid.ColumnSpan="2"  >
                    <Button Name="RadiantionLOK" IsEnabled="{Binding ClickEnable}"  IsDefault="True"  HorizontalAlignment="Center" VerticalAlignment="Center" 
		         Width="100" Height="32" FontSize="14" Background="#4370F5" Foreground="White"   Content="确 定" Margin="0,0,0,0" Click="RadiantionLOK_Click" >
                    </Button>
                    <Separator Opacity="0"  Width="50" Height="20"/>
                    <Button Name="RadiantionLESC" IsEnabled="{Binding ClickEnable}"  IsDefault="True"  HorizontalAlignment="Right" VerticalAlignment="Center" 
		         Width="100" Height="32" FontSize="14" Background="#4370F5" Foreground="White"   Content="取 消" Margin="0,0,0,0"  Click="RadiantionLESC_Click">
                    </Button>
                </StackPanel>

3）在xaml界面对应的button按键，名字为RadiantionLOK和RadiantionLESC。        

        在 TwoDimensionalPlaneView.xaml.cs中对应的事件逻辑。

        private void RadiantionLOK_Click(object sender, RoutedEventArgs e)
        {
            // 从输入框中获取坐标
            string coordinateText = RadiantionL.Text;

            // 输出调试信息到控制台
            Console.WriteLine("输入的坐标为：" + coordinateText);
        }
        private void RadiantionLESC_Click(object sender, RoutedEventArgs e)
        {

            Console.WriteLine("界面关闭" );
        }

4）最终运行结果。 

2.使用mvvm模式

1）在xaml界面对应的输入框，名字为RadiationL。（不改变）

与此同时在TwoDimensionalPlaneViewModel.cs文件中创建相对应的属性。

private string radiationLText;
public string RadiationLText
        {
            get { return radiationLText; }
            set
            {
                radiationLText = value;
                OnPropertyChanged(nameof(RadiationLText));
            }
        }

2）将xaml界面对应的输入框绑定到后台文件创建的属性。

                <Border Grid.Row="1" Grid.Column="2" Name="RadiantionLocation"  BorderBrush="#FF707070" BorderThickness="1,1,1,1"   Height="40" Margin="0,14,0,14.8" >
                    <TextBox  FontFamily="Courier New" x:Name="RadiantionL"  FontSize="16" Foreground="White" 
                             BorderBrush="{x:Null}" BorderThickness="0"  Style="{DynamicResource TextBoxStyle1}" 
                              Text="{Binding RadiationLText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                </Border>

3）准备好在TwoDimensionalPlaneViewModel.cs文件的相关接口

 1.首先要继承public class TwoDimensionalPlaneViewModel : INotifyPropertyChanged

 2.调用接口的委托public event PropertyChangedEventHandler PropertyChanged;

 3.这里我创建了一个方法OnPropertyChanged(string propertyName)，当属性值改变时触发 PropertyChanged 事件来通知订阅了这一事件的其他部分代码。

 4.创建相应的继承ICommand属性的接口，并传入相应的方法。

public TwoDimensionalPlaneViewModel()
        {
            RadiationPOKCommand = new RelayCommand(RadiationPOK);
            RadiationPESCommand = new RelayCommand(RadiationPESC);
            RadiationLOKCommand = new RelayCommand(RadiationLOK);
            RadiationLESCommand = new RelayCommand(RadiationLESC);
        }
        public ICommand RadiationPOKCommand { get; set; }
        public ICommand RadiationPESCommand { get; set; }
        public ICommand RadiationLOKCommand { get; set; }
        public ICommand RadiationLESCommand { get; set; }


        public event PropertyChangedEventHandler PropertyChanged;


        private void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void RadiationPOK()
        {
            string coordinateText = RadiationPText;
            Console.WriteLine("输入的坐标为：" + coordinateText);
        }

        private void RadiationPESC()
        {
            
            Console.WriteLine("界面已经退出！" );
        }
 private void RadiationLOK()
        {
            string coordinateText = RadiationLText;
            Console.WriteLine("输入的坐标为：" + coordinateText);
        }

        private void RadiationLESC()
        {

            Console.WriteLine("界面已经退出！");
        }

2）将xaml界面对应的按钮绑定到后台文件创建的属性。

<Button Name="RadiantionLOK" IsEnabled="{Binding ClickEnable}"  IsDefault="True"  HorizontalAlignment="Center" VerticalAlignment="Center" 
		         Width="100" Height="32" FontSize="14" Background="#4370F5" Foreground="White"   Content="确 定" Margin="0,0,0,0 " Command="{Binding RadiationLOKCommand}"  >
                    </Button>
                    <Separator Opacity="0"  Width="50" Height="20"/>
                    <Button Name="RadiantionLESC" IsEnabled="{Binding ClickEnable}"  IsDefault="True"  HorizontalAlignment="Right" VerticalAlignment="Center" 
		         Width="100" Height="32" FontSize="14" Background="#4370F5" Foreground="White"   Content="取 消" Margin="0,0,0,0" Command="{Binding RadiationLESCommand}" >
                    </Button>

最后运行结果！