背水一戰 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
[源碼下載]