次の方法で共有


Xamarin.Forms の暗黙的なスタイル

"暗黙的なスタイルとは、各コントロールがスタイルを参照しなくても、同じ TargetType に対するすべてのコントロールで使用されるスタイルです。"

XAML で暗黙的なスタイルを作成する

ページ レベルで Style を宣言するには、ResourceDictionary をページに追加する必要があります。そうすると、1 つ以上の Style 宣言を ResourceDictionary に含めることができます。 Style は、x:Key 属性を指定しないことによって暗黙的なものとなります。 その後、このスタイルは TargetType に正確に一致するビジュアル要素に適用されますが、TargetType 値から派生した要素には適用されません。

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Styles;assembly=Styles" x:Class="Styles.ImplicitStylesPage" Title="Implicit" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Entry">
                <Setter Property="HorizontalOptions" Value="Fill" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="BackgroundColor" Value="Yellow" />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="TextColor" Value="Blue" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Entry Text="These entries" />
            <Entry Text="are demonstrating" />
            <Entry Text="implicit styles," />
            <Entry Text="and an implicit style override" BackgroundColor="Lime" TextColor="Red" />
            <local:CustomEntry Text="Subclassed Entry is not receiving the style" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

ResourceDictionary を使って、ページの Entry インスタンスに適用される 1 つの "暗黙的な" スタイルを定義します。 Style を使用して、黄色の背景に青いテキストを表示するように設定しているほか、他の外観オプションも設定されています。 x:Key 属性を指定せずに、ページの ResourceDictionaryStyle が追加されています。 したがって、Style は、StyleTargetType プロパティと正確に一致するため、すべての Entry インスタンスに暗黙的に適用されます。 ただし、サブクラス化された Entry である CustomEntry インスタンスには Style は適用されません。 これで、次のスクリーンショットのような結果になります。

暗黙的なスタイルの例

さらに、4 つ目の Entry は、暗黙的なスタイルの BackgroundColor および TextColor プロパティを別の Color 値にオーバーライドします。

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

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Styles;assembly=Styles" x:Class="Styles.ImplicitStylesPage" Title="Implicit" IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style TargetType="Entry">
                        <Setter Property="HorizontalOptions" Value="Fill" />
                        ...
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>
            <Entry Text="These entries" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

この例では、"暗黙的な" StyleStackLayout コントロールの Resources コレクションに割り当てられます。 その後、"暗黙的な" スタイルをコントロールとその子に適用できます。

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

C# で暗黙的なスタイルを作成する

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

public class ImplicitStylesPageCS : ContentPage
{
    public ImplicitStylesPageCS ()
    {
        var entryStyle = new Style (typeof(Entry)) {
            Setters = {
                ...
                new Setter { Property = Entry.TextColorProperty, Value = Color.Blue }
            }
        };

        ...
        Resources = new ResourceDictionary ();
        Resources.Add (entryStyle);

        Content = new StackLayout {
            Children = {
                new Entry { Text = "These entries" },
                new Entry { Text = "are demonstrating" },
                new Entry { Text = "implicit styles," },
                new Entry { Text = "and an implicit style override", BackgroundColor = Color.Lime, TextColor = Color.Red },
                new CustomEntry  { Text = "Subclassed Entry is not receiving the style" }
            }
        };
    }
}

コンストラクターを使って、ページの Entry インスタンスに適用される 1 つの "暗黙的な" スタイルを定義します。 Style を使用して、黄色の背景に青いテキストを表示するように設定しているほか、他の外観オプションも設定されています。 Style は、key 文字列を指定せずにページの ResourceDictionary に追加されます。 したがって、Style は、StyleTargetType プロパティと正確に一致するため、すべての Entry インスタンスに暗黙的に適用されます。 ただし、サブクラス化された Entry である CustomEntry インスタンスには Style は適用されません。

派生型にスタイルを適用する

Style.ApplyToDerivedTypes プロパティを使用すると、TargetType プロパティで参照される基本データ型から派生したコントロールにスタイルを適用できます。 したがって、TargetType プロパティで指定された基本データ型から派生している型であれば、このプロパティを true に設定することで、1 つのスタイルで複数の型をターゲットにできます。

次の例は、Button インスタンスの背景色を赤に設定する暗黙的なスタイルを示しています。

<Style TargetType="Button"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Red" />
</Style>

このスタイルをページレベルの ResourceDictionary に配置すると、ページ上のすべての Button インスタンスだけでなく、Button から派生するすべてのコントロールにも適用されます。 ただし、ApplyToDerivedTypes プロパティが未設定のままの場合、スタイルは Button インスタンスにのみ適用されます。

同等の C# コードを次に示します。

var buttonStyle = new Style(typeof(Button))
{
    ApplyToDerivedTypes = true,
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.Red
        }
    }
};

Resources = new ResourceDictionary { buttonStyle };