XAML WinUI3:如何引用视图模型中的控件?

8oomwypt  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(99)

我正在使用TemplateStudio构建我的项目
视图> TestPage.xaml

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

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

Views > 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();
    }
}

然后,我尝试获取TextBox“MessageInput”的内容
因此,在ViewModels > TestViewModel.cs中,我使用

MessageInput.Text

但它不工作

CS0103  The name 'MessageInput' does not exist in the current context
  • 我知道这个问题很简单,但请原谅我只是个初学者 *
bakd9h0s

bakd9h0s1#

如错误信息所示,MessageInput控件在**TestPageViewModel* 中不存在。对于MVVM,通常应该使用绑定从视图中获取数据。
为了确保我们在同一页上,在这种情况下:

  • TestPage.xaml是视图
  • TestPage.xaml.cs是代码隐藏
  • TestPageViewModel.cs是ViewModel

1.安装CommunityToolkit.Mvvm nuget包。如果您使用MVVM模式,这将使您的工作更轻松。
1.在您的ViewModel中,TestPageViewModel

// This class needs to be "partial" 
// for the "CommunityToolkit.Mvvm" source generators.
public partial class TestPageViewModel : ObservableObject
{
    // The source generators will create 
    // an UI interactable "SomeText" property for you.
    [ObservableProperty]
    private string someText;
}

1.在代码隐藏中,TestPage.xaml.cs

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

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

1.然后在您的视图中,TestPage.xaml

<TextBox
    x:Name="MessageInput"
    Text="{x:Bind ViewModel.SomeText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

这就是全部。SomeText将在您每次更改TextBox中的文本时更新。
顺便说一下,您可以直接从代码隐藏访问TextBox。只要确保使用x:Name来命名它。

TestPage.xaml.cs

MessageInput.Text = "some text";

相关问题