天天看點

快速建構Windows 8風格應用4-FlipView資料控件

本篇博文主要介紹為什麼使用FlipView控件、什麼是FlipView控件、如何使用FlipView控件和FlipView控件最佳實踐。

為什麼使用FlipView控件?

如果我們開發一個購物類應用,希望在産品詳細頁面中顯示産品的多個圖像,對于這種小型資料集合可以使用FlipView控件。

如果我們開發一個房地産類應用,希望針對每間房屋顯示許多圖像,以展示各個房間,對于這種中型資料集合可以包括FlipView控件,以便讓使用者可以跳轉到特定的照片。

什麼是FlipView控件?

FlipView資料控件用來顯示資料集合,使用者可以通過滑動在其子窗體間切換,當然也可以點選左右或者上下兩側的切換按鈕在其子窗體間切換。FlipView控件繼承自ItemsControl類。

快速建構Windows 8風格應用4-FlipView資料控件

下面我們來看FlipView控件中幾個重要屬性和事件:

1)  ItemsSource屬性:擷取或設定生成其内容的對象源;

2)  ItemTemplate屬性:擷取或設定顯示項的模版;

3)  ItemTemplateSelector屬性:選擇生效的模版(一般在定義了多個ItemTemplate時使用);

4)  ItemsPanel屬性:擷取或設定放置内容的面闆(通常用來改變FlipView控件的切換方向);

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

如何使用FlipView控件?

對于我們開發者如何在應用程式中使用FlipView控件呈現資料呢?

讓我們看一下三種常用的FlipView呈現資料效果和如何在代碼中如何實作這些效果:

1)  預設方式,左右浏覽資料。 

快速建構Windows 8風格應用4-FlipView資料控件

XAML中聲明FlipView控件,設定DataTemplate,其中Image控件用于顯示圖檔、TextBlock控件用于顯示圖檔的标題。具體代碼如下: 

快速建構Windows 8風格應用4-FlipView資料控件

C#代碼中将資料綁定到FlipView控件的ItemSource屬性上。具體代碼如下: 

快速建構Windows 8風格應用4-FlipView資料控件

2)  上下浏覽資料 

快速建構Windows 8風格應用4-FlipView資料控件

XAML中在聲明的FlipView控件中設定ItemsPanel屬性,值為vertical。具體如何設定如下圖代碼中所示: 

快速建構Windows 8風格應用4-FlipView資料控件
快速建構Windows 8風格應用4-FlipView資料控件

3)  添加上下文訓示器控件,以便使用者可以直接跳轉到特定的項目 

快速建構Windows 8風格應用4-FlipView資料控件

XAML中首先需要聲明一個FlipView控件,關于FlipView中屬性并沒有特别的設定,基本和上面代碼相同。具體代碼如下: 

快速建構Windows 8風格應用4-FlipView資料控件

此處唯一特殊之處是還需要聲明一個ListBox控件,用來呈現訓示器的效果。 

快速建構Windows 8風格應用4-FlipView資料控件

聲明的ListBox控件如下,需要注意的是SelctedItem進行了一個雙向綁定,是将FlipView3的SelectedItem屬性值綁定到ListBox的SelctedItem屬性上,其中ListBox控件的ItemContainerStyle屬性引用了一個名字為ContextControlItemStyle靜态資源,Style屬性引用了一個名字為ListBoxStyle1靜态資源。 

快速建構Windows 8風格應用4-FlipView資料控件

靜态資源定義在<Page.Rescource>中,具體代碼如下:

快速建構Windows 8風格應用4-FlipView資料控件

C#代碼中将資料綁定到FlipView控件的ItemsSource屬性上和ListBox的ItemsSource屬性上。具體代碼如下: 

快速建構Windows 8風格應用4-FlipView資料控件

FlipView控件最佳實踐

建議:

1)  當集合中的項不能提供足夠的上下文資訊讓使用者知道他們目前在哪個集合中時,使用上下文訓示器提示使用者。

2)  給使用者訓示,提醒他們在集合中的目前項。

3)  裁剪有提示項的數量和特定的場景。

4)  允許使用者跳轉到指定的項。

避免:

1)不要使用FlipView呈現大型的集合,可使用ListView和GridView控件來呈現。

繼續閱讀