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 インスタンスは、Style インスタンスを参照する key 文字列を指定した Add メソッドを使用して ResourceDictionary に追加されます。 その後、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 インスタンスの外観を制御します。