当前位置：首页 > C# > 正文

掌握.NET MAUI数据绑定与MVVM（C#跨平台开发核心技巧）

主机测评网
C#
2025-12-11
664

在现代移动和桌面应用开发中，C# .NET MAUI 提供了一种统一的方式来构建跨平台应用程序。而要高效地开发这类应用，掌握 数据绑定 和 MVVM模式 是必不可少的技能。本教程将从零开始，手把手教你如何在 .NET MAUI 中实现数据绑定，并使用 MVVM 架构组织代码，即使是编程小白也能轻松上手！

什么是 MVVM 模式？

MVVM 是 Model-View-ViewModel 的缩写，是一种用于分离用户界面（UI）逻辑与业务逻辑的软件架构模式：

Model：代表你的数据和业务逻辑（例如用户信息、数据库操作等）。
View：即用户界面，由 XAML 文件定义。
ViewModel：作为 View 和 Model 之间的桥梁，负责处理 UI 交互逻辑并暴露可绑定的数据属性。

掌握.NET MAUI数据绑定与MVVM（C#跨平台开发核心技巧） C# .NET MAUI 数据绑定 MVVM模式跨平台开发第1张

为什么要在 .NET MAUI 中使用 MVVM？

使用 MVVM 模式可以带来以下好处：

提高代码可维护性和可测试性。
UI 与逻辑解耦，便于团队协作。
通过数据绑定自动同步 UI 与数据，减少手动更新控件的代码。

第一步：创建 .NET MAUI 项目

打开 Visual Studio 2022（确保已安装 .NET MAUI 工作负载），创建新项目 → 选择 ".NET MAUI App"，命名为 MyMauiApp。

第二步：创建 ViewModel

在项目根目录下新建一个文件夹 ViewModels，并在其中创建 MainViewModel.cs：

using System.ComponentModel;using System.Runtime.CompilerServices;namespace MyMauiApp.ViewModels;public class MainViewModel : INotifyPropertyChanged{    private string _message = "Hello, .NET MAUI!";    public string Message    {        get => _message;        set        {            _message = value;            OnPropertyChanged();        }    }    public event PropertyChangedEventHandler? PropertyChanged;    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)    {        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));    }}

注意：INotifyPropertyChanged 接口是实现数据绑定的关键。当 Message 属性值改变时，UI 会自动更新。

第三步：在 XAML 中设置数据绑定

打开 MainPage.xaml，修改如下：

<?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             xmlns:vm="clr-namespace:MyMauiApp.ViewModels"             x:Class="MyMauiApp.MainPage">    <ContentPage.BindingContext>        <vm:MainViewModel />    </ContentPage.BindingContext>    <VerticalStackLayout        Padding="30,50"        Spacing="25"        VerticalOptions="Center">        <Label             Text="{Binding Message}"            FontSize="24"            HorizontalOptions="Center" />        <Button             Text="更新消息"            Clicked="OnUpdateClicked"            HorizontalOptions="Center" />    </VerticalStackLayout></ContentPage>

第四步：处理按钮点击事件（可选）

虽然 MVVM 倾向于使用命令（Command）而非事件，但为了简单演示，我们先用事件处理：

在 MainPage.xaml.cs 中添加：

private void OnUpdateClicked(object sender, EventArgs e){    var viewModel = BindingContext as ViewModels.MainViewModel;    viewModel.Message = $"时间：{DateTime.Now:HH:mm:ss}";}

运行应用，点击“更新消息”按钮，你会发现 Label 内容自动更新！这就是 数据绑定 的魔力。