在Windows 8 XAML實例教程中，曾經提及過應用風格設計方法以及如何創建可複用樣式代碼。本篇將深入討論如何創建自定義Windows8應用風格。
隨着計算機硬件性能的提升，用戶對於軟件應用的體驗性要求越來越高，而應用的風格設計也成爲衡量應用成功與否的一個標準。
模板樣式基礎
在XAML實例教程中曾介紹過，Windows8樣式應用可以根據應用範圍不同進行分類，
1. 局部資源(Page Resources)，該樣式模板代碼位於當前頁面中，其效果僅有效於當前頁面，其基本語法格式如下：
<Page.Resources>
<資源定義 />
</Page.Resources>
2. 全局資源(Resources Dictionary)，該樣式模板代碼位於資源字典文件中，其效果可以被應用於整個項目，其基本語法格式如下：
對比兩者，第二種方法更加有利於資源樣式代碼的重複利用以及代碼維護，所以微軟推薦開發人員儘量使用全局資源的方式定義項目樣式。
模板樣式調用
無論使用以上任何一種樣式聲名方法，其調用方法是相同的，代碼如下：
<TextBlock Style="{StaticResource PageHeaderTextStyle}"/>
其中PageHeaderTextStyle是模板樣式名稱。
Windows 8默認應用模板樣式
在實際項目開發中，微軟建議開發和設計人員基於微軟默認樣式模板創建或者修改應用樣式，使用Visual Studio提供的默認模板樣式創建Windows8項目，然後根據項目需求創建佈局控件以及交互控件，創建邏輯代碼等。
本篇將使用Visual C# - Windows Store - Split App(XAML)模板做爲演示。
首先使用Visual Studio 2012創建一個項目，
Visual Studio自動生成項目結構，其中包括簡單頁面代碼以及基本樣式代碼。
默認項目模板樣式代碼都在StandardStyles.xaml文件中，
默認樣式代碼生成的應用界面如下：
下面我們將進行簡單修改應用樣式，生成新的應用界面如下：
首先修改應用名稱，在ItemsPage.xaml頁面中，Text="{StaticResource AppName}"嘗試從App.xaml中調用應用名稱，
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
在App.xaml中修改，
<x:String x:Key="AppName">Windows Store Controls</x:String>
然後進入StandardStyles.xaml文件，通過快速瀏覽可以發現代碼中有許多相關注釋代碼，例如：
開發人員可以根據需求查找對應控件樣式代碼進行修改。
在StandardStyles.xaml文件中搜索"LayoutRootStyle"，該樣式名是控制佈局頁面根樣式代碼，
<Style x:Key="LayoutRootStyle" TargetType="Panel"> <Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/> <Setter Property="ChildrenTransitions"> <Setter.Value> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Setter.Value> </Setter> </Style>
在代碼中，應用背景是由ApplicationPageBackgroundThemeBrush定義，爲了修改應用背景，首先在項目中查找ApplicationPageBackgroundThemeBrush資源，通過搜索可以發現，在默認模版項目中，沒有ApplicationPageBackgroundThemeBrush資源定義代碼，這是因爲Windows Store應用默認風格資源是定義保存在本地目錄中， ..\(Program Files)\windows kits\8.0\Include\winrt\xaml\design 目錄，
根據微軟的建議，我們不需要直接修改默認風格資源，而只需要在當前StandardStyles.xaml文件中重新定義ApplicationPageBackgroundThemeBrush即可替換默認模板風格。
在StandardStyles.xaml文件中添加以下代碼：
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#018297"/>
在完成應用背景修改後，我們可以根據上面所訴方法，重新定義應用字體樣式，鼠標樣式以及默認按鈕樣式等，添加以下代碼到StandardStyles.xaml文件，
<SolidColorBrush x:Key="ApplicationForegroundThemeBrush" Color="#FFFFFF"/> <SolidColorBrush x:Key="ApplicationSecondaryForegroundThemeBrush" Color="#FF991100"/> <SolidColorBrush x:Key="ApplicationPointerOverForegroundThemeBrush" Color="#AAAAAA"/> <SolidColorBrush x:Key="BackButtonBackgroundThemeBrush" Color="#00000000"/> <SolidColorBrush x:Key="BackButtonForegroundThemeBrush" Color="#FFFFFF"/> <SolidColorBrush x:Key="BackButtonPressedBackgroundThemeBrush" Color="#00000000"/> <SolidColorBrush x:Key="BackButtonPressedForegroundThemeBrush" Color="#CCCCCC"/> <SolidColorBrush x:Key="BackButtonPointerOverBackgroundThemeBrush" Color="#00000000"/> <SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="#306772"/>
修改Tiles磁片樣式，從ItemPage.xaml中可以看到，ListView是承載磁片綁定數據的控件，其資源樣式模板使用的Standard80ItemTemplate,
<ListView x:Name="itemListView" AutomationProperties.AutomationId="ItemsListView" AutomationProperties.Name="Items" TabIndex="1" Grid.Row="1" Visibility="Collapsed" Margin="0,-10,0,0" Padding="10,0,0,60" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{StaticResource Standard80ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"/>
通過在StandardStyles.xaml文件中搜索Standard80ItemTemplate，可以發現模板是通過圖片的形式控制Tile的背景，所以，我們可以通過修改圖片的方式修改Tile的背景效果，
<DataTemplate x:Key="Standard80ItemTemplate">
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
在項目的Assets目錄下，可以找到相關背景圖片，根據需求，我將修改好的圖片複製覆蓋到當前目錄，
在編譯運行項目前，需要對啓動屏幕進行簡單的背景設置，在項目目錄中，雙擊”package.appxmanifest“，即可進入應用裝配列表窗口，
在該窗口，點擊”Splash Screen“，在”Background color“中設置背景代碼”#018297“
編譯運行項目，應用界面效果如下：
以上是本篇實例，簡單介紹如何創建自定義應用風格。大家可以根據該方法擴展修改具體控件樣式模板和風格，相關內容將在後文創建自定義控件時介紹。
 |
實例源代碼下載 |
這裏推薦一款由國人開發的優秀開源Windows8控件主題 - Sugar UI
SugarUI專爲開發者設計；該套裝包含Sweet和Solid兩組自定義控件樣式以及一組增強控件。兩組控件樣式充滿個性且不失Windows Store App的風格；亮暗兩版隨意切換，適用於各種配色方案。一組增強控件提供了針對一些常用功能的支持，節省了開發時間；UI視覺新穎、適配性強；交互形式流暢、創新、用戶體驗優秀。
控件支持網站：http://www.redsafi.com/sugarui/index_cn.html
最新版源代碼下載：https://github.com/RedSafi-UX/SugarUI
Sugar UI 源代碼本地下載
歡迎大家留言討論學習Windows 8應用開發，希望能夠看到更多優秀的Windows store應用。
歡迎大家加入QQ技術羣，一起學習討論Windows 8&Silverlight&WPF&Widnows Phone開發技術。
22308706(一羣) 超級羣500人
37891947(二羣) 超級羣500人
100844510(三羣) 高級羣200人
32679922(四羣) 超級羣500人
23413513(五羣) 高級羣200人
32679955(六羣) 超級羣500人
88585140(八羣) 超級羣500人
128043302(九羣 企業應用開發推薦羣) 高級羣200人
101364438(十羣) 超級羣500人