Xamarin.Forms のグローバル スタイル
スタイルは、アプリケーションのリソース ディクショナリに追加することで、グローバルに使用できます。 これは、ページまたはコントロールにまたがってスタイルが重複しないようにするのに役立ちます。
XAML でグローバル スタイルを作成する
既定では、テンプレートから作成したすべての Xamarin.Forms アプリケーションでは、App クラスを使用して Application
サブクラスが実装されます。 Style
をアプリケーション レベルで宣言するには、XAML を使用するアプリケーションの ResourceDictionary
内で、既定の App クラスを XAML の App クラスとそれに関連する分離コードに置き換える必要があります。 詳細については、App クラスの操作に関する記事を参照してください。
次のコード例は、アプリケーション レベルで宣言されている Style
を示しています。
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
この ResourceDictionary
は、1 つのインスタンスの外観 を設定するために使用される 1 つの "明示的な" スタイル buttonStyle
を定義します。これは、Button
インスタンスの外観を設定するのに使用されます。 ただし、グローバル スタイルは "明示的" または ”暗黙的" にすることができます。
次のコード例は、ページの Button
インスタンスに buttonStyle
を適用する XAML ページを示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
<Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
これで、次のスクリーンショットのような結果になります。
ページの ResourceDictionary
でのスタイルの作成の詳細については、明示的なスタイルと暗黙的なスタイルに関する記事を参照してください。
スタイルをオーバーライドする
ビュー階層で下位にあるスタイルは、上位の定義済みスタイルよりも優先されます。 たとえば、アプリケーション レベルで Button.TextColor
を Red
に設定する Style
の設定は、Button.TextColor
を Green
に設定するページ レベルのスタイルによってオーバーライドされます。 同様に、ページ レベル スタイルはコントロール レベル スタイルによってオーバーライドされます。 さらに、Button.TextColor
がコントロール プロパティで直接設定されている場合は、どのスタイルよりも優先されます。 この優先順位は次のコード例で示されています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
...
<Setter Property="TextColor" Value="Red" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
...
<Setter Property="TextColor" Value="Blue" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
<Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
アプリケーション レベルで定義された元の buttonStyle
は、ページ レベルで定義された buttonStyle
インスタンスによってオーバーライドされます。 さらに、ページ レベルのスタイルはコントロール レベルの buttonStyle
によってオーバーライドされます。 そのため、次のスクリーンショットに示すように、Button
インスタンスは青いテキストで表示されます。
C# でグローバル スタイルを作成する#
Style
インスタンスは、C# でアプリケーションの Resources
コレクションに追加できます。次のコード例に示すように、新しい ResourceDictionary
インスタンスを作成してから Style
インスタンスを ResourceDictionary
に追加します。
public class App : Application
{
public App ()
{
var buttonStyle = new Style (typeof(Button)) {
Setters = {
...
new Setter { Property = Button.TextColorProperty, Value = Color.Teal }
}
};
Resources = new ResourceDictionary ();
Resources.Add ("buttonStyle", buttonStyle);
...
}
...
}
コンストラクターは、アプリケーション全体で Button
インスタンスに適用するための 1 つの "明示的な" スタイルを定義します。 明示的 Style
インスタンスは、Add
メソッドを使用してResourceDictionary
に追加され、Style
インスタンスを参照するkey
文字列を指定します。 その後、Style
インスタンスは、アプリケーション内で適切な種類の任意のコントロールに適用できます。 ただし、グローバル スタイルは "明示的" または ”暗黙的" にすることができます。
次のコード例は、ページの Button
インスタンスに buttonStyle
を適用する C# ページを示しています。
public class ApplicationStylesPageCS : ContentPage
{
public ApplicationStylesPageCS ()
{
...
Content = new StackLayout {
Children = {
new Button { Text = "These buttons", Style = (Style)Application.Current.Resources ["buttonStyle"] },
new Button { Text = "are demonstrating", Style = (Style)Application.Current.Resources ["buttonStyle"] },
new Button { Text = "application styles", Style = (Style)Application.Current.Resources ["buttonStyle"]
}
}
};
}
}
buttonStyle
は、Style
プロパティを設定することで Button
インスタンスに適用され、Button
インスタンスの外観を制御します。