天天看點

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我 們已經學習了XAML布局和事件基礎,接下來讓我們做些有趣的事情,我們将通過給應用程式添加樣式來賦予它一些獨特的特征,顯然我們需要按照微軟的向導以 便我們能讓我們的應用看起來像Windows Phone 8生态系統的一部分,但是我們任然有許多自由在個性化應用程式上面。

我們這節課的計劃:

1、我們将改變應用在手機應用清單和首頁的icon圖示;

2、我們将通路使用者手機的主題顔色并應用在應用程式中,同時我們也将學習到一些重要的XAML文法——綁定;

3、最後我們将讨論關于樣式重用。

一、改變ICON

這節課的第一個任務是改變應用程式圖示,我們将在按字母順序的應用程式清單和開始頁面看到他如果我們Pin了我們的應用圖示到首頁,首先我們展開我們項目中Properties檔案夾節點:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

當你輕按兩下打開這個檔案的時候你可以看到一個特别的視窗,這個視窗提供了很多選項來影響我們的應用程式,例如在第一個頁籤“應用程式界面”我們能改變應用的預設名字和應用圖示等:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們使用一個更适合這個應用的圖示來改變它的預設圖示,我已經建立了這個圖示在C9Phone8\PetSounds_Assets檔案夾下面。

在檔案夾中是Application.png

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們拖拽這個圖示到我們項目的Assets檔案夾,我們将會看到一個提示一個同名的檔案已經存在:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們用新圖示替換舊圖示

接下來我們将替換在Assets\Tiles檔案夾中的兩個子檔案,我已經看到了這個目标在解決方案視窗中。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

在windows視窗中是在C9Phone8\PetSounds_Assets\Tiles檔案夾中:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們同樣拖拽他們到目标檔案夾中,同樣你會看到剛剛的提示視窗。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

1、勾選應用所有項目

2、點選确定

現在我已經替換了這些主要的磁貼檔案,讓我們回到WMAppMainfest.xaml檔案,因為我們使用新檔案替換了就檔案是以我們需要重新打開這個檔案來看我們的新檔案。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

繼續往下翻這個設定檔案,我們确定下面的選項:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

1、圖塊模版選擇TemplateIconic

2、選擇支援大磁貼

3、小圖示已經設定

4、中等圖示已經設定

為了測試這些設定,我們(或者按F5)運作這個應用,在模拟器中我們點選手機的開始按鈕,然後(按住滑鼠)從右向左滑動在字母順序清單中找到我們的PetSounds應用.

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們點選并按住這個圖示知道彈出一個包含固定到開始螢幕和解除安裝的菜單。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

點選固定到開始菜單,點選模拟器的Home鍵我們将看到:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

這是一個很小的細節,我們通過設定一點點改變就可以看到它基本上符合我們的應用。

二、修改應用和頁面标題

接下來我們将改變應用和頁面的标題,在MainPage.xaml定位到TitlePanel,這個StackPanel通過頁面的預設模版添加了預設的标題:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們将作如下改變:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

1、使用應用标題“PET SOUNDS”改變應用标題Text屬性,我們全部使用大寫(caps)因為它是Windows Phone應用的常用手法。

2、使animals替代頁面标題,我們全部使用小寫因為他也是常用的。

結果顯示:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

僅僅使用了一點點樣式就更看起來像一個應用。

三、了解綁定文法和靜态資源

textbox的Style屬性是預設設定成

Style="{StaticResource PhoneTextTitle1Style}"

我們将花點時間解釋,首先你随時可以在XAML中看到大括号,他們就是綁定文法,有兩種類型的綁定文法:

1、{StaticResource }讓我們從裡面的resource開始,一個資源是一個在應用程式中能重用的對象,例如brush和style

<a href="http://msdn.microsoft.com/en-us/library/ms750613.aspx" target="_blank">http://msdn.microsoft.com/en-us/library/ms750613.aspx</a>

我們建立一個我能想到的一個最簡單的關于{StaticResource }的項目XAMLResources。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

1、添加一個在&lt;phone:PhoneApplicationPage&gt;下面的子元素,任何brush和style隻能用于這個頁面不能用于其它頁面。

2、我建立了一個SolidColorBrush并且我能通過鍵值MyBrush引用他。

