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

我无法通过用户控件绑定到我的应用程序中.它是带有模板10的UWP应用.

我在主页中使用的绑定与在用户控件中使用的绑定相同,但是用户控件中的字段不会对更改做出反应.我已经阅读了几篇文章,告诉我如何设置用户控件的数据内容,但是我无法使用其中的任何内容.

我的代码如下：

Mainpage.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>

MainPageViewModel.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>

解决方法:

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

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

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

不用担心,我们可以解决此问题.

用户控件的DataContext应该自动设置为其父级的DataContext.

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

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

 <MyUserControls:MyUserControl />

在这种情况下,MyUsercontrol使用MainPageViewModel作为DataContext.但是,这可能行不通,这不是最终的解决方案.

您需要做的是转到UserControl的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)); 

    }

现在我们有了依赖项属性,可以在UserControl的Xaml中绑定到它了.

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

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

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

因此,使用上面的代码,我们正在完成以下工作：

>在MainPage.xaml中设置了DataContext,并且MainPage.xaml的所有子级都共享此DataContext
>我们在UserControl中创建了一个依赖项属性,可以将其绑定到
>我们将UserControl的XAML绑定到依赖项属性
>我们将视图模型的text属性绑定到我们的新用户控件依赖项属性.

标签：template10,uwp,data-binding,xaml,c
来源： https://codeday.me/bug/20191118/2028188.html