WinUI3（TemplateStudio）：如何在ViewModel中引用控件？

问题情况 #

用TemplateStudio构建的项目，在Views>TestPage.xaml中定义了名为MessageInput的TextBox，TestPage.xaml.cs已绑定TestViewModel，但在ViewModels>TestViewModel.cs中直接通过MessageInput.Text获取内容时，触发错误CS0103：名称‘MessageInput’在当前上下文中不存在。

相关代码：

TestPage.xaml #

<Page
    x:Class="FluentQQ.Views.TestPage"
    ...>

    <Grid>
        <TextBox x:Name="MessageInput" />
    </Grid>
</Page>

TestPage.xaml.cs #

using FluentQQ.ViewModels;
using Microsoft.UI.Xaml.Controls;

namespace FluentQQ.Views;

public sealed partial class TestPage : Page
{
    public TestViewModel ViewModel
    {
        get;
    }

    public TestPage()
    {
        ViewModel = App.GetService<TestViewModel>();
        InitializeComponent();
    }
}

ViewModel报错代码 #

MessageInput.Text

错误信息 #

CS0103  The name 'MessageInput' does not exist in the current context

问题原因 #

这是MVVM模式的核心原则导致的：View（界面）和ViewModel（数据逻辑层）是完全分离的，ViewModel不能直接访问View中的控件实例。MessageInput是TestPage（View层）的控件，属于UI层面的对象，ViewModel没有权限直接调用它。

正确解决方法（遵循MVVM的绑定方式） #

TemplateStudio默认使用CommunityToolkit.Mvvm实现MVVM，按以下步骤修改：

1. 在ViewModel中添加绑定属性
   打开TestViewModel.cs，添加一个用来存储输入内容的属性，利用ObservableProperty特性自动实现数据通知：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace FluentQQ.ViewModels;

public partial class TestViewModel : ObservableObject
{
    // 绑定输入框内容的属性
    [ObservableProperty]
    private string _messageContent = string.Empty;

    // 示例：处理输入内容的命令（可选，根据你的需求添加）
    [RelayCommand]
    private void HandleInput()
    {
        // 直接使用MessageContent获取输入框的内容
        var inputText = MessageContent;
        // 这里写你的业务逻辑，比如发送消息、验证内容等
    }
}

2. 修改XAML，绑定TextBox到ViewModel属性
   打开TestPage.xaml，给TextBox的Text属性添加双向绑定，确保输入框的内容能同步到ViewModel：

<Page
    x:Class="FluentQQ.Views.TestPage"
    ...>

    <Grid>
        <TextBox x:Name="MessageInput" Text="{x:Bind ViewModel.MessageContent, Mode=TwoWay}" />
        <!-- 如果需要触发命令，可以添加按钮绑定HandleInput命令 -->
        <Button Content="提交" Command="{x:Bind ViewModel.HandleInputCommand}" />
    </Grid>
</Page>

3. 在ViewModel中使用绑定属性获取内容
   之后你就可以在ViewModel的任何逻辑中直接使用MessageContent属性来获取输入框的内容，不需要再访问MessageInput控件。

额外说明 #

MVVM模式的核心是数据驱动UI，而不是直接操作UI控件。这种方式的好处是：

• 代码解耦，ViewModel可以脱离View单独测试
• 更易维护，UI和逻辑修改互不影响
• 符合TemplateStudio生成项目的设计规范

内容的提问来源于stack exchange，提问作者unsealed1051