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>