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>
この例では、"明示的な" 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 つの "明示的な" スタイルを定義します。 各 "明示的な" Style は、Style インスタンスを参照するための key 文字列を指定する Add メソッドを使って ResourceDictionary に追加されます。 各 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 値にオーバーライドされます。