明示的なスタイル Xamarin.Forms
サンプルをダウンロードします明示的なスタイルは、スタイル プロパティを設定することでコントロールに選択的に適用されるスタイルです。
XAML で明示的なスタイルを作成する
ページ レベルで宣言 Style するには、a を ResourceDictionary ページに追加する必要があり、次に 1 つ以上 Style の宣言を ResourceDictionary. A 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>
ページResourceDictionaryLabelのインスタンスに適用される 3 つの明示的なスタイルを定義します。 それぞれ Style を使用して、テキストを異なる色で表示しながら、フォント サイズと水平方向および垂直方向のレイアウト オプションを設定します。 マークアップ拡張機能を使用してプロパティを設定Styleすることで、それぞれStyle異なるLabelプロパティにStaticResource適用されます。 この結果、次のスクリーンショットに示すような外観が表示されます。
さらに、最終的なLabelStyle値が適用されますが、プロパティを別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インスタンスを C# のページのコレクションに追加するには、次のResourcesコード例に示すように、新しいResourceDictionaryインスタンスを作成し、インスタンスをResourceDictionaryインスタンスに追加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なメソッドは、インスタンスをResourceDictionary参照する文字列をkey指定して、メソッドをStyle使用Addして追加されます。 それぞれ Style は、プロパティを設定することによって異なる Label 値に Style 適用されます。
ただし、ここで使用 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 は、プロパティを設定することで異なる Label 値に Style 適用されます。 さらに、最終的なLabelStyle値が適用されますが、プロパティを別ColorのTextColor値にオーバーライドします。