Windows Phone 8初學者開發—第6部分：設置應用程序的樣式

Source Code: http://aka.ms/absbeginnerdevwp8 
PDF Version: http://aka.ms/absbeginnerdevwp8pdf

 

咱們已經討論了XAML基礎、佈局以及事件，讓咱們在本課中討論一些有趣的議題。咱們將經過設置應用程序的樣式賦予應用程序獨特的特徵。顯然咱們要遵循微軟的準則以使咱們的應用程序看上去是Windows Phone 8生態系統的一部分，可是咱們還有不少個性化應用程序的自由度。

本課的計劃是：

1. 咱們將更改用於手機應用程序列表和開始屏幕的磁貼圖標。
2. 咱們將訪問用戶手機的主題顏色並將它們歸入到咱們應用程序的顏色當中，這樣咱們將學習一些很是重要的稱爲綁定表達式的XAML語法功能。
3. 最後咱們將討論在應用程序中建立可重用的樣式。

1.更換應用程序的磁貼圖標

本課的第一項任務是更改應用程序的磁貼，用戶將在按字母順序排列的應用程序列表和開始屏幕中(若是用戶將磁貼固定到開始屏幕)看到它。首先，咱們將在項目的屬性目錄中打開WMAppManifest.xml文件：

 

當您在解決方案資源管理器中雙擊該文件時，它將在一個特別的設計器窗口中被打開，該窗口提供許多應用程序被介紹給Windows Phone 8操做系統的選項。例如在第一個選項卡「應用程序界面(Application UI)」中，咱們能夠更改顯示名稱，應用程序圖標以及更多內容：

咱們須要將默認的圖標更改成更適合咱們應用程序的圖標。我已經建立好這個圖標，而且它位於C9Phone8\PetSounds_Assets文件夾中。本系列的素材能夠從下載本文檔或本視頻處一併得到。

ApplicationIcon.png就位於上述文件夾中：

我將從Windows資源管理器拖動該文件並將它釋放到項目中的Assets文件夾中。當執行該操做時，我將會看到一個對話框，它通知我已經存在一個同名文件：

咱們用新圖像文件替換掉老的文件。

接着，咱們須要替換Assets\Tiles子文件夾中的兩個圖像。我將在解決方案資源管理器中展開Tiles子文件夾覺得目標作好準備。

 在Windows資源管理器中，我將打開C9Phone8\PetSounds_Assets\Tiles子文件夾：

我將高亮顯示這兩個圖像文件並將它們拖放到解決方案資源管理器中的Tiles目標文件夾。您將會再次看到以下對話框：

1. 我選擇應用到全部項(Apply to all items)
2. 並選擇「是」

如今我已經在項目中更換了必要的文件。讓咱們回到WMAppManifest.xml文件，由於我已經用新文件替換掉了舊文件，我須要關閉WMAppManifest.xml並再次打開它以查看新的應用程序圖標：

在設置頁面更下面一點，我須要確認如下設置被選擇：

1. 將圖塊模板設置爲TemplateIconic
2. 選中支持大圖塊
3. 小圖塊圖像須要被設置
4. 中等圖塊圖像須要被設置

我將按F5運行應用程序以測試這些設置。應用程序一旦運行，在手機模擬器中單擊啓動按鈕(Windows圖標)，而後從右向左輕掃(單擊並按住鼠標按鈕的同時拖動鼠標光標)以看到按字母順序排列的應用程序列表並定位到咱們的PetSounds應用程序：

很是好！如今讓咱們單擊並按住該應用程序圖標直到出現一個顯示「固定到開始屏幕」和「卸載」選項的上下文菜單：

單擊「固定到開始屏幕」將把該應用程序添加到開始屏幕。單擊手機模擬器上的啓動按鈕並向下滾動以看到被固定的磁貼：

這是一個小小的細節，可是經過這個小小的更改應用程序感受更像一個合法的應用了。

2. 修改應用程序和頁面的標題

接着，咱們將更改應用程序和頁面的標題文本。在MainPage.xaml中定位到TitlePanel，它是由頁面模板默認添加的StackPanel：

咱們將進行如下的更改：

1. 將表明應用程序標題的text屬性更改成"PET SOUNDS"。咱們所有使用大寫，由於這是Window Phone應用程序中的約定。
2. 將表明頁面標題的text屬性更改成"animals"。咱們所有使用小寫字符，由於這也是Windows Phone應用程序的約定。

 結果是：

另外一項小小的樣式設置步驟，可是再次使得應用程序感受更合法。

3.理解綁定語法和靜態資源

默認方式下，第二個textbox的Style屬性被設置爲：

Style="{StaticResource PhoneTextTitle1Style}"

 

這須要進行一些解釋。首先，每當您在XAML中看到開始和結束大括號時，它被稱爲「綁定語法」。有兩種類型的綁定語法：

{StaticResource } –讓咱們從術語「資源」開始。資源是一個對象，這個對象能夠在您應用程序的不一樣位置被重複使用。資源的例子包括畫筆(brushes)和樣式(styles)。

