首页 > 代码库 > 应用主题资源

应用主题资源

主题概述


当用户在手机的“设置”菜单中启用系统范围的主题时,仅应用程序中与主题相关的颜色会发生更改。字体和控件大小不会发生更改。例如,如果用户在主题设置页面上将强调色设置为紫色,则在应用程序中,只有使用相应资源画笔配置的 UI 元素会更改为紫色。

说明注意:

如果在选择其他主题时,您的应用程序处于休眠状态,则在下次启动主题之后,应用程序才会适应新主题。

下面的图像显示在本主题中创建的应用程序如何适应主题更改。

THEME_ResourcesHowTo

 

从左到右,此图像显示背景为“深”并且强调色为“红”的应用程序。在“设置”页上,选择“主题”以打开“主题”页。在“主题”页上,将主题更改为“浅”背景和“mango”强调色。当再次启动该应用程序时,它会反映新的主题设置。

应用主题资源

在此步骤中,创建该应用程序,设置该应用程序和页面标题,并添加一个矩形和两个 texBlock 控件。每个控件都演示一种使用主题资源的不同技术。

准备应用程序

  1. 在 Visual Studio 中,通过选择“文件” | “新建项目”菜单命令创建新的项目。

  2. 将显示“新建项目”窗口。展开“Visual C#”模板,然后选择“Windows Phone”模板。

  3. 选择 Windows Phone 应用 模板。用您选择的名称填写“名称”框。

  4. 单击“确定”。将显示 Windows Phone 平台选择对话框。

  5. “Windows Phone 目标版本”菜单中,确保已选择 Windows Phone OS 7.1。

  6. 单击“确定”。将创建一个新的项目,并且“MainPage.xaml”将在 Visual Studio 设计器窗口中打开。

  7. MainPage.xaml 中,使用以下代码替换名为 LayoutRoot 的网格。

    XAML
    复制
        <!--LayoutRoot is the root grid where all page content is placed-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <!--TitlePanel contains the name of the application and page title-->        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">            <TextBlock x:Name="ApplicationTitle" Text="THEME RESOURCES" Style="{StaticResource PhoneTextNormalStyle}"/>            <TextBlock x:Name="PageTitle" Text="example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>        </StackPanel>        <!--ContentPanel - place additional content here-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">        </Grid>    </Grid>

应用主题资源

  1. MainPage.xaml 上,将以下代码名添加在名为 ContentPanel 的 Grid 中。

    XAML
    复制
                <Rectangle                 Height="100"                 HorizontalAlignment="Left"                 Margin="12,33,0,0"                 Name="rectangle1"                 Stroke="{StaticResource PhoneForegroundBrush}"                 StrokeThickness="1"                 VerticalAlignment="Top"                 Width="200"                 Fill="{StaticResource PhoneAccentBrush}" />

    此代码会在该页面的左上角部分创建一个矩形。注意 Fill 属性以及它如何使用 StaticResource 标记来指定名为 PhoneAccentBrush 的资源画笔。此特殊画笔允许矩形颜色响应系统范围的主题更改。例如,如果用户在手机设置菜单中修改强调色,则矩形将更改为该颜色。

  2. MainPage.xaml 上,将以下代码添加在名为 ContentPanel 的 Grid 内的矩形下。

    XAML
    复制
                <TextBlock                 Height="45"                 HorizontalAlignment="Left"                 Margin="20,154,0,0"                 Name="textBlock1"                 Text="background ="                 VerticalAlignment="Top"                 Width="400"                 FontFamily="{StaticResource PhoneFontFamilySemiLight}"                 FontSize="{StaticResource PhoneFontSizeLarge}"/>

    此代码会创建一个 TextBlock 控件(名为 textBlock1),该控件位于矩形下方。已将 StaticResource 标记应用于 FontFamily 和 FontSize 属性。已将 TextBlock 文本设置为字体 PhoneFontFamilySemiLight (Segoe WP SemiLight) 和字体大小 PhoneFontSizeLarge (32)。有关资源定义的更多信息,请参见 Windows Phone 主题资源。

  3. MainPage.xaml 上,将以下代码添加在名为 ContentPanel 的 Grid 内的 textBlock1 下。

    C#
    复制
                <TextBlock                 Height="35"                 HorizontalAlignment="Left"                 Margin="21,205,0,0"                 Name="textBlock2"                 Text="accent color = "                 VerticalAlignment="Top"                 Width="400"                 Style="{StaticResource PhoneTextAccentStyle}"/>

    此代码会创建第二个 TextBlock(名为 textBlock2),并应用样式资源 (PhoneTextAccentStyle)。此主题资源应用字体 (PhoneFontFamilySemiBold)、字体大小 (PhoneFontSizeNormal) 和前景 (PhoneAccentBrush)。当启动系统范围主题时,手机强调画笔将导致 TextBlock 文本颜色发生更改。

