Explizite Stile in Xamarin.Forms
Das Beispiel herunterladenEine explizite Formatvorlage wird selektiv auf Steuerelemente angewendet, indem ihre Style-Eigenschaften festgelegt werden.
Erstellen einer expliziten Formatvorlage in XAML
Um eine Style auf Seitenebene zu deklarieren, muss der Seite ein ResourceDictionary hinzugefügt werden, und dann können eine oder Style mehrere Deklarationen in die ResourceDictionaryeingeschlossen werden. A Style wird explizit gemacht, indem seiner Deklaration ein x:Key Attribut gegeben wird, das ihm einen beschreibenden Schlüssel in der ResourceDictionarygibt. Explizite Stile müssen dann auf bestimmte visuelle Elemente angewendet werden, indem ihre Style Eigenschaften festgelegt werden.
Das folgende Codebeispiel zeigt explizite Stile, die in XAML in einer Seite ResourceDictionary deklariert und auf die Label Seiteninstanzen angewendet werden:
<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>
Definiert ResourceDictionary drei explizite Stile, die auf die Label Seiteninstanzen angewendet werden. Jede Style wird verwendet, um Text in einer anderen Farbe anzuzeigen, während gleichzeitig die Schriftartgröße sowie horizontale und vertikale Layoutoptionen festgelegt werden. Jede Style wird auf eine andere Label angewendet, indem ihre Style Eigenschaften mithilfe der StaticResource Markuperweiterung festgelegt werden. Dies ergibt die in den folgenden Screenshots gezeigte Darstellung:
Darüber hinaus hat das letzte Label eine Style angewendet, setzt aber auch die TextColor Eigenschaft auf einen anderen Color Wert außer Kraft.
Erstellen eines expliziten Stils auf Steuerungsebene
Neben dem Erstellen expliziter Stile auf Seitenebene können sie auch auf Steuerungsebene erstellt werden, wie im folgenden Codebeispiel gezeigt:
<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>
In diesem Beispiel werden die explizitenStyle Instanzen der Resources Auflistung des StackLayout Steuerelements zugewiesen. Die Stile können dann auf das Steuerelement und seine untergeordneten Elemente angewendet werden.
Informationen zum Erstellen von Formatvorlagen in einer Anwendung ResourceDictionaryfinden Sie unter Globale Stile.
Erstellen einer expliziten Formatvorlage in C#
Style Instanzen können der Auflistung einer Seite Resources in C# hinzugefügt werden, indem Sie eine neue ResourceDictionaryerstellen und dann die Style Instanzen hinzufügen ResourceDictionary, wie im folgenden Codebeispiel gezeigt:
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 }
}
};
}
}
Der Konstruktor definiert drei explizite Stile, die auf die Label Seiteninstanzen angewendet werden. Jede expliziteStyle wird mithilfe der ResourceDictionaryAdd -Methode hinzugefügt, wobei eine key Zeichenfolge angegeben wird, die auf die Style instance verweist. Jede Style wird auf eine andere Label angewendet, indem ihre Style Eigenschaften festgelegt werden.
Es gibt jedoch keinen Vorteil, hier ein ResourceDictionary zu verwenden. Stattdessen Style können Instanzen direkt den Style Eigenschaften der erforderlichen visuellen Elemente zugewiesen und ResourceDictionary entfernt werden, wie im folgenden Codebeispiel gezeigt:
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 }
}
};
}
}
Der Konstruktor definiert drei explizite Stile, die auf die Label Seiteninstanzen angewendet werden. Jede Style wird verwendet, um Text in einer anderen Farbe anzuzeigen, während gleichzeitig die Schriftartgröße sowie horizontale und vertikale Layoutoptionen festgelegt werden. Jede Style wird auf eine andere Label angewendet, indem ihre Style Eigenschaften festgelegt werden. Darüber hinaus hat das letzte Label eine Style angewendet, setzt aber auch die TextColor Eigenschaft auf einen anderen Color Wert außer Kraft.