1、Creating a master-detail ListView:
本示例讲解的是一个 左侧显示列表,右侧显示列表选中项的详细信息的示例。
注: 当把 ListView 列表设置为 SelectionMode="None" 时,列表中的项不会被选中。
SelectionMode 的四个属性：
| None | Item selection is disabled. |
| Single | A user can select a single item. |
| Multiple | A user can select multiple items without using modifier keys. |
| Extended | A user can select multiple items using the Ctrl and Shift modifier keys. |
有趣的地方是,在右侧的详细部分,使用一个 ScrollViewer 控件,里面放置一个 StackPanel 控件 ,然后显示详细信息。当
用 两指 或者 Ctrl + 鼠标滚轮 对这个 ScrollViewer 进行缩放操作时，内容变放大或缩小操作，而且因为文字属于 矢量 绘制，
当无限放大文字时，是不会有锯齿的。要点是给 ScrollViewer添加属性：
<ScrollViewer.RenderTransform>
<CompositeTransform/>
</ScrollViewer.RenderTransform>
显示效果:
对详细区域进行放大操作:
页面的 xaml :
//左侧列表 <ListView x:Name="ItemListView" Margin="0,0,0,8" Width="Auto" Height="Auto" ItemTemplate="{StaticResource MessageListImageTemplate}" ItemsPanel="{StaticResource MessageListItemsPanelTemplate}" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Auto" //自动显示竖直滚动条 ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>//不显示水平滚动条 //限制上面列表的详细区域 <ScrollViewer x:Name="DetailView" Margin="0,0,0,0" Grid.RowSpan="2" Grid.Column="1" RenderTransformOrigin="0.5,0.5" VerticalScrollBarVisibility="Auto"> //可以使详细区域进行缩放 <ScrollViewer.RenderTransform> <CompositeTransform/> </ScrollViewer.RenderTransform> <StackPanel x:Name="ContentPanelDetail" HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10,0,0,0" // 绑定到上面列表的 选中项 DataContext="{Binding SelectedItem, ElementName=ItemListView}"> <StackPanel x:Name="HeaderElements" Orientation="Horizontal"> <StackPanel x:Name="HeaderStackPanel" Orientation="Vertical" VerticalAlignment="Center" Width="300"
HorizontalAlignment="Left" Margin="10,0,0,0"> <TextBlock Text="{Binding Title}" MaxHeight="80" TextTrimming="WordEllipsis" HorizontalAlignment="Left"
Style="{StaticResource LargeContentFontStyle}" Margin="0" /> <StackPanel Orientation="Horizontal"> <TextBlock Text="From: " Style="{StaticResource SmallContentFontStyle}"/> <TextBlock Text="{Binding Subtitle}" HorizontalAlignment="Left" VerticalAlignment="Top" TextTrimming="WordEllipsis" Style="{StaticResource SmallContentFontStyle}" Height="20" Margin="0"/> </StackPanel> </StackPanel> </StackPanel> <StackPanel Orientation="Vertical"> <TextBlock x:Name="DetailTextBlock" Text="{Binding Content}" HorizontalAlignment="Left" Margin="0,18,40,0" Style="{StaticResource ReadingFontStyle}" Height="Auto" TextWrapping="Wrap"/> </StackPanel> </StackPanel> </ScrollViewer>
其中,左侧 ListView 列表的 ItemTemplate：
View Code
<DataTemplate x:Key="MessageListImageTemplate"> <Grid HorizontalAlignment="Stretch" Width="Auto" Height="Auto" Margin="20,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Style="{StaticResource ImagePlaceHolderStyle}" Margin="0,8,0,8" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Center"> <Image Source="{Binding Image}" Margin="0" Stretch="UniformToFill"/> </Border> <StackPanel Grid.Column="1" Style="{StaticResource MoCoContentTextStackPanelStyle}" HorizontalAlignment="Left" Margin="10,8,0,0"> <TextBlock TextTrimming="WordEllipsis" Text="{Binding Title}" Style="{StaticResource NonWrappingSmallContentTextStyle}" Width="200" Height="20"/> <TextBlock Text="{Binding Subtitle}" TextWrapping="Wrap" TextTrimming="WordEllipsis" Style="{StaticResource SubHeaderTextStyle}" Width="200" Height="20" Margin="0,0,0,0"/> </StackPanel> </Grid> </DataTemplate>
左侧列表的 MessageListItemsPanelTemplate :
<ItemsPanelTemplate x:Key="MessageListItemsPanelTemplate"> <StackPanel Margin="0,0,0,0" Width="Auto"/> </ItemsPanelTemplate>
xaml 页面对应的 C# 页面,在页面的构造函数中添加:
MessageData messageData = new MessageData(); ItemListView.ItemsSource = messageData.Collection; ItemListView.SelectedIndex = 0;
数据源(数据类和对象):
//Item :
View Code
public class Item : System.ComponentModel.INotifyPropertyChanged { public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName)); } } private string _Title = string.Empty; public string Title { get { return this._Title; } set { if (this._Title != value) { this._Title = value; this.OnPropertyChanged("Title"); } } } private string _Subtitle = string.Empty; public string Subtitle { get { return this._Subtitle; } set { if (this._Subtitle != value) { this._Subtitle = value; this.OnPropertyChanged("Subtitle"); } } } private ImageSource _Image = null; public ImageSource Image { get { return this._Image; } set { if (this._Image != value) { this._Image = value; this.OnPropertyChanged("Image"); } } } public void SetImage(Uri baseUri, String path) { Image = new BitmapImage(new Uri(baseUri, path)); } private string _Link = string.Empty; public string Link { get { return this._Link; } set { if (this._Link != value) { this._Link = value; this.OnPropertyChanged("Link"); } } } private string _Category = string.Empty; public string Category { get { return this._Category; } set { if (this._Category != value) { this._Category = value; this.OnPropertyChanged("Category"); } } } private string _Description = string.Empty; public string Description { get { return this._Description; } set { if (this._Description != value) { this._Description = value; this.OnPropertyChanged("Description"); } } } private string _Content = string.Empty; public string Content { get { return this._Content; } set { if (this._Content != value) { this._Content = value; this.OnPropertyChanged("Content"); } } } }
//MessageData :
View Code
public class MessageData { public MessageData() { Item item; String LONG_LOREM_IPSUM = String.Format("{0}\n\n{0}\n\n{0}\n\n{0}", "Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat"); Uri _baseUri = new Uri("ms-appx:///"); item = new Item(); item.Title = "New Flavors out this week!"; item.Subtitle = "Adam Barr"; item.SetImage(_baseUri, "SampleData/Images/60Mail01.png"); item.Content = "Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum"; Collection.Add(item); item = new Item(); item.Title = "Check out this topping!"; item.Subtitle = "David Alexander"; item.SetImage(_baseUri, "SampleData/Images/60Mail01.png"); item.Content = "Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue"; Collection.Add(item); item = new Item(); item.Title = "Come to the Ice Cream Party"; item.Subtitle = "Josh Bailey"; item.SetImage(_baseUri, "SampleData/Images/60Mail01.png"); item.Content = "Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse"; Collection.Add(item); item = new Item(); item.Title = "How about gluten free?"; item.Subtitle = "Chris Berry"; item.SetImage(_baseUri, "SampleData/Images/60Mail01.png"); item.Content = LONG_LOREM_IPSUM; Collection.Add(item); item = new Item(); item.Title = "Summer promotion - BYGO"; item.Subtitle = "Sean Bentley"; item.SetImage(_baseUri, "SampleData/Images/60Mail01.png"); item.Content = "Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat"; Collection.Add(item); item = new Item(); item.Title = "Awesome flavor combination"; item.Subtitle = "Adrian Lannin"; item.SetImage(_baseUri, "SampleData/Images/60Mail01.png"); item.Content = "Curabitur class aliquam vestibulum nam curae maecenas sed integer"; Collection.Add(item); } private ItemCollection _Collection = new ItemCollection(); public ItemCollection Collection { get { return this._Collection; } } }