Xamarin XAML 靜態與動態資源的使用

XAML 靜態與動態資源的使用

在這份筆記，將會記錄下 XAML 樣式 Style 的各種應用，這包括了

• 資源字典 Resource Dictionary 的使用
• x:Static (取得公開靜態欄位值)
• StaticResource (參考靜態樣式資源)
• DynamicResource (參考動態樣式與資源)

參考專案

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/DynaStat

.NET 靜態屬性

這個專案內，定義了一個類別 PubStat，裡面有三個靜態屬性，將會在 XAML 內，使用 x:Static 來存取。

PubStat.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace DynaStat
{
    public class PubStat
    {
        public static Color 文字顏色 { get; set; } = Color.Red;
        public static Color 背景顏色 { get; set; } = Color.Yellow;
        public static double 文字尺寸 { get; set; } = 20;
    }
}

全域樣式 App.XAML

這個專案，定義了全域資源，定義了兩個顏色資源與一個 Double 資源。

而關於 Double 資源，您不能夠直接使用 .NET double 關鍵字，需要使用 XAML 標記延伸功能 x:Double

App.XAML

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DynaStat.App">
  <Application.Resources>

    <ResourceDictionary>
      <Color x:Key="GlobalbackgroundColor">#ccffcc</Color>
      <Color x:Key="GlobaltextColor">#ff6600</Color>
      <x:Double x:Key="GlobalfontSize">24</x:Double>
    </ResourceDictionary>
  </Application.Resources>
</Application>

啟動頁面 MainPage.xaml

在這個頁面，定義了 ContentPage.Resources 的資源字典，裡面定義了頁面內使用的三個資源。

若要在頁面內的控制項目 (Control Element)引用資源字典內的資源項目，可以使用 StaticResource 或者DynamicResource

當套用 StaticResource 的屬性，在整個應用程式執行時期，出現的樣式都是一樣的

當套用 DynamicResource 的屬性，只要在 code-behind 內有變更這個資源屬性值，當時套用這個動態資源的屬性，也會立即變更

若您要設定的控制項屬性值，是要參考 .NET 靜態屬性值，可以使用 x:Static 標記擴充功能，來參考 .NET 的靜態屬性值。不過，當您在 code-behind 內變更了這些 .NET 靜態屬性值，當時的頁面或者控制項是無法立即變更已經修正的屬性值，必須要重新建立一個新頁面之後，才會看到醉心繫結的 .NET 靜態屬性值。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DynaStat"
             x:Class="DynaStat.MainPage">

  <ContentPage.Resources>
    <ResourceDictionary>
      <Color x:Key="backgroundColor">#ccffcc</Color>
      <Color x:Key="textColor">#ff6600</Color>
      <x:Double x:Key="fontSize">24</x:Double>
    </ResourceDictionary>
  </ContentPage.Resources>

  <StackLayout
    Orientation="Vertical"
    HorizontalOptions="Center"
    VerticalOptions="Center"
  >
    <Label Text="使用 StaticResource"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           TextColor="{StaticResource textColor}"
           BackgroundColor="{StaticResource backgroundColor}"
           FontSize="{StaticResource fontSize}"
         />
    <Label Text="使用 DynamicResource"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           TextColor="{DynamicResource textColor}"
           BackgroundColor="{DynamicResource backgroundColor}"
           FontSize="{DynamicResource fontSize}"
         />
    <Button x:Name="btnDynamic" Text="變更動態資源"/>
    <Label Text="使用全域 DynamicResource"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           TextColor="{DynamicResource GlobaltextColor}"
           BackgroundColor="{DynamicResource GlobalbackgroundColor}"
           FontSize="{DynamicResource GlobalfontSize}"
         />
    <Button x:Name="btnGlobalDynamic" Text="變更全域動態資源"/>
    <Label Text="使用 公開靜態屬性"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           TextColor="{x:Static local:PubStat.文字顏色}"
           BackgroundColor="{x:Static local:PubStat.背景顏色}"
           FontSize="{x:Static local:PubStat.文字尺寸}"
         />
    <Button x:Name="btnStatic" Text="變更公開靜態屬性"/>
    <Button x:Name="btnReset" Text="重新啟動該頁面"/>
  </StackLayout>

</ContentPage>

執行結果

以上說明可以從底下的執行操作更加清楚了解。

當應用程式執行的時候，會顯示如下畫面

您可以看到，不論使用靜態資源或者動態資源，所看到的樣貌都是一樣的。

當按下了 變更動態資源 按鈕，會出現底下畫面

在這個按鈕處理事件內，使用頁面的 Resources 屬性值，修正了頁面內的動態資源內容，因此，頁面上立即會將有使用 DynamicResource 定義的屬性，反映出最新的內容。

            btnDynamic.Clicked += (s, e) =>
              {
                  this.Resources["backgroundColor"] = Color.White;
                  this.Resources["textColor"] = Color.Black;
                  this.Resources["fontSize"] = 30;
                  btnDynamic.Text = $"變更動態資源 " + this.Resources.Count.ToString();
              };

當按下了 變更全域動態資源 按鈕，會出現底下畫面

在這個按鈕處理事件內，使用頁面的 App.Current.Resources 屬性，修正了整個應用程式全域的動態資源內容，因此，頁面上立即會將有使用 DynamicResource 定義的屬性，反映出最新的內容。

            btnGlobalDynamic.Clicked += (s, e) =>
              {
                  App.Current.Resources["GlobalbackgroundColor"] = Color.White;
                  App.Current.Resources["GlobaltextColor"] = Color.Black;
                  App.Current.Resources["GlobalfontSize"] = 30;
                  btnGlobalDynamic.Text = $"變更全域動態資源 "+ App.Current.Resources.Count.ToString();
              };

不過，當您按下了按鈕 變更公開靜態屬性 按鈕，並且變更了 .NET 靜態屬性內容，會發現到頁面並沒有做出任何變化或者更新。

            btnStatic.Clicked += (s, e) =>
              {
                  PubStat.文字顏色 = Color.Blue;
                  PubStat.背景顏色 = Color.Pink;
                  PubStat.文字尺寸 = 30;
              };

現在，請按下按鈕 重新啟動該頁面，使用這個 C# 敘述 App.Current.MainPage = new MainPage();，重新定義應用程式的起始頁面。

因為重新產生了一個新的 MainPage 物件執行個體，此時，在這個新產生的執行個體，使用了 x:Static 參考到的 .NET 靜態屬性，將會是剛剛變更後的內容，也就是會產生另外一個樣式結果。

            btnReset.Clicked += (s, e) =>
              {
                  App.Current.MainPage = new MainPage();
              };