天天看點

快速建構Windows 8風格應用5-ListView資料控件

本篇博文主要介紹什麼是ListView資料控件、如何建構ListView資料控件。

什麼是ListView資料控件?

1)  ListView資料控件用來顯示資料集合。

2)  繼承自ItemsControl。

3)  大多數情況是縱向顯示資料,顯示的資料通常是排序過的。

4)  在切換到Snap View(貼靠視圖)時,通常使用ListView顯示資料集合。

快速建構Windows 8風格應用5-ListView資料控件

如何建構ListView資料控件?

首先我們需要了解一下ListView控件中一些重要屬性和事件:

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

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

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

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

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

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

另外我們在使用ListView進行資料呈現的時候,需要考慮ListView控件的互動模式:

快速建構Windows 8風格應用5-ListView資料控件

ListView的SelectionMode屬性為枚舉類型,其中包含值有:

1)  None:沒有已選擇項;

2)  Single:隻有一項可選擇;

3)  Multiple:有多項可選擇;

4)  Extended:有多項可選擇并且選擇項可以不連續;

下面我們來看一下幾種常用ListView呈現資料的樣式效果:

效果一:靜态清單。

快速建構Windows 8風格應用5-ListView資料控件

那麼我們如何在應用程式中實作這種ListView樣式呢?

XAML代碼中:

快速建構Windows 8風格應用5-ListView資料控件

可以看到ListView控件中ItemTemplate引用了名字為StoreFrontTitleTemplate的靜态資源,并且設定SelectionMode值為None。StoreFrontTitleTemplate的靜态資源代碼如下:

快速建構Windows 8風格應用5-ListView資料控件

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

快速建構Windows 8風格應用5-ListView資料控件

效果二:點選左側清單某一項,右側顯示詳細資訊。

快速建構Windows 8風格應用5-ListView資料控件

這種效果是點選左邊清單中某一項,右邊顯示該項的詳細資訊,那麼我們如何在代碼中實作這種樣式效果呢?

首先我們來看左側清單實作ListView的XAML代碼:

快速建構Windows 8風格應用5-ListView資料控件

其中設定ListView控件的ItemTemplate為名稱為MessageListImageTemplate的靜态資源,ItemPanel為名稱為MessageListItemsPanelTemplate的靜态資源。

MessageListImageTemplate靜态資源XAML代碼如下: 

快速建構Windows 8風格應用5-ListView資料控件

MessageListItemsPanelTemplate靜态資源XAML代碼如下: 

快速建構Windows 8風格應用5-ListView資料控件

我們了解了如何實作ListView的XAML後,下面來看一下效果圖中右側XAML代碼是如何實作的。 

快速建構Windows 8風格應用5-ListView資料控件

其實效果圖中右側定義了一個ScrollViewer控件,它的DataContext屬性值設定為ListView的SelectedItem屬性。

最後我們在C#代碼中将資料綁定到ListView控件上:

快速建構Windows 8風格應用5-ListView資料控件

效果三:左側清單隻能進行單選,右側清單可以進行多項選擇。

快速建構Windows 8風格應用5-ListView資料控件

這裡我們想實作清單中項能夠進行單選或者多選,隻需要設定ListView的SelectionMode屬性值為Single;Multiple或Extended。

我們可以設定ListView清單中的Header,XAML代碼如下:

快速建構Windows 8風格應用5-ListView資料控件

實作效果:紅色框體内是我們設定的ListView控件Hearder。

快速建構Windows 8風格應用5-ListView資料控件

當然我們也可以将資料在ListView控件進行分組呈現。XAML代碼設定如下:

快速建構Windows 8風格應用5-ListView資料控件

實作效果:紅色框體内是我們設定的ListView控件分組。

快速建構Windows 8風格應用5-ListView資料控件

繼續閱讀