2016-09-23 32 views
0

我目前正在使用Windows通用應用程序。一般來說,我對XAML還是比較陌生的,但有一些經驗。通用應用程序XAML綁定不能在UserControl時在另一個用戶控件中工作

我遇到的問題是圍繞UserControl內部的綁定。我環顧四周,無法找到我的具體問題的答案。

我有一個鏈接到一個視圖模型一個XAML頁面,這一切工作正常。然後在那個頁面上,我使用一個UserControl,它基本上只是一個帶有包含一些內容的標題的面板。在該面板的內容中,我有另一個基本上由Label和TextBox組成的UserControl。

當我從我的ViewModel到的ContentPanel用戶控件綁定的一切事物工精細,它拿起我的ViewModel背景下,正確地結合。

但是,當我嘗試綁定到包含在ContentPanel中的LabelledTextbox UserControl時,綁定失敗,因爲它只是查找ContentPanel上ViewModel上的屬性。

請參見下面的代碼我有

Page.xaml

<!--Page.xaml-->      
<cc:ContentPanel PanelHeading="LEFT FOOT: Measurements" PanelHeadingBackground="{StaticResource OPCare.PanelHeader}"> 
        <StackPanel> 
         <cc:LabelledTextbox LabelText="Malleoli Width" Text="test" /> 
         <cc:LabelledTextbox LabelText="Met Head Width" /> 
        </StackPanel> 
       </cc:ContentPanel> 

ContentPanel.xaml

<!--ContentPanel UserControl--> 
<UserControl 
    x:Class="OrthoticTabletApp.Controls.ContentPanel" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:OrthoticTabletApp.Controls" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="400" 
    x:Name="Parent"> 

    <Grid DataContext="{Binding ElementName=Parent}"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Grid Padding="10" Grid.Column="0" Grid.Row="0" Height="50" Background="{Binding Path=PanelHeadingBackground}"> 
      <TextBlock Height="30" LineHeight="30" Text="{Binding Path=PanelHeading}" /> 
     </Grid> 

     <Grid Padding="10" Grid.Column="0" Grid.Row="1" Background="White"> 
      <ContentPresenter Content="{Binding Path=PanelBody}" /> 
     </Grid> 

    </Grid> 
</UserControl> 

ContentPanel.xaml.cs

[ContentProperty(Name = "PanelBody")] 

public sealed partial class ContentPanel : UserControl 
{ 

    public static readonly DependencyProperty PanelHeadingProperty = DependencyProperty.Register("PanelHeading", typeof(string), typeof(ContentPanel), new PropertyMetadata("")); 

    public string PanelHeading 
    { 
     get 
     { 
      return (string)GetValue(PanelHeadingProperty); 
     } 
     set 
     { 
      SetValue(PanelHeadingProperty, value); 
     } 
    } 

    public static readonly DependencyProperty PanelBodyProperty = DependencyProperty.Register("PanelBody", typeof(object), typeof(ContentPanel), new PropertyMetadata(null)); 

    public object PanelBody 
    { 
     get 
     { 
      return (object)GetValue(PanelBodyProperty); 
     } 
     set 
     { 
      SetValue(PanelBodyProperty, value); 
     } 
    } 

    public Brush PanelHeadingBackground 
    { 
     get { return (Brush)GetValue(PanelHeadingBackgroundProperty); } 
     set { SetValue(PanelHeadingBackgroundProperty, value); } 
    } 

    public static readonly DependencyProperty PanelHeadingBackgroundProperty = 
     DependencyProperty.Register("PanelHeadingBackground", typeof(Brush), typeof(ContentPanel), new PropertyMetadata(null)); 

    public ContentPanel() 
    { 
     this.InitializeComponent(); 
    } 
} 

LabelledTextbox.xaml

<UserControl 
    x:Class="OrthoticTabletApp.Controls.LabelledTextbox" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:OrthoticTabletApp.Controls" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="50" 
    d:DesignWidth="400" 
    x:Name="Parent"> 

    <Grid DataContext="{Binding ElementName=Parent}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="300" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Grid Grid.Column="0" Padding="10"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="15" /> 
      </Grid.ColumnDefinitions> 

      <TextBlock Grid.Column="0" Text="{Binding Path=LabelText}" /> 

     </Grid> 

     <Grid Grid.Column="1" Padding="10"> 
      <TextBox Text="{Binding Path=Text}" /> 
     </Grid> 
    </Grid> 
</UserControl> 

LabelledTextbox.xaml.cs

public sealed partial class LabelledTextbox : UserControl 
    { 
     public string LabelText 
     { 
      get { return (string)GetValue(LabelTextProperty); } 
      set { SetValue(LabelTextProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for LabelText. This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty LabelTextProperty = 
      DependencyProperty.Register("LabelText", typeof(string), typeof(LabelledTextbox), new PropertyMetadata(null)); 

     public string Text 
     { 
      get { return (string)GetValue(TextProperty); } 
      set { SetValue(TextProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty TextProperty = 
      DependencyProperty.Register("Text", typeof(string), typeof(LabelledTextbox), new PropertyMetadata(null)); 

     public LabelledTextbox() 
     { 
      this.InitializeComponent(); 
     } 
    } 
+0

'' - 這是您將當前用戶控件設置爲DataContext的位置,這就是爲什麼它在'UserControl'中查找綁定屬性的原因。您在LabelledTextBox.xaml和ContentPanel.xaml中都有同樣的問題。如果你刪除'DataContext =「{Binding ElementName = Parent}」',那麼它應該工作。另外,你在哪裏爲Page.xaml設置'DataContext'? – sthotakura

回答

0

然而,當我試圖綁定到包含withing的的ContentPanel的LabelledTextbox用戶控件綁定失敗,因爲它僅僅是尋找屬性,而是在ContentPanel的ViewModel上。

如果我理解正確的,你做了什麼,你的ContentPanel的一些屬性綁定到在頁面視圖模型的數據模型,您LabelledTextbox的屬性綁定到其他視圖模型的數據模型?

如果是這樣,你可以爲StackPanel這是ContentPanel內,就比如像這樣指定DataContextLabelledTextbox

<cc:ContentPanel PanelHeading="{x:Bind Heading}" PanelHeadingBackground="Azure"> 
    <StackPanel> 
     <StackPanel.DataContext> 
      <local:LabelledTextboxViewModel x:Name="VM" /> 
     </StackPanel.DataContext> 
     <cc:LabelledTextbox LabelText="{x:Bind VM.Lable1}" Text="test" /> 
     <cc:LabelledTextbox LabelText="{x:Bind VM.Lable2}" /> 
    </StackPanel> 
</local:ContentPanel> 

在你的頁面的視圖模型,可以使數據模型ContentPanel和初始化這樣的數據,例如:

public BlankPage3ViewModel() 
{ 
    Heading = "LEFT FOOT: Measurements"; 
} 

public string Heading { get; set; } 

在LabelledTextboxViewModel例如,你可以像這樣的代碼:

public class LabelledTextboxViewModel 
{ 
    public LabelledTextboxViewModel() 
    { 
     Lable1 = "Malleoli Width"; 
     Lable2 = "Met Head Width"; 
    } 

    public string Lable1 { get; set; } 
    public string Lable2 { get; set; } 
} 

通常,當我們遵循MVVM模式來開發一個項目,數據模型不應該被包含在視圖模型裏面,我在這裏只是爲了清晰和易於交付,關鍵的一點是,你可以爲同一頁面中的不同控件指定不同的DataContext

相關問題