在 Silverlight 中基于 TreeView 控件创建主/详细视图答案

【问题标题】：Create a Master/Details View based on TreeView Control in Silverlight在 Silverlight 中基于 TreeView 控件创建主/详细视图
【发布时间】：2011-01-27 08:40:40
【问题描述】：

我有一个具有以下属性的 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 };

    }

当我运行这个项目时，我注意到描述总是设置为第一项描述。它不会根据选择而改变。

有什么建议可以解决这个问题吗？

【问题讨论】：

标签： silverlight silverlight-4.0

【解决方案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>

注意 Grid DataContext 上的绑定，它使用 treeView 作为源对象并绑定到 SelectedItem。

【讨论】：