使用模板 10 的 UWP 用户控件中的数据绑定

本文关键字：用户 控件 数据绑定 UWP | 更新日期: 2023-09-27 17:55:51

>我无法使用用户控件在我的应用中进行绑定。它是模板为 10 的 UWP 应用。

我在主页中使用与在用户控件中相同的绑定，但用户控件中的字段对更改没有反应。我已经阅读了几篇文章，这些文章告诉我如何设置用户控件的数据内容，但我无法让其中任何一篇文章工作。

我的代码如下：

主页.xaml

    Page x:Class="UserControlTest.Views.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:controls="using:Template10.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:UserControlTest.Views"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:vm="using:UserControlTest.ViewModels" mc:Ignorable="d">
    <Page.DataContext>
        <vm:MainPageViewModel x:Name="ViewModel" />
    </Page.DataContext>
    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <controls:PageHeader x:Name="pageHeader" Content="Main Page"
                             RelativePanel.AlignLeftWithPanel="True"
                             RelativePanel.AlignRightWithPanel="True"
                             RelativePanel.AlignTopWithPanel="True" />
        <TextBlock x:Name="mainTextBlock" Margin="16,16,16,16"
                   RelativePanel.AlignLeftWithPanel="True"
                   RelativePanel.Below="pageHeader" 
                   Text="{Binding TextToShow}" />
        <local:ShowText Margin="16,16,16,16"
            RelativePanel.Below="pageHeader"
            RelativePanel.AlignRightWithPanel="True"/>
        <Button Content="Change Text" Margin="16,16,16,16" 
                Command="{x:Bind ViewModel.ChangeText }" 
                RelativePanel.AlignLeftWithPanel="True" 
                RelativePanel.Below="mainTextBlock"/>
    </RelativePanel>
</Page>

主页视图模型.cs

    using System.Collections.Generic;
    using System;
    using System.Linq;
    using System.Threading.Tasks;
    using Windows.Security.Cryptography.Core;
    using Template10.Mvvm;
    using Template10.Services.NavigationService;
    using Windows.UI.Xaml.Navigation;
    namespace UserControlTest.ViewModels
    {
    public class MainPageViewModel : ViewModelBase
    {
        private string _textToShow = "Initial text";
        public string TextToShow
        {
            get { return _textToShow; }
            set { Set(ref _textToShow, value); }
        }
        DelegateCommand _changeText;
        public DelegateCommand ChangeText
            => _changeText ?? (_changeText = new DelegateCommand(ExecuteChangeTest, CanChangeText));
        private void ExecuteChangeTest()
        {
            TextToShow = "Changed text";
        }
        private bool CanChangeText()
        {
            return true;
        }
    }
}

ShowText.xaml

   <UserControl
    x:Class="UserControlTest.Views.ShowText"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UserControlTest.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:UserControlTest.ViewModels" mc:Ignorable="d">
    <UserControl.DataContext>
        <vm:MainPageViewModel x:Name="ViewModel" />
    </UserControl.DataContext>
    <Grid>
        <TextBlock x:Name="UserControlTextBlock"  
                   Text="{Binding TextToShow}" />
    </Grid>
</UserControl>

使用模板 10 的 UWP 用户控件中的数据绑定

乍一看，问题是您的UserControl和MainPage正在使用两个不同的ViewModel实例。创建静态资源时 

        <vm:MainPageViewModel x:Name="ViewModel" />

您正在创建 MainPageViewModel 的实例。这意味着，当您从 MainPageViewModel 的 MainPage 实例中设置值时，它不会传播到您的 UserControl 创建的 MainPageViewModel 的第二个实例。

不过不用担心，我们可以解决这个问题。

用户控件的 DataContext 应自动设置为其父控件的 DataContext。

因此，让我们假设您在 MainPage.xaml 中使用您的 UserControl

 <Page.DataContext>
    <vm:MainPageViewModel x:Name="ViewModel" />
 </Page.DataContext>
 <MyUserControls:MyUserControl />

在本例中，MyUsercontrol 使用 MainPageViewModel 作为 DataContext。但是，这可能行不通，这不是一个完成的解决方案。

您需要做的是转到用户控件的 Xaml.CS并创建可以绑定到的依赖项属性。

 public class MyUserControl : Control{
    public string MyControlsText
    {
        get { return (string)GetValue(MyControlsTextProperty); }
        set { SetValue(MyControlsTextProperty, value); }
    }
    public static readonly DependencyProperty MyControlsTextProperty = 
             DependencyProperty.Register("MyControlsText", typeof(string), 
                typeof(MyUserControl), new PropertyMetadata(String.Empty)); 
    }

现在我们有了依赖属性，在用户控件的 Xaml 中，我们可以绑定到它。 

<Grid>
    <TextBlock x:Name="UserControlTextBlock"  
               Text="{Binding MyControlsText}" />
</Grid>

最后，在我们的 MainPage.Xaml 中，我们可以完成绑定

 <MyUserControls:MyUserControl MyControlsText="{Binding TextToShow}" />

因此，使用上面的代码，这就是我们正在完成的任务：

    DataContext 在 MainPage.xaml
  • 中设置，MainPage.xaml 的所有子级共享此 DataContext
  • 我们在用户控件中创建了一个可以绑定到的依赖项属性
  • 我们将用户控件的 XAML 绑定到依赖项属性
  • 我们将视图模型的文本属性绑定到新的用户控件依赖项属性。
相关文章：