Xamarin.Forms 之 樣式Styles

Xamarin.Forms 版本1.3以下是沒有樣式的。這裏的樣式其實跟寫html中的樣式是一個意思。在Xamarin中一般的元素都具有Style這個屬性。

以下是樣式種類及設置樣式的方式：

C#代碼中：

1、自帶的樣式：Device.Styles.

var mylabel = new Label {
    Text = "This uses TitleStyle",
    Style = Device.Styles.TitleStyle
};

2、自定義樣式

var buttonStyle = new Style (typeof(Button)) {
    Setters = {
        new Setter {Property = Button.BackgroundColorProperty, Value = Color.Yellow},
        new Setter {Property = Button.BorderRadiusProperty, Value = 0},
        new Setter {Property = Button.HeightRequestProperty, Value = 42}
    }
}
// apply directly to a single control
var mybutton = new Button {
    Text = "Style Me",
    Style = buttonStyle
};

3、樣式也是可以繼承的：BaseResourceKey

var customLabel = new Label {
    Text = "This uses a custom style inherited dynamically from SubtitleStyle",
    Style = new Style (typeof(Label)) {
        BaseResourceKey = Device.Styles.SubtitleStyleKey,
        Setters = {
            new Setter {Property = Label.TextColorProperty, Value = Color.Pink}
        }
    }
}

4、全局樣式，分兩種，一種是根據key,一種是默認全部(沒有設置key的時候)。

所有頁面上的BoxView有具有該樣式的顯示

Application.Current.Resources = new ResourceDictionary ();
var boxStyle = new Style (typeof(BoxView)) {
    Setters = {
        new Setter { Property = BoxView.ColorProperty, Value = Color.Aqua }
    }
};
// no Key specified, becomes an implicit style for ALL boxviews
Application.Current.Resources.Add (boxStyle);

所有頁面上的Label都可以設置該樣式AppStayle，

public class App : Application
{
    public App ()
    {
        // The Application ResourceDictionary is available in Xamarin.Forms 1.3 and later
        Application.Current.Resources = new ResourceDictionary ();
        var appStyle = new Style (typeof(Label)) {
            BaseResourceKey = Device.Styles.SubtitleStyleKey,
            Setters = {
                new Setter { Property = Label.TextColorProperty, Value = Color.Green }
            }
        };
        Application.Current.Resources.Add ("AppStyle", appStyle); // use the "AppStyle" key in the app

        MainPage = new YourContentPage();
    }
}

xaml中的寫法：

1 自帶樣式 DynamicResource

<Label Text="This uses TitleStyle in XAML"
       Style="{DynamicResource TitleStyle}"/>
<Label Text="This uses SubtitleStyle in XAML"
       Style="{DynamicResource SubtitleStyle}"/>

2、自定義樣式

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WorkingWithStyles.StyleXaml">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="Yellow"/>
                <Setter Property="BorderRadius" Value="0"/>
                <Setter Property="HeightRequest" Value="42"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Button Text="Style Me XAML" Style="{StaticResource ButtonStyle}" />

</ContentPage>

3、全局樣式，這裏需要將app.cs文件改寫成xaml形式

<ResourceDictionary>
    <Style TargetType="BoxView">
        <Setter Property="Color" Value="Aqua" />
    </Style>
</ResourceDictionary>

<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="WorkingWithAppResources.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="labelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="Green" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>