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

MVVM
473
WPF
CommunityToolkitMvvm
双向绑定
属性变动

站长平时也做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编程开发的效率。

WPF实现窗体接收鼠标拖拽的文件例子
一次使用AutoResetEvent的经历:在Task并发环境下导致UI线程卡死 内存一直上涨
WPF桌面程序开发怎么实现鼠标窗体穿透点击桌面
在.NET CORE\.NET 5 下WPF如何实现托盘图标功能
WPF中某一个控件绑定其他指定UI控件的属性值
.NET 5 WPF 如何开启控制台界面用于实时输出日志
.NET程序系统托盘运行出现多个同样的托盘图标的解决方法
Windows桌面开发优秀的WPF界面开源UI组件 MahApps.Metro
WPF 设置程序不允许同一类程序多开进程
WPF使用popup控件实现弹出式提示
WPF文本框控件RichTextBox实现MVVM绑定数据源
WPF去除标题栏 实现窗体的缩放及拖动效果
暂无相关内容...
C#+WPF实现模仿实现的网易云音乐客户端源码
WPF实现的自定义工作大日历排班Calendar控件模板的例子源码
wpf实现大屏幕弹幕播放效果特效源码新手可参考下.rar
[人脸检测]基于C#OpenCvSharp+haarcascade人脸、人眼模型实现人脸检测源码
WPF实现读取USB摄像头实时视频展示以及导出实时截图的C#源码例子
免责声明 部分转载分享内容若侵犯您的权益,还请 邮件联系 侵删