次の方法で共有


Xamarin.Forms の明示的なスタイル

"明示的なスタイルとは、Style プロパティを設定することによってコントロールに選択的に適用されるスタイルです。"

XAML で明示的なスタイルを作成する

ページ レベルで Style を宣言するには、ResourceDictionary をページに追加する必要があります。その後、1 つ以上の Style 宣言を ResourceDictionary に含めることができます。 Style は、宣言に x:Key 属性を設定することで明示的になります。これにより、ResourceDictionary にわかりやすいキーが設定されます。 明示的なスタイルは、Style プロパティを設定することで、特定のビジュアル要素に適用する必要があります。

次のコード例は、ページの ResourceDictionary の XAML で宣言され、ページの Label インスタンスに適用される "明示的" スタイルを示しています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="labelRedStyle" TargetType="Label">
                <Setter Property="HorizontalOptions"
                        Value="Center" />
                <Setter Property="VerticalOptions"
                        Value="CenterAndExpand" />
                <Setter Property="FontSize" Value="Large" />
                <Setter Property="TextColor" Value="Red" />
            </Style>
            <Style x:Key="labelGreenStyle" TargetType="Label">
                ...
                <Setter Property="TextColor" Value="Green" />
            </Style>
            <Style x:Key="labelBlueStyle" TargetType="Label">
                ...
                <Setter Property="TextColor" Value="Blue" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   Style="{StaticResource labelRedStyle}" />
            <Label Text="are demonstrating"
                   Style="{StaticResource labelGreenStyle}" />
            <Label Text="explicit styles,"
                   Style="{StaticResource labelBlueStyle}" />
            <Label Text="and an explicit style override"
                   Style="{StaticResource labelBlueStyle}"
                   TextColor="Teal" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

ResourceDictionary は、ページの Label インスタンスに適用される 3 つの "明示的な" スタイルを定義します。Style は、テキストを異なる色で表示するために使われ、フォント サイズと水平および垂直のレイアウト オプションも設定します。 各 Style は、StaticResource マークアップ拡張機能を使用して Style プロパティを設定することにより、それぞれ異なる Label に適用されます。 これで、次のスクリーンショットのような結果になります。

明示的なスタイルの例

さらに、最後の Label には Style が適用されていますが、TextColor プロパティも別の Color 値にオーバーライドされます。

コントロール レベルで明示的なスタイルを作成する

"明示的な" スタイルをページ レベルで作成するだけでなく、次のコード例に示すように、コントロール レベルでも作成できます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="labelRedStyle" TargetType="Label">
                      ...
                    </Style>
                    ...
                </ResourceDictionary>
            </StackLayout.Resources>
            <Label Text="These labels" Style="{StaticResource labelRedStyle}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

この例では、explicit Style インスタンスがStackLayout コントロールのResources コレクションに割り当てられます。 その後、スタイルをコントロールとその子に適用できます。

アプリケーションの ResourceDictionary でのスタイルの作成については、グローバル スタイルに関する記事を参照してください。

C# で明示的なスタイルを作成する

C# で Style インスタンスをページの Resources コレクションに追加できます。次のコード例に示すように、新しい ResourceDictionary を作成してから、Style インスタンスを ResourceDictionary に追加します。

public class ExplicitStylesPageCS : ContentPage
{
    public ExplicitStylesPageCS ()
    {
        var labelRedStyle = new Style (typeof(Label)) {
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Red    }
            }
        };
        var labelGreenStyle = new Style (typeof(Label)) {
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Green }
            }
        };
        var labelBlueStyle = new Style (typeof(Label)) {
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Blue }
            }
        };

        Resources = new ResourceDictionary ();
        Resources.Add ("labelRedStyle", labelRedStyle);
        Resources.Add ("labelGreenStyle", labelGreenStyle);
        Resources.Add ("labelBlueStyle", labelBlueStyle);
        ...

        Content = new StackLayout {
            Children = {
                new Label { Text = "These labels",
                            Style = (Style)Resources ["labelRedStyle"] },
                new Label { Text = "are demonstrating",
                            Style = (Style)Resources ["labelGreenStyle"] },
                new Label { Text = "explicit styles,",
                            Style = (Style)Resources ["labelBlueStyle"] },
                new Label {    Text = "and an explicit style override",
                            Style = (Style)Resources ["labelBlueStyle"], TextColor = Color.Teal }
            }
        };
    }
}

コンストラクターは、ページの Label インスタンスに適用される 3 つの "明示的な" スタイルを定義します。explicit Styleは、Addメソッドを使用してResourceDictionaryに追加され、Styleインスタンスを参照するkey文字列を指定します。 各 Style は、Style プロパティを設定することによって、異なる Label に適用されます。

ただし、ここで ResourceDictionary を使う利点はありません。 代わりに、次のコード例に示すように、Style インスタンスを必要なビジュアル要素の Style プロパティに直接割り当て、ResourceDictionary を削除できます。

public class ExplicitStylesPageCS : ContentPage
{
    public ExplicitStylesPageCS ()
    {
        var labelRedStyle = new Style (typeof(Label)) {
            ...
        };
        var labelGreenStyle = new Style (typeof(Label)) {
            ...
        };
        var labelBlueStyle = new Style (typeof(Label)) {
            ...
        };
        ...
        Content = new StackLayout {
            Children = {
                new Label { Text = "These labels", Style = labelRedStyle },
                new Label { Text = "are demonstrating", Style = labelGreenStyle },
                new Label { Text = "explicit styles,", Style = labelBlueStyle },
                new Label { Text = "and an explicit style override", Style = labelBlueStyle,
                            TextColor = Color.Teal }
            }
        };
    }
}

コンストラクターは、ページの Label インスタンスに適用される 3 つの "明示的な" スタイルを定義します。Style は、テキストを異なる色で表示するために使われ、フォント サイズと水平および垂直のレイアウト オプションも設定します。 各 Style は、その Style プロパティを設定することによって、異なる Label に適用されます。 さらに、最後の Label には Style が適用されていますが、TextColor プロパティも別の Color 値にオーバーライドされます。