背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource

[源码下载]

背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource

作者：webabcd

介绍
背水一战 Windows 10 之 资源

• StaticResource
• ThemeResource

示例
1、演示“StaticResource”相关知识点
Resource/StaticResourceDemo.xaml

<Page
    x:Class="Windows10.Resource.StaticResourceDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Resource"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    xmlns:common="using:Windows10.Common">

    <!--
        定义各种类型的 StaticResource（Resources 属性来自 FrameworkElement）
        系统会在加载 xaml 的时候去查找并应用 StaticResource 指定的资源
        StaticResource 需要先定义后引用，比如如果把下面这段 Page.Resources 代码放到 Grid 后面去定义，那么就会报错
    -->
    <Page.Resources>
        <x:String x:Key="MyString">StaticResource 经常用于指定 Style 或 ControlTemplate 资源，参见 /Controls/UI 部分</x:String>
        <x:Double x:Key="MyDouble1">24</x:Double>
        <x:Double x:Key="MyDouble2">48</x:Double>
        <Thickness x:Key="MyThickness">20,20,20,20</Thickness>
        <common:Employee x:Key="CurrentEmployee" Name="wanglei" Age="35" IsMale="True"></common:Employee>

        <!--静态资源也可以用来定义控件-->
        <Flyout x:Key="MyFlyout">
            <StackPanel>
                <TextBlock Text="我是 Flyout 中的内容" />
            </StackPanel>
        </Flyout>
    </Page.Resources>

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                下面演示 StaticResource 的使用方法
            -->

            <!--
                StaticResource 的 3 种引用方式
            -->
            <TextBlock Name="textBlock0" Margin="5" Text="{StaticResource MyString}" />
            <TextBlock Name="textBlock1" Margin="5" Text="{StaticResource ResourceKey=MyString}" />
            <TextBlock Name="textBlock2" Margin="5">
                <TextBlock.Text>
                    <StaticResource ResourceKey="MyString" />
                </TextBlock.Text>
            </TextBlock>

            <TextBlock Name="textBlock3" Margin="5" FontSize="{StaticResource MyDouble1}" Text="我是 TextBlock">
                <!--
                    Style 或 ControlTemplate 内都可以引用静态资源
                -->
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Setter Property="Padding" Value="{StaticResource MyThickness}" />
                    </Style>
                </TextBlock.Style>
            </TextBlock>

            <!--
                动态改变引用的资源
            -->
            <Button Name="btnChangeStaticResource" Content="改变引用的 StaticResource" Margin="5" Click="btnChangeStaticResource_Click" />

            <!--
                设置 FrameworkElement 的 DataContext 为一个指定的静态资源
            -->
            <TextBlock Margin="5" DataContext="{StaticResource CurrentEmployee}" Text="{Binding Name}" />
            <TextBlock Margin="5" DataContext="{StaticResource CurrentEmployee}" Text="{Binding Age}" />
            <TextBlock Margin="5" DataContext="{StaticResource CurrentEmployee}" Text="{Binding IsMale}" />

            <!--
                引用指定的静态资源（此静态资源是一个控件）
            -->
            <Button Margin="5" Content="按我弹出 Flyout" Flyout="{StaticResource MyFlyout}" />

            <!--
                如果一个 FrameworkElement 要引用内部 Resources 的话，像下面这么写是会报错的，因为资源被先引用后定义了
            -->
            <!--
            <TextBlock Margin="5" Text="我是 TextBlock" Foreground="{StaticResource MyTextBlockForeground}">
                <TextBlock.Resources>
                    <SolidColorBrush x:Key="MyTextBlockForeground" Color="Red" />
                </TextBlock.Resources>
            </TextBlock>
            -->

            <!--
                如果一个 FrameworkElement 要引用内部 Resources 的话，需要像下面这么写（资源先定义后引用）
            -->
            <TextBlock Margin="5" Text="我是 TextBlock">
                <TextBlock.Resources>
                    <SolidColorBrush x:Key="MyTextBlockForeground" Color="Red" />
                </TextBlock.Resources>
                <TextBlock.Foreground>
                    <StaticResource ResourceKey="MyTextBlockForeground" />
                </TextBlock.Foreground>
            </TextBlock>

        </StackPanel>
    </Grid>
