Silverlight의 TreeView 컨트롤을 기반으로 마스터/세부 정보보기 만들기

Question

다음과 같은 속성을 가진 TreeNode 클래스가 있습니다.

 public string Name { get; set; } 
public string Description { get; set; } 
public bool AllowMultiples { get; set; } 
private ObservableCollection<TreeNode> _childNodes = new ObservableCollection<TreeNode>(); 

내 UI에서 왼쪽 패널에 트리를 표시하고 오른쪽에 선택한 항목 세부 정보를 표시하려고합니다.

내 XAML은 다음과 같습니다.

<UserControl.Resources> 
    <win:HierarchicalDataTemplate x:Key="ChildTemplate" ItemsSource="{Binding ChildNodes}"> 
     <TextBlock FontStyle="Italic" Text="{Binding Path=Name}" /> 
    </win:HierarchicalDataTemplate>   
    <win:HierarchicalDataTemplate x:Key="NameTemplate" 
    ItemsSource="{Binding Path=ChildNodes}" 
    ItemTemplate="{StaticResource ChildTemplate}"> 
     <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" /> 
    </win:HierarchicalDataTemplate>   
</UserControl.Resources> 
    <Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="20"></RowDefinition> 
     <RowDefinition Height="*"></RowDefinition> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"></ColumnDefinition> 
     <ColumnDefinition Width="*"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <TextBlock Text="Document Hierarchy" Margin="0,0,43,0" FontSize="13" /> 
    <toolkit:TreeViewDragDropTarget Grid.Row="1" Grid.Column="0" BorderThickness="-1"> 
     <controls:TreeView BorderThickness="0" ItemTemplate="{StaticResource ChildTemplate}" x:Name="treeView" ItemsSource="{Binding}">     
     </controls:TreeView> 
    </toolkit:TreeViewDragDropTarget> 
    <TextBlock Text="Properties" FontSize="11" Grid.Column="1" Grid.Row="0" /> 
    <Grid Grid.Row="1" Grid.Column="1"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" ></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition>     
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <TextBlock x:Name="AlloMultPropLabel" Text="Allow Multiple" Grid.Column="0" Grid.Row="0"></TextBlock> 
     <RadioButton x:Name="AllowMulti" GroupName="GrpAllowMulti" Content="True" Grid.Column="1" Grid.Row="0"/> 
     <RadioButton x:Name="AllowMulti2" GroupName="GrpAllowMulti" Content="False" Grid.Column="2" Grid.Row="0" IsChecked="True" /> 
     <TextBlock x:Name="DescPropLabel" Text="Description" HorizontalAlignment="Left" Width="74" Grid.Row="2" ></TextBlock> 
     <TextBox x:Name="DescProp" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Description}" />   
    </Grid> 

http://www.silverlight.net/learn/quickstarts/bindingtocontrols/을 내 참조로 사용 다음과 같이 LayoutRoot.DataContext를 CollectionViewSource로 설정했습니다.

public ObservableCollection<TreeNode> itemsSource = new ObservableCollection<TreeNode>() 
    { 
     new TreeNode("Root", "ths is test"), 
     new TreeNode("Secondary","Second node"), 
}; 


    public MainPage() 
    { 
     InitializeComponent(); 
     //treeView.DataContext = itemsSource; 
     LayoutRoot.DataContext = new CollectionViewSource { Source = itemsSource }; 

    } 

이 프로젝트를 실행하면 설명은 항상 첫 번째 항목 설명으로 설정됩니다. 선택에 따라 변경되지 않습니다.

이 포인터를 얻을 수있는 포인터는 무엇입니까?

Answer 1

TextBox를 "{Binding Description}"에 바인딩했습니다. TreeView가 시작하는 것과 동일한 DataContext를 사용하므로 최상위 항목에 대한 설명이 표시됩니다.

텍스트 상자가 트리에서 선택한 항목을 따르도록하려면 해당 데이터 컨텍스트를 Treeview의 SelectedItem에 바인딩해야합니다. 하여 그리드의 DataContext 그 구속력

<Grid DataContext="{Binding SelectedItem, ElementName=treeView}"> 
    <Grid.ColumnDefinitions> 
     <Grid.ColumnDefinition Width="Auto" /> 
     <Grid.ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <Grid.RowDefinition Height="Auto" /> 
     <Grid.RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <TextBlock Text="Name" Grid.Row="0" Grid.Column="0" /> 
    <TextBox Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/> 

    <TextBlock Text="Description" Grid.Row="1" Grid.Column="0" /> 
    <TextBox Text="{Binding Description}" Grid.Row="1" Grid.Column="1"/> 
</Grid> 

주 - : 나는 자신의 그리드에서 "상세"디스플레이를 배치에 경사하고 거기에 레이아웃을 관리하는 것, 이것은 DataContext를 업데이트 할 수있는 좋은 장소가 될 것입니다 treeView를 소스 객체로 사용하고 SelectedItem에 바인드합니다.