WPF引用CommunityToolkit.Mvvm实现属性变动双向绑定的简单例子

276 WPF 博客随笔 2023-02-13

WPF Community Toolkit Mvvm 例子

站长平时也做windows桌面软件的开发，主要是基于wpf进行开发也习惯了自己那套mvvm写法之前也写过相关例子链接如下

虽然内容不多也是站长琢磨了好久才理顺的开发套路，基于这套写法站长已经开发中使用了几年稳定性啥的都没啥好说的，自认为逻辑和写法上已经很简洁了没想到还有更好用的，。

今天，我想向大家介绍一种使用 CommunityToolkit.Mvvm 在 WPF 中实现属性变更双向绑定的简单例子。

微软很早就已经有了相关的类CommunityToolkit.Mvvm（老的版本叫MvvmLight停止维护了）实现，在wpf开发过程中提供更加舒适的敲代码过程，看了下调用方式，逻辑和站长自己写类似，但毕竟是微软自己家的实现的更加完美。

WPF 是一种基于 XAML 的 .NET 框架，它为我们提供了一种声明式方式来构建用户界面。而 Mvvm 是一种基于 XAML 平台的开发模式，其主要目标是在 View 和 Model 之间建立一种松耦合的关系，以实现更好的测试和代码重用。在 WPF 中，我们可以利用 Mvvm 模式使代码更加简洁和易于维护。

在 WPF 中，当 View 和 ViewModel 中的属性值发生变化时，我们希望它们能够相互通信并保持同步。这就是属性变动双向绑定。而 CommunityToolkit.Mvvm 可以帮助我们轻松地实现这一目标。

以下是一个简单的例子来说明如何使用 CommunityToolkit.Mvvm 来实现属性变动双向绑定：

在 Visual Studio 中创建一个新的 WPF 应用程序。

在 Package Manager Console 中运行以下命令以安装 CommunityToolkit.Mvvm 或者直接nuget直接安装

打开 MainWindow.xaml，将代码更改为以下内容：

<Window x:Class="WpfApp1.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:WpfApp1"
        xmlns:mvvm="clr-namespace:Microsoft.Toolkit.Mvvm.DependencyInjection;assembly=Microsoft.Toolkit.Mvvm"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <Slider Value="{Binding Value, Mode=TwoWay}" Width="200"/>
        <TextBlock Text="{Binding Value}"/>
    </StackPanel>
</Window>

该代码段中定义了一个包含一个 Slider 和一个 TextBlock 的 StackPanel。Slider 的 Value 属性绑定到了 ViewModel 中的 Value 属性，这意味着当用户拖动 Slider 条时，ViewModel 中的 Value 属性也会随之变化，反之亦然。TextBlock 的 Text 属性绑定到了 ViewModel 中的 Value 属性，因此当 Value 属性发生变化时，TextBlock 中的文本也会相应地更新。

打开 MainWindow.xaml.cs，将代码更改为以下内容：

using Microsoft.Toolkit.Mvvm.ComponentModel;

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

    public class MainWindowViewModel : ObservableRecipient
    {
        private double _value;

        public double Value
        {
            get => _value;
            set => SetProperty(ref _value, value);
        }
    }
}

该代码段中定义了一个 ViewModel，它继承自 ObservableRecipient 类。ObservableRecipient 类是 CommunityToolkit.Mvvm 中的一个基类，它实现了通知属性更改的机制。在 ViewModel 中，我们定义了一个名为 Value 的属性，用于在 View 和 ViewModel 之间进行属性双向绑定。同时，在 SetPropert() 方法中，我们使用了 SetProperty() 方法来通知 View 属性变化。

运行应用程序以查看结果。现在，已经成功地创建了一个简单的 WPF 应用程序，展示了使用 CommunityToolkit.Mvvm 实现属性变动双向绑定的方法。

在 WPF 页面中实现属性变动双向绑定非常简单。只需要使用 CommunityToolkit.Mvvm 中提供的 ObservableRecipient 类和 SetProperty() 方法就可以了。这有助于简化代码，提高可重用性，并使代码更加易于测试。希望这篇文章能够帮助学习在WPF 中实现双向绑定，并提高编程开发的效率。

转载请注明原链接: https://www.yuantk.com/weblog/e1e57086-3276-4386-86f7-afa800b9271d.html

WPF引用CommunityToolkit.Mvvm实现属性变动双向绑定的简单例子

热门推荐