Xamarin.Forms スタイルの概要

スタイルを使うと、ビジュアル要素の外観をカスタマイズできます。 スタイルは特定の型に対して定義され、その型で使用できるプロパティの値が設定されます。

Xamarin.Forms アプリケーションには、多くの場合、同じ外観を持つ複数のコントロールが含まれています。 たとえば、次の XAML コード例に示すように、アプリケーションには、フォント オプションとレイアウト オプションが同じ Label インスタンスが複数存在する場合があります。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

次に示すのは、C# で作成された同等のページのコード例です。

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

各 Label インスタンスは、Label によって表示されるテキストの外観を制御するためのプロパティ値が同じです。 これで、次のスクリーンショットのような結果になります。

個々のコントロールそれぞれの外観を設定すると、繰り返しになり、エラーが発生しやすくなります。 代わりにスタイルを作成することで、外観を定義して必要なコントロールに適用できます。

スタイルの作成

Style クラスは、プロパティ値のコレクションを 1 つのオブジェクトにグループ化して、複数のビジュアル要素インスタンスに適用できるようにします。 これにより、マークアップの繰り返しが減り、アプリケーションの外観をより簡単に変更できるようになります。

スタイルは主に XAML ベースのアプリケーション向けに設計されていますが、C# で作成することもできます。

• XAML で作成された Style インスタンスは、通常、コントロール、ページの Resources コレクション、またはアプリケーションの Resources コレクションに割り当てられる ResourceDictionary で定義されます。
• C# で作成された Style インスタンスは、通常、ページのクラス、またはグローバルにアクセスできるクラスで定義されます。

Style を定義する場所の選択は、それを使用できる場所に影響します。

• コントロール レベルで定義された Style インスタンスは、コントロールとその子にのみ適用できます。
• ページ レベルで定義された Style インスタンスは、ページとその子にのみ適用できます。
• アプリケーション レベルで定義された Style インスタンスは、アプリケーション全体に適用できます。

各 Style インスタンスには、1 つ以上の Setter オブジェクトのコレクションが含まれています。各 Setter には、PropertyとValueがあります。 Property は、スタイルが適用される要素のバインド可能なプロパティの名前で、Value はプロパティに適用される値です。

各 Style インスタンスは、"明示的" または "暗黙的" にすることができます。

• "明示的な" Style インスタンスを定義するには、TargetType と x:Key の値を指定し、ターゲット要素の Style プロパティを x:Key 参照に設定します。 "明示的な" スタイルの詳細については、明示的なスタイルに関する記事を参照してください。
• "暗黙的な" Style インスタンスを定義するには、TargetType のみを指定します。 Style インスタンスは、その型のすべての要素に自動的に適用されます。 TargetType のサブクラスには、Style が自動的に適用されないことに注意してください。 "暗黙的な" スタイルの詳細については、暗黙的なスタイルに関する記事を参照してください。

Style を作成する場合は、TargetType プロパティが常に必要です。 次のコード例は、XAML で作成された "明示的な" スタイル (x:Key に注意してください) を示しています。

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

Style を適用するには、次の XAML コード例に示すように、ターゲット オブジェクトは、Style の TargetType プロパティ値と一致する VisualElement である必要があります。

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

ビュー階層で下位にあるスタイルは、上位の定義済みスタイルよりも優先されます。 たとえば、アプリケーション レベルで Label.TextColor を Red に設定する Style の設定は、Label.TextColor を Green に設定するページ レベルのスタイルによってオーバーライドされます。 同様に、ページ レベル スタイルはコントロール レベル スタイルによってオーバーライドされます。 さらに、Label.TextColor がコントロール プロパティで直接設定されている場合は、どのスタイルよりも優先されます。

このセクションの記事では、"明示的な" スタイルと "暗黙的な" スタイルを作成および適用する方法、グローバル スタイルの作成方法、スタイルの継承、実行時のスタイル変更への対応方法、Xamarin.Forms に含まれる組み込みスタイルの使用方法を示し、説明します。

Note

StyleId とは

Xamarin.Forms 2.2 より前では、UI テストや Pixate などのテーマ エンジンでの識別のために、アプリケーション内の個々の要素を特定するために StyleId プロパティが使われていました。 ただし、Xamarin.Forms 2.2 では、StyleId プロパティに代わって AutomationId プロパティが導入されました。

関連リンク

• XAML マークアップ拡張
• スタイル
• Setter