WPF之MVVM 框架学习 绑定篇

先引用MVVM 的框架：

将配置项中的资源也删掉；

绑定的实现：

当引用MVVM得时候，就不用再使用INotifyPropertyChanged 

这个时候就用框架的基类代替了，使用的基类是：ViewModelBase

但是注意需要 using namespace 
using GalaSoft.MvvmLight;

代码实现如下:

MainWindow.xaml

    <Grid>
        <StackPanel>
            <TextBox  FontSize="60" Text="{Binding Name, FallbackValue='Not Found'}"  />
            <TextBox  FontSize="60" Text="{Binding Name, FallbackValue='Not Found'}" />
            <TextBox  FontSize="60" Text="{Binding Name, FallbackValue='Not Found'}" />
            <Button Content="显示后台"  FontSize="30" Height="60" Width=" 200" HorizontalAlignment="Left" Click="Button_Click"/>
        </StackPanel>
    </Grid>

MainWindow.cs

      public partial class MainWindow : Window
    {
        private MainViewModel txt;

        public MainWindow()
        {
            InitializeComponent();
            txt = new MainViewModel();

            this.DataContext = txt;

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(txt.Name.ToString());
        }
    }

MainView.cs
 

// ViewModelBase 基类
    class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
            Name = "hello!";
            Task.Run(async () =>
            {
                await Task.Delay(3000);
                Name = "time over";
            });
        }

        // 这个位置重写了 set 和 get , 主要时方便调用属性变更的函数。
        //之前是默认调用系统的 set get 方法
        // 为什么引入 name , 这里引入name 的原因是如果在 set 中使用 Name = value ;就会进入死循环导致栈溢出。
        private string name;
        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                //  属性变更
                RaisePropertyChanged();               
            }
        }
    }

除了绑定textBox之外，还可以绑定按钮的事件

这里面需要用到 一个 RelayCommand

使用之前需要引入命名空间：

using GalaSoft.MvvmLight.CommandWpf;

下面展示按钮绑定的程序：

MainWindow.xaml

    <Grid>
        <StackPanel>
            <TextBox  FontSize="60" Text="{Binding Name, FallbackValue='Not Found'}"  />
            <TextBox  FontSize="60" Text="{Binding Name, FallbackValue='Not Found'}" />
            <TextBox  FontSize="60" Text="{Binding Name, FallbackValue='Not Found'}" />
            <Button Content="按钮"  FontSize="30" Height="60" Width=" 200" HorizontalAlignment="Left" Command="{Binding SaveCommand}"/>
        </StackPanel>
    </Grid>

MainWindow.cs

      public partial class MainWindow : Window
    {
        private MainViewModel txt;

        public MainWindow()
        {
            InitializeComponent();
            txt = new MainViewModel();
            this.DataContext = txt;

        }

    }

MainViewModel.cs

 // ViewModelBase 基类
    class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
            Name = "hello!";
            SaveCommand = new RelayCommand(() =>
              {
                  Name = "clicked";
              });
            //Task.Run(async () =>
            //{
            //    await Task.Delay(3000);
            //});
        }

        // 这个位置重写了 set 和 get , 主要时方便调用属性变更的函数。
        //之前是默认调用系统的 set get 方法
        // 为什么引入 name , 这里引入name 的原因是如果在 set 中使用 Name = value ;就会进入死循环导致栈溢出。
        private string name;
        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                //  属性变更
                RaisePropertyChanged();               
            }
        }

        public RelayCommand SaveCommand {  get; private set; }


    }

这样就实现了前台界面与后天之间的解耦，这里按钮绑定的是 SaveCommand 函数