应用主题资源

主题概述

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

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

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

从左到右，此图像显示背景为“深”并且强调色为“红”的应用程序。在“设置”页上，选择“主题”以打开“主题”页。在“主题”页上，将主题更改为“浅”背景和“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. 再次启动该应用程序并查看它如何适应新的主题。下面的图像演示本节中执行的步骤。