の明示的なスタイル Xamarin.Forms
サンプルのダウンロード明示的なスタイルは、Style プロパティを設定することによってコントロールに選択的に適用されるスタイルです。
XAML で明示的なスタイルを作成する
ページ レベルで を Style 宣言するには、 を ResourceDictionary ページに追加する必要があります。その後、 に 1 つ以上 Style の宣言を ResourceDictionary含めることができます。 Styleは、その宣言に 属性をx:Key指定することで明示的に行われます。これにより、 内の説明的なキーが提供されますResourceDictionary。 その後、明示的なスタイルを特定のビジュアル要素に適用するには、そのプロパティをStyle設定する必要があります。
次のコード例は、ページの で XAML で宣言され、ページのResourceDictionaryインスタンスに適用される明示的なスタイルを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することで、それぞれStyleが異なる Label にStaticResource適用されます。 この結果、次のスクリーンショットに示すような外観が表示されます。
さらに、final Label には Style が適用されますが、 プロパティも別ColorのTextColor値にオーバーライドされます。
コントロール レベルで明示的なスタイルを作成する
ページ レベルで 明示的な スタイルを作成するだけでなく、次のコード例に示すように、コントロール レベルで作成することもできます。
<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 で明示的なスタイルを作成する#
Styleインスタンスは、次のResourcesコード例に示すように、新しい ResourceDictionaryを作成し、 インスタンスを にResourceDictionary追加することで、C# のページのコレクションに追加Styleできます。
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な は、 メソッドを使用して Add にResourceDictionary追加され、インスタンスをkey参照する文字列をStyle指定します。 それぞれのプロパティを設定Styleすることで、それぞれStyleが異なる Label に適用されます。
ただし、ここで を使用 ResourceDictionary しても利点はありません。 代わりに、Style次のコード例に示すように、ResourceDictionaryインスタンスをStyle必要なビジュアル要素のプロパティに直接割り当てることができ、 を削除できます。
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 に適用されます。 さらに、final Label には Style が適用されますが、 プロパティも別ColorのTextColor値にオーバーライドされます。