ListView 和 GridView ————轉

本文轉載自查看原文 2012-09-04 09:57 11028 metro style windows 8/ win8 metro style 學習過程

1. 選擇 ListView 或 GridView

ListView 和 GridView 控件均用於顯示應用中數據的集合。它們的功能十分相似，但是顯示數據的方式不同。它們都派生自 ItemsControl 類。

ListView 采用垂直堆疊的方式顯示數據。該控件常用於顯示按順序排列的項目列表，如電子郵件列表或搜索結果列表。它在主從式列表情況下也很有用，其中的列表項僅包含少量信息，並且選定項目的詳細信息會單獨顯示。

GridView 采用水平堆疊的方式顯示數據。對於占駐較多控件的每個項目（如照片庫），當你需要為其顯示豐富的視覺信息時，該控件很常用。

你可以通過將項直接添加到其 Items 集合或將其 ItemsSource 屬性綁定到數據源來填充 ItemsControl。同時將 ListView 和 GridView 綁定到同一數據源的情況很常見。你可以顯示其中一個並將另一個隱藏起來，從而將 UI 調整為擺脫那個的方向和分辨率。

下面的 ListView 顯示了貼靠應用中的項目，GridView 顯示了當該應用全屏顯示時的同一組項目。

ListView 和 GridView

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++

復制

// 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>

    <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>

以下是數據模板所定義布局的外觀。

ListView 數據模板

5. 指定視圖布局

若要指定如何在列表或網格視圖中擺放項，則可以設置 ItemsPanel 屬性來指定設置為布局 Panel 的 ItemsPanelTemplate。默認情況下，GridView 使用一個 WrapGrid 面板作為它的 ItemsPanel，ListView 使用一個 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 外觀。

具有兩列的 ListView

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 的標題是輪廓為黃色的部分。

ListView 數據模板

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 事件處理程序。

復制

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 事件進行處理，使其在用戶點擊項目時執行某些任務。

下面是具有可單擊項的 GridView。ItemClick 處理程序中的代碼會導航至一個新頁面，並將點擊的項目作為數據傳遞給新頁面。

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"/>

復制

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);
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android之ListView和GridVIew加載圖片 Flutter列表控件ListView與GridView WPF-帶有GridView的ListView樣式 Flutter中用ListView嵌套GridView報錯異常淺談RecyclerView(完美替代ListView,GridView) 關於ListView嵌套GridView中的onItemClickListener失效問題 Android去掉listView，gridView等系統自帶陰影 android listView嵌套gridview的使用心得 ListView嵌套GridView顯示不完整的解決方案安卓獲取ListView、GridView等滾動的距離（高度）