ListView 和 GridView ————转

1. 选择 ListView 或 GridView

ListView

GridView
控件均用于展示采用中数据的集纳。它们的职能十分相似,但是来得数据的办法不同。它们都派生自
ItemsControl
类。

ListView
采用直堆叠的方示数据。该控件常用于展示准顺序排列的类型列表,如电子邮件列表或探寻结果列表。它在主从式列表情况下啊坏有因此,其中的列表项就含少量音讯,并且选定项目的详细信息会单独显示。

GridView
采用水平堆叠的法门展示数据。对于占驻于多控件的每个品种(如照片库),当你待吗夫形丰富的视觉信息经常,该控件很常用。

你得透过以起一直抬高到其
Items
集合或以其
ItemsSource
属性绑定到多少源来填充
ItemsControl。同时将
ListView

GridView
绑定到平数据源的情很广泛。你可以显示中间一个并拿其余一个潜伏起来,从而将
UI 调整呢摆脱酷的主旋律和分辨率。

下面的
ListView
显示了贴靠应用被之种,GridView
显示了当该用全屏显示时的同一组项目。

图片 1

2. 将起添加到起集合

足由此利用可扩大应用程序标记语言 (XAML) 或代码向
Items
集合添加项。在偏下情形下便使用这种办法上加项:具有无还改且使用 XAML
轻松定义的微量桩,或者以运作时以代码生成项。以下是含使用 XAML
内联定义项的
ListView
和含有使用代码添加项的
GridView

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>

// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.Items.Add("Item 1");
gridView1.Items.Add("Item 2");
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


ItemsControl
添加项时,这些类别会自动放置于项容器中。用于
ListView
的项容器为
ListViewItem,用于
GridView
的项容器为
GridViewItem。要改成项如何展示,你不过经安装
ItemContainerStyle
属性应用样式到该项容器。

采取 XAML 定义项时,这些项还会自行添加至
Items
集合。

3. 安项目源

。如果 ItemsSource 属性已装且使用 XAML 添加项,则会忽略该项。如果
ItemsSource 属性已装且下代码向 Items
集合中添加项,则会抓住那个

以下是有支撑绑定到
ItemsControl
的大规模集合类型。

集合类型 使用时间
List(Of T) 当集合在运行时不更改时。列表或网格的内容在其创建后为静态。
ObservableCollection(Of T) 当集合在运行时更改时。系统会向列表或网格通知对集合的更改,然后列表或网格会更新显示。
FileInformationFactory.GetVirtualizedFilesVector 绑定到文件集合。
FileInformationFactory.GetVirtualizedFoldersVector 绑定到文件夹集合。
FileInformationFactory.GetVirtualizedItemsVector 绑定到存储项集合。

这会儿,直接在代码中将
ItemsSource
设置也集实例。

C#

C++

VB

复制

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.ItemsSource = itemsList;
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);

还可以将 ItemsSource 属性绑定到 CollectionViewSource。CollectionViewSource 充当集合类的代理角色,启用货币和分组支持。如果将相同数据同时绑定到 ListView 和 GridView 来支持在辅屏视图和全屏视图之间切换,则应绑定到 CollectionViewSource 以便两个视图都有相同的当前项。有关更多信息,请参阅使用 XAML 进行数据绑定。

如若要于列表或网格中形分组项,则数据源必须支持分组功能,必须用
ItemsSource
绑定到
CollectionViewSource,并且将其
IsSourceGrouped
属性设置也
True。有关详细信息,请参见如何对数码控件被的起进行分组。

以脚的代码中,ItemsSource
绑定到叫也 itemsViewSource
CollectionViewSource。若一旦翻看这示例和以下示例的完全代码,请动
Microsoft Visual Studio 2012 中的拆分应用程序模板创建以。

<Page.Resources>

    <!– Collection of items displayed by this page –>

    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

XAML

<ListView x:Name="itemListView"     ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

4. 点名项目之外观

通过将
DisplayMemberPath
设置到特定的习性,设置itemTemplate

<ListView x:Name="itemListView"
          Margin="120,0,0,60"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemListView_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="110" Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                    <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                </Border>
                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>          
</ListView>

以下是数据模板所定义布局的外观。

图片 2

5. 点名视图布局

只要使指定如何当列表或网格视图中摆放项,则可以安装
ItemsPanel
属性来指定设置为布局
Panel

