背水一战 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
        系统会在加载 xaml 的时候去查找并应用 StaticResource 指定的资源(注:和 StaticResource 相对应的 DynamicResource 在 uwp 中不支持)
    -->
    <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>
    </Page.Resources>

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

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

            <TextBlock Name="textBlock1" Margin="5" Text="{StaticResource MyString}" />

            <TextBlock Name="textBlock2" Margin="5" Text="{StaticResource ResourceKey=MyString}" />

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

        </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
[源码下载]

时间: 2024-10-27 12:42:38

背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource的相关文章

资源: StaticResource, ThemeResource

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://sc

背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 资源 CustomResource ResourceDictionary 加载外部的 ResourceDictionary 文件 示例1.演示“CustomResource”相关知识点CustomResourceTest.cs /* * 本例是一个自定义 CustomXamlResourceLoader,用于演示 CustomResource 的使用 */ using Windows.UI.Xaml.Resources;

背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 绑定 TemplateBinding 绑定 与 RelativeSource 绑定 与 StaticResource 绑定 示例1.演示 TemplateBinding 的用法Bind/TemplateBindingDemo.xaml <Page x:Class="Windows10.Bind.TemplateBindingDemo" xmlns="http://schemas.microsof

背水一战 Windows 10 (9) - 资源: 资源限定符概述, 资源限定符示例

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 资源 资源限定符概述 资源限定符示例 示例1.资源限定符概述Resource/Qualifiers/Summary.xaml <Page x:Class="Windows10.Resource.Qualifiers.Summary" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=&qu

背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

原文:背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹出类) FlyoutBase Flyout MenuFlyout 示例1.FlyoutBase(基类) 的示例Controls/FlyoutControl/FlyoutBaseDemo.xaml <Page x:Class="Windows10.Controls.FlyoutC

背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组

原文:背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl) 项模板选择器 数据分组 示例1.ItemsControl 的项模板选择器Controls/CollectionControl/ItemsControlDemo/ItemsControlDemo3.xaml <Page x:Class="Windo

背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter

原文:背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl) 基础知识 数据绑定 ItemsPresenter GridViewItemPresenter ListViewItemPresent

背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 绑定 DataContextChanged - FrameworkElement 的 DataContext 发生变化时触发的事件 UpdateSourceTrigger - 数据更新的触发方式 对绑定的数据做自定义转换 示例1.演示 DataContextChanged 的用法Bind/DataContextChanged.xaml <Page x:Class="Windows10.Bind.DataContex

背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page

原文:背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(控件基类 - ContentControl, UserControl, Page) ContentPresenter ContentControl UserControl Page 示例1.演示 ContentPresenter 的基础知识Controls/BaseContro