http://msdn.microsoft.com/en-us/library/ms750613.aspx

我建立了一個簡單的稱爲XAMLResources的手機項目，我認爲它是最簡單的{StaticResource}示例了：

1. 我添加了一個<phone:PhoneApplicationPage>子元素以存放本地(更準確地說是頁面級)的資源。任何在這裏建立的畫筆或樣式僅在本頁面上可用，在其餘頁面上不可用。
2. 我建立了一個純色畫筆(SolidColorBrush)，我使用鍵值"MyBrush"引用它。
3. 我建立了一個樣式並用鍵值"MyButtonBackground"引用它。請注意目標類型(TargetType)被設置爲Button。這個樣式僅能應用於Button控件。在這個樣式內部，我能夠設置按鈕的單個屬性。我設置了Background屬性，並將它設置爲藍色(」Blue」)的純色畫筆(SolidColorBrush)。
4. 這裏我將Button的Background的屬性綁定到綁定在MyBrush上的值。
5. 這裏我將Button的style綁定到MyButtonBackground。

在這個過於簡單的例子中，使用這種方式進行賦值的好處並不會很明顯。當您的應用程序變得很大而且您但願在頁面上的控件之間保持一致的外觀，您將會發現這種方式很是方便。它使得XAML簡潔而緊湊。而且若是由於任何緣由您須要更改樣式或顏色，您能夠更改一次並讓更改傳播到它們被應用的任何位置。

這是運行的結果：

我在頁面建立這些資源意味着他們的使用範圍僅限於MainPage.xaml。若是我須要在整個應用中共享這些資源呢？在這種狀況下我會在App.xaml中的<Application.Resources>部分將它們定義爲系統資源：

4.探索主題資源(Theme Resources)

回到PetSounds項目，您可能想知道PhoneTextTitle1Style在哪裏定義的。實際上它是一個做爲Windows Phone操做系統主題資源一部分的「內置的樣式」：

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx

若是向下滾動頁面，您能夠看到Windows Phone應用程序中可用的文本樣式：

應該利用這些主題資源以使您的應用程序符合Windows Phone的風格。除非有合適的理由(如匹配您公司創建的品牌推廣元素)，不然不要匆忙地使用自定義的顏色、字體等內容。

值得注意的是許多這樣的樣式基於樣式，而樣式一樣也能夠基於其餘的樣式。這種可視化的繼承容許開發者避免重複屬性的設置，它很是像web開發中級聯樣式表的工做方式。

我以前說過在Windows Phone中有兩種類型的綁定表達式，第二種是{Binding }，它被用於將數據(一般是自定義類型的泛型列表，並將它們的屬性設置爲應用程序中咱們須要處理的數據)綁定到頁面元素。咱們將在本系列之後的課程中看到這種類型的綁定。

5.經過建立基於主題資源的樣式來自定義主題資源

讓咱們找點樂子。我以前說過您一般須要採用手機的主題資源。可是若是須要，咱們能夠編輯樣式。我認爲這樣作能夠提供有關一切是如何運做的額外的洞察力。

請確認您的光標位於Text屬性爲」animals」的TextBlock中。

在屬性窗口中導航到雜項部分並定位到Style屬性：

注意文本框周圍有一個綠色的邊框，而且右側的圖標被用相同的綠色填充。若是您單擊那個方框或文本框，您將看到一個上下文菜單：

咱們能夠在這裏更改綁定。事實上我會單擊「轉換爲本地值」。當我這樣作後，請注意Style屬性消失了。它變爲一個複雜屬性<TextBlock.Style>，而且其中包含一個<Style>定義：

正如您所看到的，當咱們從主題樣式轉換爲本地樣式，咱們看到了主題樣式定義的一部份內容，它基於PhoneTextBlockBase主題樣式，而且經過設置兩個附加的屬性：FontFamily 和FontSize對原樣式進行了重寫。它們兩個也被定義爲主題樣式。讓咱們重寫這些設置。

1. 將FontFamily設置爲"Verdana"
2. 將FontSize設置爲64

 這將產生如下結果：

接着讓咱們將樣式設置爲系統資源以使它在整個應用程序中可用。我將高亮顯示並剪切<TextBlock.Style> 和</TextBlock.Style>標記之間全部內容：

而後我將打開App.xaml文件：

並將它們粘貼到<Application.Resources>部分(見下面12至19行)。我還添加了一個屬性：

x:Name="MyTitleText":

如今我返回MainPage.xaml並用新的應用程序資源重寫TextBlock。

 而且結果應該沒有改變：

成功了!

回顧

綜上所述，本課的重點是如何設置應用程序的樣式並使它看上去更像Windows Phone上的應用程序，同時可以表達咱們的個性。咱們學會了如何修改WMAppManifest.xml文件以更改應用程序的圖標和磁貼，咱們更改了應用程序的標題和頁面的標題，並學會了如何在Windows Phone中綁定到像主題資源(Themed Resources)這樣的靜態資源(StaticResources)，以及如何建立基於主題資源的本地和系統資源等內容。