ListView 和 GridView應用詳解-----本文轉自部落格園

標籤：des   style   class   blog   code   http   

1. 選擇 ListView 或 GridView

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

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

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

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

下面的 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#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>

以下是資料範本所定義布局的外觀。

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 外觀。

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

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

下面是具有可單擊項的 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"/>

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