导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

如何应用 Windows Phone 的主题资源

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

主题是一组资源,用于个性化 Windows Phone 手机上的可视元素。主题可以确保在 Windows Phone 应用程序间显示一致的控件和 UI 元素。本主题介绍如何创建使用主题资源并以编程形式确定主题背景和强调色的应用程序。有关使用主题资源的更多信息,请参见 Windows Phone 主题

本主题包括以下部分。

 

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

        <!--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 上,将以下代码名添加在名为 ContentPanelGrid 中。

                <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 上,将以下代码添加在名为 ContentPanelGrid 内的矩形下。

                <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 标记应用于 FontFamilyFontSize 属性。已将 TextBlock 文本设置为字体 PhoneFontFamilySemiLight (Segoe WP SemiLight) 和字体大小 PhoneFontSizeLarge (32)。有关资源定义的更多信息,请参见 Windows Phone 主题资源

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

                <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 文本颜色发生更改。

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

说明注意:

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

确定主题背景

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

            // 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";
            }
    
    

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

确定主题强调色

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

            // 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 语句向 textBlock2Text 属性分配友好名称。

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

测试应用程序

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

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

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

    THEME_ResourcesHowTo

显示:
© 2015 Microsoft