12.3.3 实现主从关系视图
当绑定到集合时，通常希望将数据以主从关系视图的形式显示，使用主视图显示所有集合元素的列表，使用从属视图显示集合中选中项的详细信息。
上一节的实例已经创建了主视图，即一个显示所有歌曲列表的ListBox控件。本节的实例将在此基础上，创建一个从视图，使ListBox控件中选择的歌曲发生变化时，更新从视图的内容，显示选中歌曲的详细信息。具体操作步骤如下所示。
（1）创建从视图的界面。在Silverlight工程中新建一个用户控件，在VisualStudio菜单中，依次选择”Project”→”AddNew Item”命令，在弹出的对话框中选择”SilverlightUserControl”，命名为MusicDetail.xaml。
（2）然后给MusicDetail中用来显示歌曲信息的TextBlock控件绑定属性。在VisualStudio中打开MusicDetail.xaml，添加如例程12-12所示的代码，给从视图中添加TextBlock控件。
例程12-12 创建从视图
<UserControlx:Class=”BindingCollectionSample.MusicDetail”xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”><Canvasx:Name=”LayoutRoot”Background=”White”><TextBlockText=”歌曲：”FontSize=”22″Canvas.center=”130″Canvas.Top=”50″/><TextBlockText=”歌手：”FontSize=”22″Canvas.center=”130″ Canvas.Top=”100″/><TextBlockText=”长度：”FontSize=”22″Canvas.center=”130″Canvas.Top=”150″/>
<TextBlock x:Name=”name_tb” Text=”Binding MusicName”
Canvas.center=”200″ Canvas.Top=”50″
FontSize=”22″/>
<TextBlock x:Name=”author_tb” Text=”Binding Author”
Canvas.center=”200″ Canvas.Top=”100″
FontSize=”22″/>
<TextBlock x:Name=”length_tb” Text=”Binding Length”
Canvas.center=”200″ Canvas.Top=”150″
FontSize=”22″/>
</Canvas>
</UserControl>
（3）将从属视图添加到主视图，打开Page.xaml文件，使用例程12-13所示的代码在XAML中添加一个MusicDetail对象。这里要注意的是，由于MusicDetail是用户控件，在XAML中使用时需要添加命名空间的前缀。
例程12-13 创建主视图
<UserControlx:Class=”BindingCollectionSample.Page”xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”xmlns:local=”clr-namespace:BindingCollectionSample” Width=”400″border=”1″Height=”300″>
<UserControl.Resources>
<!–ListBox控件中每一项的模板–>
<DataTemplate x:Key=”DataTemplate1″>
<Grid>
<TextBlock x:Name=”name_tb” Text=”Binding MusicName”
FontSize=”20″ />
<TextBlock x:Name=”author_tb” Text=”Binding Author”
FontSize=”20″ Margin=”150,0,0,0″/>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.RowDefinitions>
<RowDefinition border=”1″ Height=”200″/>
<RowDefinition border=”1″ Height=”*”/>
</Grid.RowDefinitions>
<!–给ListBox的每一项应用模板–>
<ListBox x:Name=”musicList” ItemsSource=”Binding”",Mode=OneWay”
Margin=”5″ ItemTemplate=”StaticResource DataTemplate1″/>
<local:MusicDetail x:Name=”musicDetail”Grid.ColumnSpan=”1″Grid.Row=”1″
HorizontalAlignment=”center” VerticalAlignment=”Top” />
</Grid>
</UserControl>
（4）需要为从视图设置数据源对象，打开Page.cs文件，添加例程12-14所示的代码，让ListBox控件在触发SelectionChanged事件时，将选中项作为数据源对象赋给从视图的DataContext属性。
例程12-14 添加SelectionChanged事件处理
using System;usingSystem.Collections.Generic;usingSystem.Linq;using System.Net;usingSystem.Windows;usingSystem.Windows.Controls;usingSystem.Windows.Documents;usingSystem.Windows.Input;usingSystem.Windows.Media;usingSystem.Windows.Media.Animation;usingSystem.Windows.Shapes;
namespace BindingCollectionSample
public partial class Page : UserControl
//数据源集合对象
private MusicCollection allMusic;
public Page()
InitializeComponent();
//在集合对象中添加元素
allMusic = new MusicCollection();
allMusic.Add(new Music(“稻香”, “周杰伦”, new TimeSpan(0, 3, 56)));
allMusic.Add(new Music(“夜曲”, “周杰伦”, new TimeSpan(0, 3, 46)));
allMusic.Add(new Music(“日不落”, “蔡依林”, new TimeSpan(0, 3,48)));
allMusic.Add(new Music(“说爱你”, “蔡依林”, new TimeSpan(0, 3,45)));
//设置数据源对象
this.LayoutRoot.DataContext = allMusic;
//给ListBox添加事件响应
this.musicList.SelectionChanged +=
new SelectionChangedEventHandler(musicList_SelectionChanged);
void musicList_SelectionChanged(tsender,SelectionChangedEventArgs e)
//当选中项发生变化时，将选中项作为数据源对象
//赋给从属视图的DataContext属性。
this.musicDetail.DataContext = this.musicList.SelectedItem;
运行后的效果如图12-13所示，当选中歌曲列表中的一首《日不落》时，从视图将显示歌曲的歌名、歌手和歌曲长度信息。
 |
图12-13 主从关系视图的效果
No tags
