天天看點

快速建構Windows 8風格應用6-GridView資料控件

本篇博文主要介紹什麼是GridView資料控件、如何建構常用的GridView資料呈現樣式。

什麼是GridView資料控件?

GridView控件用來顯示資料集合。它繼承自ItemsControl。通常使用GridView控件來橫向顯示資料,并且顯示的資料通常是排序過的。另外我們一般開發水準視圖時,通常使用GridView顯示資料集合。 

快速建構Windows 8風格應用6-GridView資料控件

GridView資料控件包含的重要屬性和事件:

1)  IsItemClickEnabled屬性:擷取或設定點選清單項是否會觸發Click事件;

2)  SelectionMode屬性:擷取或設定選擇的模式;

3)  HeaderTemplate屬性:擷取或設定清單标題的模版,改變标題的外觀;

4)  GroupStyle屬性:擷取GroupStyle對象集合,定義每組的外觀;

5)  ItemsPanel屬性:擷取或設定放置内容的面闆(通常用來改變GridView的呈現資料的方向);

6)  SelectionChanged事件:當選擇的項改變時觸發;

7)  ItemClick事件:當點選清單項,且IsItemClickEnabled屬性值為true時将觸發該事件;

如何建構常用的GridView資料呈現樣式?

樣式1: 

快速建構Windows 8風格應用6-GridView資料控件

樣式1隻是将資料全部呈現出來,并沒有其他任何的使用者操作,那麼我們該如何建構這種樣式的GridView呢?

XAML代碼中聲明GridView控件,并設定GridView控件的SelectionMode屬性值為None,ItemTemplate屬性引用名字為StoreFrontTileTemplate的靜态資源。具體代碼如下:

快速建構Windows 8風格應用6-GridView資料控件

StoreFrontTileTemplate的靜态資源具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

C#代碼中将資料綁定到GridView控件上。具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

樣式2: 

快速建構Windows 8風格應用6-GridView資料控件

樣式2中選擇清單中某一項,左上角顯示我們選中了哪一項的資訊,那麼我們該如何建構這種樣式的GridView呢?

XAML代碼中聲明GridView控件,并設定GridView控件的IsItemClickEnabled屬性值為true(點選某一項時觸發ItemClick事件),注冊ItemClick事件。具體代碼如下:

快速建構Windows 8風格應用6-GridView資料控件

C#代碼中将資料綁定到GridView控件上,具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

ItemClick事件代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

樣式3: 

快速建構Windows 8風格應用6-GridView資料控件

樣式3種将資料進行了分組呈現,其中組與組之間是水準方向呈現,組中資料項是豎直方向呈現,那麼我們該如何建構這種樣式的GridView呢?

XAML代碼中聲明GridView資料控件,并設定ItemsSource屬性綁定為名稱為cvs1的CollectionViewSource上,同時設定ItemsPanel,ItemTemplate和GroupStyle屬性。具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

設定GridView的ItemsPanel屬性,來控制資料顯示的方向,具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

設定GridView的ItemTemplate屬性,來控制顯示資料的樣式等,具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

設定GridView的GroupStyle屬性,來控制顯示資料組的樣式,同時也可以控制組中資料項顯示的方向,具體代碼如下:

快速建構Windows 8風格應用6-GridView資料控件

C#代碼中将資料綁定到名稱為cvs1的CollectionViewSource上,具體代碼如下: 

快速建構Windows 8風格應用6-GridView資料控件

最後我們也可設定GridView控件的Header屬性來呈現不同的樣式效果,例如:

快速建構Windows 8風格應用6-GridView資料控件

呈現的效果可以為: 

快速建構Windows 8風格應用6-GridView資料控件

繼續閱讀