使用模板的UWP用戶控件中的數據綁定10

Question

我無法使用用戶控件綁定到我的應用中。這是一個帶有模板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> 

Answer 1

乍一看問題你的UserCo ntrol和您的MainPage使用兩個不同的ViewModel實例。當您創建靜態資源時

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

您正在創建MainPageViewModel的實例。這意味着當您從MainPageViewModel的MainPage實例中設置值時，它不會傳播到您的UserControl創建的第二個MainPageViewModel實例。

不用擔心，我們可以解決這個問題。

用戶控件的DataContext應自動設置爲其父級的DataContext。

讓我們承擔您使用用戶控件在MainPage.xaml中

<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}" /> 

所以在這裏，上面的代碼就是我們完成：

• DataContext的是在設定MainPage.xaml和MainPage的所有子項。XAML分享這個DataContext的
• 我們創造了我們的用戶控件的依賴屬性，我們可以綁定到
• 我們約束用戶控件的XAML我們依賴屬性
• 我們我們認爲模型的文本屬性綁定到我們的新用戶控件的依賴屬性。