攻城獅跳火圈

 

底下是一個Style的設定範例，該style中設定了TargetType attribute 及x:key attribute。TargetType attribute是一定要指派的，而x:key attribute則是option的。

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

要使用該Style，則是透過StaticResource markup extension設定要參考的key值，如以下範例

<Label 
    Text="Demonstrating an explicit style" 
    Style="{StaticResource labelStyle}" />

Explicit Styles

在Page或Control的ResourceDictionary中，可以在設定Style時，指定x:key attribute。這就是所謂的Explicit styles。這種方式，可以讓該頁面或Application中的Control，透過key值取得所想要套用的Style。就如同上述的例子

Implicit Styles

如果不指定x:key attribute，就是所謂的Implicit Styles。這裡定義的Style會依據TargetType attribute的值套用到所指定的類別的Control物件上。

Global Styles

基本上，Style是定義在ResourceDictionary中，可以設定成以下三個共用層級:Control, Page, Application。層級越高，涵蓋的範圍就越大，共用性也越高。

Creating a Global Style in XAML

如果要使用Application層級的Style，可以建立一個 XAML App class，並在Application.Resources中建立Style的定義，如以下範例:

<Application 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="Styles.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Overriding Styles

因為Style的設定可以有三個共用層級:Control, Page, Application，當不同的層級有相同的TargetType時，就會有Overriding的效果。Application Level的設定，會被Page Level的設定覆蓋掉。Page Level的設定，會被Control Level的設定覆蓋掉。Control Level的設定，會被Control自己的設定覆蓋掉。

Style Inheritance

Style也可以透過繼承其他的Style，來增加重用性及降低重複程式碼。

在Xaml中，如果想要進行Style Inheritance，可在BasedOn property屬性中，由StaticResource markup extension設定想要繼承的Style。

<Style x:Key="labelStyle" 
    TargetType="Label"
    BasedOn="{StaticResource baseStyle}">

繼承Style有其限制，如果被繼承者的TargetType的型別是View，繼承者的TargetType的型別必須是View，或是繼承View的物件，例如: Label, Button。

Respecting the Inheritance Chain

Style只能繼承同一個層級，或是更高層級所定義的Style。

• Applicatoin Level只能繼承其他Applicatoin Level的Style
• Page Level能繼承Applicatoin Level及其他Page Level的Style
• Control Level能繼承Applicatoin Level、Page Level及其他Control Level的Style

Dynamic Styles

一般來說，在RunTime時變更Style的設定，使用該Style的UI物件是不會跟著修改樣式的。如果要做到RunTime的變更，則需要使用DynamicResource markup extension來進行設定。

<SearchBar 
    Placeholder="These SearchBar controls" 
    Style="{DynamicResource searchBarStyle}" />

Dynamic Style Inheritance

如果一個Style想要繼承Dynamic Styles的樣式，則不能使用BasedOn attribute，而是要使用BaseResourceKey attribute。

<Style 
    x:Key="tealSearchBarStyle" 
    TargetType="SearchBar" 
    BaseResourceKey="searchBarStyle">
...
</Style>

不過，使用這個繼承了Dynamic Style的Style的SearchBar物件，是使用StaticResource markup extension 而不須使用DynamicResource markup extension。這是因為tealSearchBarStyle並不會變動，會變動的是他所繼承的searchBarStyle。

<SearchBar 
    Text="These SearchBar controls" 
    Style="{StaticResource tealSearchBarStyle}" />

---

參考

• Xamarin - Styles