Xamarin XAML 資源字典的繼承說明

XAML 資源字典的繼承說明

在這份筆記，將會記錄下 XAML 資源字典內的資源項目，在不同 視覺項目 (Visual Element) 內的繼承與覆蓋議題。

參考專案

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

執行畫面

全域資源 App.xaml

在這個專案中，使用了 App.xaml 定義了一個全域的樣式 StyleForLabel；其定義了 Label 的 Text, TextColor, FontSize, VerticalOptions, HorizontalOptions 的屬性預設值。

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="ElementTree.App">
  <Application.Resources>
    <ResourceDictionary>
      <Style x:Key="StyleForLabel" TargetType="Label">
        <Setter Property="Text" Value="App 資源字典" />
        <Setter Property="TextColor" Value="Blue" />
        <Setter Property="FontSize" Value="32" />
        <Setter Property="VerticalOptions" Value="Center" />
        <Setter Property="HorizontalOptions" Value="Center" />
      </Style>
    </ResourceDictionary>
  </Application.Resources>
</Application>

頁面中的相關資源字典定義

每個在 XAML 內的視覺項目 Visual Element 都可以定義資源字典，在同樣的資源字典內，其 x:Key 名稱是不能夠重複的；不過，在不同的視覺項目內的資源字典，卻可以定義同樣的資源名稱；另外，只要是在同一個視覺樹(Visual Tree)下，最上層定義的資源項目，是可以在底下階層的視覺項目直接來引用。

在這個頁面內，並沒有定義 ContentPage 的資源字典，並且所有的 Label 控制項，都使用同樣的 Style 靜態參考 StaticResource StyleForLabel； 而在第一個 Label 控制項中，將會採用全域資源中的資源項目。

第二個 Label 控制項目，將會使用上層 StackLayour 內資源字典定義的資源項目。

第三個 Label 控制項目，將會使用本身資源字典定義的資源項目。

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:ElementTree"
             x:Class="ElementTree.MainPage">

  <StackLayout
    Orientation="Vertical"
    VerticalOptions="Center"
    >
    <Label Style="{StaticResource StyleForLabel}"/>
    <StackLayout
      Orientation="Vertical">
      <StackLayout.Resources>
        <ResourceDictionary>
          <Style x:Key="StyleForLabel" TargetType="Label">
            <Setter Property="Text" Value="StackLayour 資源字典" />
            <Setter Property="TextColor" Value="Red" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="HorizontalOptions" Value="Center" />
          </Style>
        </ResourceDictionary>
      </StackLayout.Resources>
      <Label Style="{StaticResource StyleForLabel}" />
      <Label Style="{StaticResource StyleForLabel}" >
        <Label.Resources>
          <ResourceDictionary>
            <Style x:Key="StyleForLabel" TargetType="Label">
              <Setter Property="Text" Value="Label 資源字典" />
              <Setter Property="TextColor" Value="Green" />
              <Setter Property="FontSize" Value="24" />
              <Setter Property="VerticalOptions" Value="Center" />
              <Setter Property="HorizontalOptions" Value="Center" />
            </Style>
          </ResourceDictionary>
        </Label.Resources>
      </Label>
    </StackLayout>
  </StackLayout>

</ContentPage>