Windows 8 Store App 如何設定 DataSource 和 ItemTemplate

Windows 8 如何設定 DataSource

從 WPF,Silverlight 開始

 

就開始採用 MVVM ( Model View ViewModel ) 架構

 

簡單的說

 

你可以不需要寫太多的 C# 程式碼

 

將所有的資料來源與互動都寫在 XAML 中

 

即可完成資料和畫面的呈現

 

這篇文章主要是想說,如果透過 MVVM的架構

 

又能將一部分的資料來源用 C# 編寫(也許有其他便利性和用途)

 

 


 

這次的範例以 Windows 8 Store Apps 為例

 

首先,開啟 Visual Studio 2012 並新增一個空白「Windows 市集 - 空白應用程式」

 

切換到「MainPage.xaml」,並新增一個「ListView」,取名為 “myListViewItem”

 

 

為了需求,我們放進一個圖片,等一下會使用到它

 

Icon

 

 

接著到原始碼的頁面「MainPage.xaml.cs」

 

 

這邊我們先定義一個資料結構類別「Data」

 

並在裡面新增三個屬性「Title」、「Subtitle」、和「Image」

 

初始化的時候加入兩筆資料,並指定為「myListViewItem」的「ItemsSource」

 

 

完成之後,其實我們還得做一件事

 

因為如果現在執行的話

 

會有抓到剛才新增的兩筆資料

 

但是不會顯示任何的值和圖片

 

因為我們還沒有給「Item」做樣版

 

也就是說,它不知道該如何顯示這些資料

 

所以這邊有兩個方法可以做:

 

  1. 可以使用內建的樣式資源
  2. 可以自己定義樣式資源

 

首先說明如何直接套用內建的樣式資源

 

只要在「MainPage.xaml」裡,「 myListViewItem」的 「ItemTemplate」指定到資源位置即可

 

 

這樣就可以在執行的畫面看到我們新增的兩筆資料和圖片了

 

image

 

注意:

我們在定義「Data」的時候取了三個屬性的名字

這三個名字分別都有對應到「樣版資源裡的資訊」

若名字沒有對應用的的話

則畫面就不會正確的顯示資訊了

 

 

當然你會說,如果我想自己改呢?

 

那就連兩邊都一起改

 

不過為了不要去動到原來的樣版資源

 

我們這邊用了第二種方法

 

新增自己的樣版資源

 

 

首先,我們先回到「MainPage.xaml」

 

在一開始的地方,把在「StandardStyles.xaml」的一個樣版資源搬過來(我們就在此修改,不動原來的部分)

 

並改成你要的名字(像是:Title 改成 Name,或是 Subtitle 改成 Company…等等)

 

只是記得剛才說過的:「要對應到你定義的資料」

 

所以請務必回到「MainPage.xaml.cs」去改「Data」的屬性名稱

 

程式檔案 DataSource.zip