3、 我建立了一個Style我能通過鍵MyButtonBackground來引用,注意我們設定了TargetType=Button,意思是這個 Style隻能用于Button,在這個style中我能設定button獨有的屬性,我設定了Background=Blue。

4、建立Button并将Background屬性綁定到MyBrush

5、建立Button的Style屬性綁定到MyButtonBackground。

在這個簡單的應用中你可能還不能發現這樣寫的價值,但是當你的應用程式特别大的時候你想保持頁面上的所有控件有一個統一的外觀你就可以發現了。它保持XAML簡單和緊湊,當你想改變Style的時候你會發現在所有應用了這個style的地方都會改變。

這是結果:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

我們在頁面中建立了本地資源,意思是我們隻能在這個頁面中使用這個資源,但是我們怎樣才能在整個程式中使用呢?在下面的例子中,我将在App.xaml檔案的&lt;Application.Resources&gt; 位置定義主題作為一個系統資源。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

四、探索主題資源

現在讓我們回到PetSounds項目,你可能想知道PhoneTextTitle1Style樣式在哪裡定義的,的确他是一種内嵌的樣式,作為Windows Phone作業系統主題資源的一部分。

<a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552%28v=vs.105%29.aspx" target="_blank">http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx</a>

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

如果你往下滾動這個頁面你将看到可用于Windows Phone應用的樣式。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

這些主題應該被利用到windows PHone應用程式中,你應該盡量避免使用自定義的顔色字型等樣式除非你有一個好的理由,(例如你公司的品牌元素)。

值得注意的是有很多樣式是繼承其他樣式的。這種可視化的繼承是允許開發者避免重複建立一些公用的屬性,這看起來很像css在web開發中。

我開始說過有兩種綁定方式,第二種是{Binding }它用于頁面元素綁定資料(即通常一些自定義類型的資料清單),我們将在後面的課程中看到。

五、自定義主題資源通過建立一個繼承樣式

現在讓我們做些有趣的事情,按照我前面說的,你一般應該堅持使用Windows Phone的主題資源,但是我們也能自己建立一個我們想要的樣式,我認為這樣能提供一個或多個視覺。

確定滑鼠的光标是在一個Text設定為animals的TextBlock上。

在屬性視窗導航到雜項區域,并且找到Style屬性。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

注意你将看到style後面的textbox周圍是綠色的并且後面的圖示也是綠色的,如果你點選右邊的小正方形,你将會看到下面的菜單:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

在這裡我們能改變綁定,實際,我将選擇“轉換到本地值”,當我們這樣做了後,你會發現style屬性值不見了取而代之的是用一個定義在&lt;style&gt;的複雜屬性設定&lt;TextBlock.Style&gt;的值。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

正如你看到的我們能将系統主題樣式轉換成本地樣式,我盟能看到在主題樣式中的定義,它是基于PhoneTextBlockBase主題樣式,并且通過設定兩個額外的屬性FontFamily和FontSize重寫了繼承樣式,使用這兩個定義我們重寫樣式:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

1、設定FontFamily為Verdana

2、設定FontSize為64

這效果如下:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

接下來我們将這個樣式成為一個全局可用的系統資源,我将&lt;TextBlock.Style&gt;和&lt;/TextBlock.Style&gt;之間的代碼剪切。

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

然後打開App.xaml檔案

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

粘貼在&lt;Application.Resources&gt;區域(12到19行)我們也添加一個屬性x:Name="MyTitleText":

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

現在我能傳回到MainPage.xaml檔案并且用新的應用程式資源重寫TextBlock:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

最後這效果應該是不會改變的:

菜鳥學Windows Phone 8開發(4)——設定應用程式樣式

成功。

回顧

快 速回顧下,這節課我們最大的收獲就是學習了如何給我們的應用添加樣式,讓他看起來更像Windows Phone應用但是我們也能表達我們自己的個性。我們學習了如何修改WMAppMainfest.xml檔案來修改我們應用的圖示和标題。我們改變了應用 的标題和頁面的标題,學習了如何像Windows Phone的主題資源樣綁定靜态資源,以及如何建立基于主題資源的本地和系統資源等等。

繼續閱讀