</Page>

Resource/StaticResourceDemo.xaml.cs

/*
 * 演示“StaticResource”相关知识点
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Resource
{
    public sealed partial class StaticResourceDemo : Page
    {
        public StaticResourceDemo()
        {
            this.InitializeComponent();
        }

        private void btnChangeStaticResource_Click(object sender, RoutedEventArgs e)
        {
            // 获取 Application 中的资源
            // (double)Application.Current.Resources["MyDouble1"];

            // 获取关联 xaml 内的资源（本例中的资源定义在 xaml 中的 Page 下，所以用 this.Resources[""] 来获取）
            if (textBlock3.FontSize == (double)this.Resources["MyDouble1"])
            {
                // 引用指定的资源
                textBlock3.FontSize = (double)this.Resources["MyDouble2"];
            }
            else
            {
                textBlock3.FontSize = (double)this.Resources["MyDouble1"];
            }
        }
    }
}

2、演示“ThemeResource”相关知识点
Resource/ThemeResourceDemo.xaml

<Page
    x:Class="Windows10.Resource.ThemeResourceDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Resource"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!--
        ThemeResource 与 StaticResource 的区别是：ThemeResource 在运行时会根据主题的变化而重新计算
    -->

    <!--
        默认的主题资源的相关定义在如下位置（以我的开发环境为例）
        1、C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\generic.xaml
        2、C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\themeresources.xaml

        注：默认的主题资源不会复制到应用程序中，这些资源字典在内存中作为 Windows 运行时本身的一部分存在
    -->

    <Page.Resources>

        <ResourceDictionary>
            <!--
                通过 ResourceDictionary 内的 ResourceDictionary.ThemeDictionaries 内的 ResourceDictionary 来定义不同主题的资源
                在资源中定义的主题分为 3 种："Light", "Dark" 和 "HighContrast"，其中 High Contrast（高对比度模式） 不常用，就不详细介绍了
            -->
            <ResourceDictionary.ThemeDictionaries>

                <!--
                    Default 主题，对应 ElementTheme.Dark 或 ApplicationTheme.Dark
                -->
                <ResourceDictionary x:Key="Default">
                    <!--
                        这里摘自 themeresources.xaml 中的部分定义，如果要覆盖其中的定义就自己再定义同名资源即可
                    -->
                    <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FF000000" />
                    <SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="{ThemeResource SystemAccentColor}" />

                    <!--
                        这是系统级资源，不在 themeresources.xaml 内，其含义是在“设置”->“个性化”->“颜色”中选择的主题色，当然也可以这样重新定义
                    -->
                    <Color x:Key="SystemAccentColor">#FFFF0000</Color>
                </ResourceDictionary>

                <!--
                    HighContrast 主题，不常用，就不详细介绍了
                -->
                <ResourceDictionary x:Key="HighContrast">
                    <!--
                        这里摘自 themeresources.xaml 中的部分定义，其引用的一些颜色资源来自系统级，比如 SystemColorWindowColor 或 SystemColorButtonFaceColor 之类的，他们不在 themeresources.xaml 内
                        比如在“设置”->“轻松使用”->“高对比度”中目前可以设置 4 中不同的高对比度主题，每一种对应的颜色资源都不一样
                    -->
                    <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="{ThemeResource SystemColorWindowColor}" />
                    <SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="{ThemeResource SystemColorButtonFaceColor}" />
                </ResourceDictionary>

                <!--
                    Light 主题，对应 ElementTheme.Light 或 ApplicationTheme.Light
                -->
                <ResourceDictionary x:Key="Light">
                    <!--
                        这里摘自 themeresources.xaml 中的部分定义，如果要覆盖其中的定义就自己再定义同名资源即可
                    -->
                    <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FFFFFFFF" />
                    <SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="{ThemeResource SystemAccentColor}" />

                    <!--
                        这是系统级资源，不在 themeresources.xaml 内，其含义是在“设置”->“个性化”->“颜色”中选择的主题色，当然也可以这样重新定义
                    -->
                    <Color x:Key="SystemAccentColor">#FF00FF00</Color>
                </ResourceDictionary>

            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>

    </Page.Resources>

    <Grid Background="Transparent">

        <StackPanel Name="panel" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10 0 10 10">

            <TextBlock Margin="5" Name="lblMsg" Foreground="Blue"  />

            <TextBlock Margin="5" Text="Microsoft HoloLens全息眼镜由Microsoft 公司于北京时间2015年1月22日凌晨与Window10同时发布。" Foreground="Blue" />

            <StackPanel Width="200" Height="100" Margin="5" HorizontalAlignment="Left" Background="{ThemeResource SystemControlBackgroundAccentBrush}" />

            <!--动态变换主题，引用的主题资源会重新计算-->
            <Button Name="btnChangeTheme" Click="btnChangeTheme_Click" Margin="5">变换主题</Button>

        </StackPanel>

    </Grid>
</Page>

Resource/ThemeResourceDemo.xaml.cs

/*
 * 演示“ThemeResource”相关知识点
 *
 *
 * 1、主题共有两种类别：Light 和 Dark，子会继承父的主题类别
 * 2、Application 级别指定 Theme 的话，在 App.xaml 中做如下声明 <Application RequestedTheme="Dark"></Application>
 * 3、FrameworkElement 级别指定 Theme 的话，则指定 FrameworkElement.RequestedTheme 即可
 *
 *
 * Application.Current.RequestedTheme - 获取或设置 Application 级别的主题（ApplicationTheme 枚举：Light, Dark）
 * FrameworkElement.RequestedTheme - 获取或设置 FrameworkElement 级别的主题（ElementTheme 枚举：Default, Light, Dark）
 * 注：ElementTheme 比 ApplicationTheme 多了一个 Default，其含义是当 ElementTheme 为 Default 时，其实际主题为 application 级主题
 */

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Resource
{
    public sealed partial class ThemeResourceDemo : Page
    {
        public ThemeResourceDemo()
        {
            this.InitializeComponent();

            DisplayMessage();
        }

        private void DisplayMessage()
        {
            // 当前 Application 级别的 Theme
            lblMsg.Text = "application theme: " + Application.Current.RequestedTheme.ToString();
            lblMsg.Text += Environment.NewLine;

            // 当前 panel 的 Theme
            lblMsg.Text += "FrameworkElement  theme: " + panel.RequestedTheme.ToString();
        }

        // 动态变换主题，引用的主题资源会重新计算
        private void btnChangeTheme_Click(object sender, RoutedEventArgs e)
        {
            if (panel.RequestedTheme == ElementTheme.Default)  // 未指定 panel 的主题，则 panel 主题同 application 级主题
            {
                if (Application.Current.RequestedTheme == ApplicationTheme.Dark) // application 是 Dark 主题
                {
                    panel.RequestedTheme = ElementTheme.Light;
                }
                else
                {
                    panel.RequestedTheme = ElementTheme.Dark;
                }
            }
            else if (panel.RequestedTheme == ElementTheme.Dark) // panel 是 Dark 主题
            {
                panel.RequestedTheme = ElementTheme.Light;
            }
            else // panel 是 Light 主题
            {
                panel.RequestedTheme = ElementTheme.Dark;
            }

            DisplayMessage();
        }
    }
}

App.xaml

<Application
    x:Class="Windows10.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10"

    RequestedTheme="Dark">
    <!--
        上面的 RequestedTheme 被我设置为 Dark 了，关于主题的相关知识点请参见：/Resource/ThemeResourceDemo.xaml
    -->

</Application>

OK
[源码下载]