Windows 8學習筆記(十二)--集合控件

在Win8 Metro App中，集合項的顯示大多基於ListView\ListBox\GridView三個控件實現。

今天就用分別試用一下哈~

首先看一下，官方對這三個控件的定義

ListBox: Contains a list of selectable items.（包含可選項目的列表）

ListView: Represents a control that displays a list of data items.（展現數據項列表顯示的控件）

GridView: Represents a specialized ordered list view.(展現特殊排序的列表視圖)

 

三個控件都簡單用了一下，發現了幾個細微的地方：

相同點：

（1）它們都可以顯示數據列表;

（2）都可以實現分組顯示;

（3）都是基於Selector的控件

不同點：

（1）ListBox的SelectionMode只有 Extended、Multipule、Single三個屬性，ListView和    GridView多一個None屬性

（2）ListView和GridView有ItemClick事件，ListBox沒有

其控件中的方法、屬性非常多，只能結合需求涉及一部分屬性。其基本用法與Phone7中基本相似，DataTemplate實現模板樣式，利用ItemSource綁定數據源，利用DataSelector綁定不同的數據模板。GroupStyle分組模板是我在Phone7中沒有涉及過的。

 

在學習GroupStyle之前，把我今天用ListView與ListBox的一些小插曲先整理一下:

當我在ListView中使用以下代碼

  <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" Height="400"></WrapGrid>
                </ItemsPanelTemplate>
</ListView.ItemsPanel>
           
                    
                

實現列表橫向排列，當高度超過400自動向右橫向排列，界面是如我所期望的展現了，但是在模擬器中使用觸摸仿真手勢卻不能滑動了，當把標簽改為ListBox時，卻可以實現，不知其它同仁有沒遇到這個問題，不知是不是在Win8中有部分是不是沒全部開放？？？

 

GroupStyle

三個控件的使用方式相同，使用該模板，不得不提的數據源對象CollectionViewSource，在MSDN Sample里都用的這個對象作為數據源，當然傳統的ItemSource賦數據源也是可以的。

CollectionViewSource 它是為支持分組集合類提供數據源

屬性：

Source:用於設置列表顯示數據源

ItemsPath:從CollectionViewSource的源中指定分組等級數據屬性，如數據源是這樣一個等級group---items—item我們對應的ItemsPath就可以設置這三個級別屬性

IsSourceGrouped：該值表示數據源的數據是否分組

<GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Background="White" Margin="0">
                                <TextBlock Text='{Binding Key}' Foreground="Gray" FontSize="25" Margin="5" />
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Height="400" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>

<GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

HeadTemplate:該模板表示每組組頭的樣式

GroupStyle中的ItemsPanelTemplate:用於設置每組其下的列表項顯示的方式。

ItemPanel:用於設置每個獨立組排列顯示的方式

將CollectionViewSource數據源對象先加載進頁面資源

<GridView x:Name="gridview" ItemsSource="{Binding Source={StaticResource cvs2}}">

再次控件的數據源綁定到CollectionViewSource對象即可

當然，還有很多用法也許我不是很了解，在Sample中SemanticZoom結合GridView實現了組頭與組列表項顯示的切換

 

當然還有很多結合不同控件的用法，等待發掘哦~