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

487
补充展位 Pages_Weblog_Get#0
文章摘要
此内容由人工摘要内容,并由AI根据文章内容进行润色
暂无内容

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

数据模型绑定例子

传送门 : WPF MVVM双向通信 数据模型绑定 简单实例

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

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

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

微软很早就已经有了相关的类CommunityToolkit.Mvvm(老的版本叫MvvmLight停止维护了)实现,在wpf开发过程中提供更加舒适的敲代码过程,看了下调用代码实现的逻辑和站长自己的思路差不多,但更加简洁,毕竟是微软自己家实现的自然更加完美。

WPF的Mvvm开发框架

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

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

参照官方文档写的例子

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

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

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

  3. 打开 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 中的文本也会相应地更新。

  1. 再打开 MainWindow.xaml.cs,将代码更改为以下内容:
using Microsoft.Toolkit.Mvvm.ComponentModel;

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

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

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

  1. 运行应用程序以查看结果。

到这一步,已经是成功地创建了一个简单的 WPF MVVM应用程序,初步使用了 CommunityToolkit.Mvvm 实现属性变动双向绑定的方法,前端后台各自修改绑定值后 就自动同步给对方,不需要再单独写方法进行手动绑定。

理解与使用MVVM模式

在 WPF 页面中实现属性变动双向绑定非常简单。只需要使用 CommunityToolkit.Mvvm 中提供的 ObservableObject类和 SetProperty() 方法就可以了。这有助于简化代码,提高可重用性,并使代码更加易于测试。 在WPF 中实现双向绑定,可以极大的提升WPF编程开发的效率。

补充展位
Pages_Weblog_Get#e1e57086-3276-4386-86f7-afa800b9271d
补充展位 Pages_Weblog_Get#1
补充展位 Pages_Weblog_Get#2
专题推荐
暂无内容
补充展位 Pages_Weblog_Get#3