UserControlsを介したWPFデータバインディング

Question

私はUserControlsとモデルを見ることができます上記のメインウィンドウのDataContextからプロパティをバインドしたいと思います。そこで、Model.ID.Label1とModel.ID.Label2プロパティをmain_id/card_1/topとmain_id/card_1/bottomコントロールにバインドしたいと思います。私はそれがはっきりしていることを望む ref_lblラベルを有効にすると、 "lbl1"と表示され、カード2はまだハードコードされたテキストで動作していますが、card_1は空白になります。 card_1のバインディングを修正するにはどうすればよいですか？

ID UserControlがあり、別のUserControlが含まれています。

XAML：

<UserControl x:Class="stack.ID" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:Controls="clr-namespace:stack.Controls" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="1*" /> 
     <RowDefinition Height="1*" /> 
    </Grid.RowDefinitions> 
    <Label Name="ref_lbl" Grid.Row="0" Content="{Binding Label1}" Visibility="Collapsed" /> 
    <Controls:Card x:Name="card_1" Grid.Row="0" TopLabel="{Binding Label1}" BottomLabel="{Binding Label2}" /> 
    <Controls:Card x:Name="card_2" Grid.Row="1" TopLabel="Text 1" BottomLabel="Text 2" /> 
</Grid> 

コードの後ろ：デフォルトでは、自動ではここ

を生成カードユーザーコントロールです。

XAML：背後に

<UserControl x:Class="stack.Controls.Card" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300" DataContext="{Binding RelativeSource={RelativeSource Self}}"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="1*" /> 
     <RowDefinition Height="1*" /> 
    </Grid.RowDefinitions> 
    <Label Grid.Row="0" FontSize="20" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding TopLabel}" /> 
    <Label Grid.Row="1" FontSize="20" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding BottomLabel}" /> 
</Grid> 

コード：

namespace stack.Controls 
{ 
    public partial class Card : UserControl 
    { 
     public static readonly DependencyProperty TopLabelProperty = DependencyProperty.Register("TopLabel", typeof(string), typeof(Card), new PropertyMetadata(default(string))); 
     public static readonly DependencyProperty BottomLabelProperty = DependencyProperty.Register("BottomLabel", typeof(string), typeof(Card), new PropertyMetadata(default(string))); 
     public Card() 
     { 
      InitializeComponent(); 
     } 
     public string TopLabel 
     { 
      get 
      { 
       return (string)GetValue(TopLabelProperty); 
      } 
      set 
      { 
       SetValue(TopLabelProperty, value); 
      } 
     } 
     public string BottomLabel 
     { 
      get 
      { 
       return (string)GetValue(BottomLabelProperty); 
      } 
      set 
      { 
       SetValue(BottomLabelProperty, value); 
      } 
     } 
    } 
} 

そして、ここが私のメインウィンドウです。

XAML：背後に

<Window x:Class="stack.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:stack" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.DataContext> 
    <local:Model /> 
</Window.DataContext> 
<Grid> 
    <local:ID x:Name="main_id" DataContext="{Binding ID}" /> 
</Grid> 

コード：デフォルトでは、自動

を生成し、また、私は2つのモデルがあります。

namespace stack 
{ 
    public class IDModel 
    { 
     private string label1 = "lbl1"; 
     private string label2 = "lbl2"; 
     public string Label1 
     { 
      get 
      { 
       return label1; 
      } 
      set 
      { 
       label1 = value; 
      } 
     } 
     public string Label2 
     { 
      get 
      { 
       return label2; 
      } 
      set 
      { 
       label2 = value; 
      } 
     } 
    } 
    public class Model 
    { 
     private IDModel id = new IDModel(); 
     public IDModel ID 
     { 
      get 
      { 
       return id; 
      } 
      set 
      { 
       id = value; 
      } 
     } 
    } 
} 

Answer 1

CardのXAMLから

DataContext="{Binding RelativeSource={RelativeSource Self}}" 

を削除します。

これは、代わりにこのようなCardのXAMLでContentバインディング書くあなたは

<Controls:Card ... TopLabel="{Binding Label1}" /> 

を記述する際に必要な、親IDコントロールからのDataContextを継承しないように：

<Label ... Content="{Binding TopLabel, 
    RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" />