Windows 8 應用開發：自訂應用程式風格與主題完整指南

前言

優秀的視覺設計是應用程式成功的關鍵因素。Windows 8 提供豐富的樣式系統，讓開發者能建立符合品牌識別的獨特介面。本文以 Split App 範本為例，示範如何覆寫預設樣式、建立全域資源字典、自訂色彩主題與控制項樣板。

樣式資源範圍與管理

1. 頁面資源 - 區域性樣式

<Page.Resources>
    <!-- 僅在當前頁面有效 -->
    <SolidColorBrush x:Key="MyBrush" Color="#FF0000" />
</Page.Resources>

2. 資源字典 - 全域共用樣式 (推薦)

<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="MyBrush" Color="#FF0000" />
</ResourceDictionary>

在 App.xaml 合併全域資源：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Common/StandardStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

樣式套用語法

<TextBlock Style="{StaticResource PageHeaderTextStyle}" />

實戰：修改 Split App 範本風格

步驟 1：建立專案並檢視預設結構

Visual Studio 2012 → Visual C# → Windows Store → Split App (XAML)

預設樣式集中在 Common/StandardStyles.xaml

步驟 2：覆寫系統預設色彩筆刷

Windows 8 系統色彩定義於 Program Files\Windows Kits\8.0\Include\winrt\xaml\design，不建議直接修改，而是在 StandardStyles.xaml 重新定義同名 Key 來覆寫：

<!-- 主背景色 -->
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#018297"/>

<!-- 文字前景色 -->
<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"/>

<!-- ListView 佔位符背景 -->
<SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="#306772"/>

步驟 3：修改應用程式名稱

在 App.xaml 定義：

<x:String x:Key="AppName">Windows Store Controls</x:String>

頁面中引用：

<TextBlock Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>

步驟 4：自訂 Tile/磚塊樣板

搜尋 Standard80ItemTemplate，修改資料樣板：

<DataTemplate x:Key="Standard80ItemTemplate">
    <Grid Margin="6">
        <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 目錄下的預設圖片替換為自訂設計圖片。

步驟 5：設定啟動畫面背景

雙擊 Package.appxmanifest → 啟動畫面 → 背景顏色設為 #018297，與主題色一致。

修改前後對比

最佳實務建議

1. 集中管理：所有樣式集中在 StandardStyles.xaml 或獨立資源字典
2. 語意化命名：使用 BrandPrimaryBrush 而非 BlueBrush
3. 繼承系統樣式：基於 BasedOn 擴充而非完全重寫
4. 設計時預覽：善用 Blend for Visual Studio 進行視覺化編輯
5. 高對比度支援：提供 HighContrast 版本資源

原始碼下載：查看本欄目