shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.FormsでStyleを指定,使用する

コントロールに個別に背景色や文字の大きさ,サイズなど様々な見た目の指定をすることができる.

        <Label
            BackgroundColor="LightBlue"
            FontSize="Large"
            HorizontalOptions="CenterAndExpand"
            Text="Label1"
            TextColor="LightPink"
            VerticalOptions="CenterAndExpand" />

しかし,すべてのコントロールにこのような見た目を指定するのは大変手間がかかり,統一することが難しい.

それらの見た目(Style)を一度記述しておき,それを使い回すことができる.

StyleはResourceDictionaryに記述する.

例えば,ContentPage内のすべてのLabelを同じ見た目にしたい場合は以下のようにする.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFStylePractice.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="BackgroundColor" Value="LightBlue" />
                <Setter Property="FontSize" Value="Large" />
                <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="TextColor" Value="LightPink" />
            </Style>

        <Label Text="Label1" />
        <Label Text="Label2" />
        <Label Text="Label3" />
        <Label Text="Label4" />
        <Label Text="Label5" />
    </StackLayout>

</ContentPage>

このように見た目の定義は一箇所だけで,Labelの見た目を統一できる.

f:id:shuhelohelo:20200407140507p:plain

見た目を変更するときも,一箇所だけで済む.

Styleに名前をつけて利用する

上の例ではコントロール(LabelとかButtonとか)単位で一括で見た目を指定したけれど,例えばLabelでも見出しで使われる場合と,本文で使われる場合ではStyleが異なるので,コントロール一括指定では困る.

このような場合,Styleの定義に名前をつけて,コントロール側ではその名前を使ってスタイルを適用することができる.

Style要素にx:Keyを使って名前(ここではlabelStyleとつけた)をつけ,Label側で以下のように指定する.

 <Label Text="Label1" Style="{StaticResource labelStyle}" />

以下のようにするとStyleを指定したLabelだけ見た目が変わる.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFStylePractice.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="labelStyle" TargetType="Label">
                <Setter Property="BackgroundColor" Value="LightBlue" />
                <Setter Property="FontSize" Value="Large" />
                <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="TextColor" Value="LightPink" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>

        <Label Text="Label1" Style="{StaticResource labelStyle}" />
        <Label Text="Label2" />
        <Label Text="Label3" />
        <Label Text="Label4" />
        <Label Text="Label5" />
    </StackLayout>

</ContentPage>

f:id:shuhelohelo:20200407142118p:plain

Styleのスコープ

Styleはそれを定義した要素の内側で有効です.

また,以下のようにContentPageでの定義さて,そのContentPageの中のStackLayoutでも定義されるといったStyleが入れ子になっている場合,内側のStyleが適用されます.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFStylePractice.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="BackgroundColor" Value="LightBlue" />
                <Setter Property="FontSize" Value="Large" />
                <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="TextColor" Value="LightPink" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <StackLayout.Resources>
            <ResourceDictionary>
                <Style TargetType="Label">
                    <Setter Property="BackgroundColor" Value="Yellow" />
                    <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
                    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                    <Setter Property="TextColor" Value="Red" />
                </Style>
            </ResourceDictionary>
        </StackLayout.Resources>

        <Label Text="Label1" />
        <Label Text="Label2" />
        <Label Text="Label3" />
        <Label Text="Label4" />
        <Label Text="Label5" />
    </StackLayout>

</ContentPage>

f:id:shuhelohelo:20200407144819p:plain

ソースコード

github.com