Master-detail情形

Master-detail情形

原文出处:http://www.beacosta.com/Archive/2005_11_01_bcosta_archive.html

最简单的Master-detail情形就是,点击ItemsControl特定,使该项的细节在另一个控件中显示出来.例如,一个程序在ListBox 中显示了一个顾客名字列表,当点击了一个特定的顾客时,TextBlock就更新这个顾客的地址,电话号码和出生日期.

在这个帖子中我将使用太阳系的行星作为数据源:点击ListBox中的行星名字,使该行星的图片与信息显示在被模板化的ContentControl上.ListBox扮演master的角色,ContentControl呈现细节.

在Window的资源段落,有一个提供行星数据的XmlDataProvider和一个CollectionViewSource,该 CollectionViewSource绑定Source属性到这个provider(要获得更多关于CollectionViewSource的信息,可以参考我前面的帖子.)这里是ListBox绑定到CollectionViewSource的markup:

    <!-- master -->
    <ListBox ItemsSource="{Binding Source={StaticResource cvs}}" DisplayMemberPath="@Name" Padding="5" Margin="0,0,5,0"/>

我还需要一个ContentControl来显示选择项的细节.下面的markup看起来有点奇怪:我们绑定ContentControl(只能显示单项)到很多项的集合?(注意看它的绑定和ListBox的itemsSource的绑定很像).这个markup工作的很好,因为数据绑定引擎足够聪明,它能分辨出这两个目标.当绑定ItemsControl到数据集合,我们能得到整个集合, 当我们绑定ContentControl到数据集合,我们得到的是集合的当前项.这就是在wpf中实现Marster-detail如此简单的缘故了.

    <!-- detail -->
    <ContentControl ContentTemplate="{StaticResource detailTemplate}" Content="{Binding Source={StaticResource cvs}}"/>

为了详细说明如何在ContentControl中显示行星的细节数据,我们使用了DataTemplate.下面的markup显示了 DataTemplate的数据绑定部分.注意,因为我们是绑定到XML,因此绑定使用XPath而不是Path.

    <DataTemplate x:Key="detailTemplate">
        (...)
        <Image Source="{Binding XPath=Image, Converter={StaticResource stringToImageSource}}" />
        (...)
        <StackPanel Orientation="Horizontal" Margin="5,5,5,0">
            <TextBlock Text="Orbit: " FontWeight="Bold" />
            <TextBlock Text="{Binding XPath=Orbit}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5,0,5,0">
            <TextBlock Text="Diameter: " FontWeight="Bold"/>
            <TextBlock Text="{Binding XPath=Diameter}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5,0,5,5">
            <TextBlock Text="Mass: " FontWeight="Bold"/>
            <TextBlock Text="{Binding XPath=Mass}" />
        </StackPanel>
        (...)
    </DataTemplate>

这里就是该示例的截图: