[Xamarin][筆記]Style機制

  • 650
  • 0

Style可以用來統一設定Xamarin.From的UI物件外觀,作用類似CSS。透過Style的設定,可以避免許多重複的程式碼,也可以讓畫面外觀樣式的維護更簡便。

 

底下是一個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}" />

參考