ItemsPanelTemplate。默认情况下,GridView
使用一个
WrapGrid
面板作为它们的
ItemsPanelListView
使用一个
VirtualizingStackPanel
作为它们的 ItemsPanel

脚介绍如何以
ListView
中使用
WrapGrid
更改项目之布局。WrapGrid 替换默认的
VirtualizingStackPanel,它以项目排成一列。我们安
WrapGrid.MaximumRowsOrColumns
属性,以便将项目排成稀排列。

XAML

复制

<ListView Height="320" Width="260">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <Rectangle Height="100" Width="100" Fill="Blue" />
    <Rectangle Height="100" Width="100" Fill="Red" />
    <Rectangle Height="100" Width="100" Fill="Yellow" />
    <Rectangle Height="100" Width="100" Fill="Green" />
    <Rectangle Height="100" Width="100" Fill="Gray" />
    <Rectangle Height="100" Width="100" Fill="LightBlue" />
    <Rectangle Height="100" Width="100" Fill="Pink" />
    <Rectangle Height="100" Width="100" Fill="YellowGreen" />
</ListView>

下面是运具有两列的
WrapGrid
作为它们的
ItemsPanel
ListView
外观。

图片 3

6. 为视图中补充加标题

卿可以向
ListView

GridView
中上加标题,方法是也
Header
属性分配一个字符串或对象。可以经过安装
HeaderTemplate
属性使用数据模板 定义 Header 的布局。

默认情况下,标题显示在视图的前方。它显得在
ListView
的顶部,GridView
的左侧。如果
FlowDirection
属性设置为
RightToLeft,则标题显示在
GridView 的右侧。

下面是标题包含
StackPanel(具有文本和图像)的
GridView。此而扩大应用程序标记语言
(XAML) 是 Microsoft Visual Studio“网格应用”模板的 GroupDetail
页面中利用的 GridView 的简化版。

XAML

复制

<GridView x:Name="itemGridView"
          Margin="0,-14,0,0"
          Padding="120,0,120,50"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard500x130ItemTemplate}">

    <GridView.Header>
        <StackPanel Width="480" Margin="0,4,14,0">
            <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" 
                       Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/>
            <Image Source="{Binding Image}" Height="400" Margin="0,0,18,20" 
                   Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            <TextBlock Text="{Binding Description}" Margin="0,0,18,0" 
                       Style="{StaticResource BodyTextStyle}"/>
        </StackPanel>
    </GridView.Header>
</GridView>

此处,GridView
的题是大概也黄色的一些。

图片 4

7. 设置视图的彼此模式

以默认情况下,用户可当
ListView

GridView
中选择一个品种。要反此作为,你可用
SelectionMode
属性设置为
ListViewSelectionMode
枚举值,以允许多选择或取缔选择。

下是不准选择的
ListView
和许多选择的
GridView
的代码。

XAML

复制

<ListView x:Name="itemList"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionMode="None"/>

<GridView x:Name="itemGrid"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemView_SelectionChanged"
          SelectionMode="Extended"/>

若要响应列表或网格中的选择更改,请处理 SelectionChanged 事件。在事件处理程序代码中,可以从 SelectionChangedEventArgs.AddedItems 属性获取选择项列表。在 SelectionChanged 事件之外,使用代码或通过数据绑定从 SelectedItem 和 SelectedItems 属性获取选择的项。

以下是达例被 GridView 的
SelectionChanged
事件处理程序。

C#

复制

List<object> selectedItems;

private void ItemView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Use e.AddedItems to get the items that are selected in the ItemsControl.
    selectedItems = (List<object>)e.AddedItems;
}你还可以更改 ListView 或 GridView,从而使用户可以单击项目(如按钮),而不是选择项目。例如,当用户点击列表或网格中的一个项目时,如果你的应用导航至一个新页面,这将会很有用。要启用此行为,请将 SelectionMode 设置为 None,将 IsItemClickEnabled 设置为 true,并对 ItemClick 事件进行处理,使其在用户点击项目时执行某些任务。

下面是享有可单击项的
GridViewItemClick
处理程序中之代码会导航及一个新页面,并以点击的类别作数据传递让新页面。

XAML

复制

<GridView x:Name="itemGridView"
          Margin="116,0,116,46"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick"/>

C#

复制

private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the split page, configuring the new page
    // by passing required information as a navigation parameter
    this.Frame.Navigate(typeof(SplitPage), e.ClickedItem);
}