确定主题背景和强调色

主题背景和强调色可用作当前应用程序资源。在本节中,PhoneDarkThemeVisibility 和 PhoneAccentColor 资源分别用于确定主题背景和强调色。

说明注意:

通过访问本节演示的当前应用程序对象,基于 XNA Framework 的 Windows Phone 应用程序可以使用主题资源。有关可用主题资源的更多信息,请参见 Windows Phone 主题资源。

确定主题背景

  • 在主页的代码隐藏文件 MainPage.xaml 中,在 MainPage 构造函数的 InitializeComponent 调用下添加以下代码。

    C#
    VB
    复制
            // Determine the visibility of the dark background.        Visibility darkBackgroundVisibility =             (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];        // Write the theme background value.        if (darkBackgroundVisibility == Visibility.Visible)        {            textBlock1.Text = "background = dark";        }        else        {            textBlock1.Text = "background = light";        }

    此代码演示如何从应用程序资源设置中确定当前主题背景。它确定当前主题使用的背景类型并将其写入到 textBlock1 的 Text 属性。

确定主题强调色

  • MainPage.xaml 中,在 MainPage 构造函数中刚刚添加的代码下添加以下代码。

    C#
    VB
    复制
            // Determine the accent color.        Color currentAccentColorHex =             (Color)Application.Current.Resources["PhoneAccentColor"];        string currentAccentColor = "";        switch (currentAccentColorHex.ToString())        {            case "#FF1BA1E2": currentAccentColor = "blue"; break;            case "#FFA05000": currentAccentColor = "brown"; break;            case "#FF339933": currentAccentColor = "green"; break;            case "#FFE671B8": currentAccentColor = "pink"; break;            case "#FFA200FF": currentAccentColor = "purple"; break;            case "#FFE51400": currentAccentColor = "red"; break;            case "#FF00ABA9": currentAccentColor = "teal (viridian)"; break;            // Lime changed to #FFA2C139 in Windows Phone OS 7.1.            case "#FF8CBF26":             case "#FFA2C139": currentAccentColor = "lime"; break;            // Magenta changed to # FFD80073 in Windows Phone OS 7.1.            case "#FFFF0097":             case "#FFD80073": currentAccentColor = "magenta"; break;            // #FFF9609 (previously orange) is named mango in Windows Phone OS 7.1.            case "#FFF09609": currentAccentColor = "mango (orange)"; break;            // Mobile operator or hardware manufacturer color            default: currentAccentColor = "custom eleventh color"; break;        }        // Write the current accent color.        textBlock2.Text = "accent color = " + currentAccentColor;

    此代码演示如何从应用程序主题资源中确定强调色。它确定强调色值,然后使用 switch/case 语句向 textBlock2 的 Text 属性分配友好名称。

测试应用程序

在本节中,应用程序在主题背景和强调色更改之前和之后运行。

测试应用程序

  1. 通过选择“调试 | 启动调试”菜单命令运行应用程序。这将打开模拟器窗口并启动该应用程序。在屏幕上,应会看到 Rectangle 和两个 TextBlock 控件。Rectangle 的颜色应该与当前系统主题相匹配,两个文本块应该应用不同的字体和字体大小。此外,请注意第二个 TextBlock 的文本颜色与当前系统主题相匹配,因为对前景应用了 PhoneAccentBrush。

  2. 更改主题背景和强调色。在“开始”屏幕中,滑动至“应用程序”列表,然后点按“设置”。从“设置”屏幕中,点按“主题”,然后选择其他背景和强调色。

  3. 再次启动该应用程序并查看它如何适应新的主题。下面的图像演示本节中执行的步骤。

    THEME_ResourcesHowTo

应用主题资源