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

MVVM
454
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 实现抽奖功能的全屏弹幕滚动效果
WPF使用popup控件实现弹出式提示
WPF MVVM双向通信 数据模型绑定 简单实例
WPF开发样式文件的四种引用方式
.NET程序系统托盘运行出现多个同样的托盘图标的解决方法
Windows桌面开发优秀的WPF界面开源UI组件 MahApps.Metro
wpf调用文件目录打开目录选择对话框
关于WPF中Frame使用新Page切换内存上涨问题
wpf、winform最大化被任务栏遮挡的解决办法
 WPF Rectangle实现 虚线边框矩形 超简单
.NET环境下System.Drawing.Color对应的颜色值RGB对照表
WPF DataGrid不同数据源如何动态生成不同字段名的表格
暂无相关内容...
WPF实现读取USB摄像头实时视频展示以及导出实时截图的C#源码例子
[人脸检测]基于C#OpenCvSharp+haarcascade人脸、人眼模型实现人脸检测源码
C#+WPF实现模仿实现的网易云音乐客户端源码
wpf实现大屏幕弹幕播放效果特效源码新手可参考下.rar
WPF实现的自定义工作大日历排班Calendar控件模板的例子源码
免责声明 部分转载分享内容若侵犯您的权益,还请 邮件联系 侵删