介绍

MVVM Light是WPF的一个mvvm框架,目前已经停止维护,适用于Net framework版本下的WPF程序,如果要在net5或者更新的net版本使用,可以使用新的**CommunityToolkit.Mvvm**包,它是 .NET 社区工具包的一部分,用法和MvvmLight类似。

项目地址:https://github.com/lbugnion/mvvmlight

MvvmLight安装和准备

在Nuget中搜索MvvmLight进行安装

在这里插入图片描述

安装完成后,在项目目录里自动生成了ViewModel文件夹,生成两个文件,一个MainViewModel.cs可以作为MainWindow的viewModel,另一个ViewModelLocator.cs作为ViewModel定位器,通过Ioc容器,在改文件中获取ViewModel的实例。

在这里插入图片描述

ViewModelLocator.cs中有报错,只需要重新引用using CommonServiceLocator;,删除using Microsoft.Practices.ServiceLocation;就可以了。

在这里插入图片描述
修改之后:
在这里插入图片描述

App.xaml中增加了一个Locator,可以作为静态资源使用,用于后面绑定

    <vm:ViewModelLocator
                xmlns:vm="clr-namespace:WpfMvvmLightExample.ViewModel"
                x:Key="Locator"
                d:IsDataSource="True" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGQzBqxx-1679585878912)(https://secure2.wostatic.cn/static/gCMK56cP4peWpDumy9Az3u/image.png?auth_key=1679585438-vKaKnNSngqPmZn49LU1oMZ-0-a6a800cf02d8f935816dbdc1e95bfb85)]

框架常用的类介绍

ObservableObject类,继承INotifyPropertyChanged接口,实现了基本的属性推送功能,如果有需要推送的Model类可以继承于该类

ViewModelBase类,ViewModel基类,继承自ObservableObject类,针对ViewModel对一些方法进行封装优化。

RelayCommandRelayCommand<>类,该框架中常用的命令类,用于在ViewModel实现命令

IMessengerMessenger,消息交互类,类似事件集合器用于ViewModelViewViewModel之间的消息交互。

SimpleIoc类,是该框架中实现的简单Ioc容器,主要在ViewModelLocator中用于ViewModel的注册和实例化

使用

View和ViewModel绑定

要将MainViewModelMainWindow绑定起来,只需要在MainWindow上增加绑定DataContext="{Binding Source={StaticResource Locator},Path=Main}",如下所示

在这里插入图片描述

绑定测试

给界面增加一些控件和ViewModel增加属性用于绑定测试

MainWindow:
 <Grid>
        <TextBlock
            Margin="55,29,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Text="姓名"
            TextWrapping="Wrap" />
        <TextBox
            Width="120"
            Margin="95,29,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Text="{Binding Name}"
            TextWrapping="Wrap" />

    </Grid>
ViewModel:
public class MainViewModel : ViewModelBase
    {
        public string Name { get; set; }


        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            Name = "lisi";
            
        }
    }
效果:

在这里插入图片描述

新ViewModel绑定

如果要绑定新的页面和ViewModel,在DataContext="{Binding Source={StaticResource Locator},Path=Main}"中Path后面出现新的ViewModel对象,则需要在ViewModelLocator.cs文件中注册新的ViewModel,并添加新的属性

//注册
 SimpleIoc.Default.Register<AboutWindowViewModel>();
 
 //ViewModel 属性
 public AboutWindowViewModel About
        {
            get
            {
                return ServiceLocator.Current.GetInstance<AboutWindowViewModel>();
            }
        }
 

在这里插入图片描述

后台数据绑定推送

使用基类中的方式进行属性推送

方式一:

使用: RaisePropertyChanged实现了基本INotifyPropertyChanged接口基本的属性变化推送。该方法位于ObservableObject类中

在这里插入图片描述

    private string _name;

    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            _name = value;
            //方式一:
            RaisePropertyChanged();
        }
    }

方式二:

使用Set<>()方法进行推送,该方法,会先对新的值value进行判断,如果跟原来值相同,则不会更新,如果不同则更新并推送。该方法位于ViewModelBase类中

在这里插入图片描述

测试代码:

  public class MainViewModel : ViewModelBase
    {
        private string _name;
        public string Name
        {
            get
            {
                return _name;
            }
            set
            {
                //方式一:
                //_name = value;
                //RaisePropertyChanged();
                //方式二:
                Set(ref _name, value);
            }
        }
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            Name = "lisi";
            ThreadPool.QueueUserWorkItem(ChangeName);
        }
        void ChangeName(object o)
        {
            Thread.Sleep(10000);
            Name = "改名了";
        }

    }

效果:

动态更新前台的数据

在这里插入图片描述

命令绑定

主要使用RelayCommandRelayCommand<>类实现命令,并绑定,即可实现。

如下实现一个命令:

 public ICommand ChangeNameCmd
  {
      get
      {
          return new RelayCommand<object>(o =>
          {
              Name = "命令改名";
          });
      }
  }

增加一个按钮,使用Command绑定命令,

  <Button
            Margin="243,29,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Command="{Binding ChangeNameCmd}"
            Content="修改" Width="51" />

运行效果:

点击之后即可改变属性
在这里插入图片描述

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