Xamarin.Forms Einführung in Stile

  • Artikel

Stile ermöglichen es, die Darstellung visueller Elemente anzupassen. Stile werden für einen bestimmten Typ definiert und enthalten Werte für die eigenschaften, die für diesen Typ verfügbar sind.

Xamarin.Forms Anwendungen enthalten häufig mehrere Steuerelemente, die eine identische Darstellung aufweisen. Beispielsweise kann eine Anwendung mehrere Label Instanzen mit den gleichen Schriftartoptionen und Layoutoptionen aufweisen, wie im folgenden XAML-Codebeispiel gezeigt:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Im folgenden Codebeispiel wird die Erstellung der entsprechenden Seite in C# dargestellt:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Jede Label instance verfügt über identische Eigenschaftswerte zum Steuern der Darstellung des texts, der Labelvon angezeigt wird. Dies ergibt die in den folgenden Screenshots gezeigte Darstellung:

Bezeichnungsdarstellung ohne Stile

Das Festlegen des Erscheinungsbilds jedes einzelnen Steuerelements kann sich wiederholend und fehleranfällig sein. Stattdessen kann ein Stil erstellt werden, der die Darstellung definiert und dann auf die erforderlichen Steuerelemente angewendet wird.

Erstellen eines Stils

Die Klasse Style gruppiert eine Sammlung von Eigenschaftswerten in ein Objekt, das anschließend auf mehrere Instanzen von visuellen Elementen angewendet werden kann. Dies trägt dazu bei, sich wiederholendes Markup zu reduzieren, und ermöglicht eine einfachere Änderung der Darstellung einer Anwendung.

Obwohl Stile hauptsächlich für XAML-basierte Anwendungen entwickelt wurden, können sie auch in C# erstellt werden:

  • Style Instanzen, die in XAML erstellt werden, werden in der Regel in einem ResourceDictionary definiert, das der Resources Auflistung eines Steuerelements, einer Seite oder der Resources Auflistung der Anwendung zugewiesen ist.
  • Style In C# erstellte Instanzen werden in der Regel in der -Klasse der Seite oder in einer Klasse definiert, auf die global zugegriffen werden kann.

Die Entscheidung, wo Sie eine Style-Klasse definieren, hat Einfluss darauf, wo Sie sie verwenden können:

  • Style Instanzen, die auf Steuerungsebene definiert sind, können nur auf das Steuerelement und seine untergeordneten Elemente angewendet werden.
  • Style Instanzen, die auf Seitenebene definiert sind, können nur auf die Seite und ihre untergeordneten Elemente angewendet werden.
  • Eine auf Anwendungsebene definierte Style-Instanz können Sie für die gesamte Anwendung nutzen.

Jede Style-Instanz enthält eine Sammlung mit mindestens einem Setter-Objekt. Dabei weist jedes Setter-Objekt eine Property und einen Value auf. Property ist der Name der bindbaren Eigenschaft des Elements, auf das die Formatvorlage angewendet wird, und Value ist der Wert, der auf die Eigenschaft angewendet wird.

Jede Style instance kann explizit oder implizit sein:

  • Eine expliziteStyle instance wird definiert, indem ein TargetType - und ein x:Key -Wert angegeben und die -Eigenschaft des Zielelements Style auf den x:Key Verweis festgelegt wird. Weitere Informationen zu expliziten Formatvorlagen finden Sie unter Explizite Stile.
  • Eine impliziteStyle instance wird definiert, indem nur angegeben TargetTypewird. Die Style instance wird dann automatisch auf alle Elemente dieses Typs angewendet. Beachten Sie, dass Unterklassen des TargetType nicht automatisch angewendet werden Style . Weitere Informationen zu impliziten Stilen finden Sie unter Implizite Stile.

Wenn Sie eine Style-Instanz erstellen, wird immer die Eigenschaft TargetType benötigt. Das folgende Codebeispiel zeigt eine explizite Formatvorlage (beachten Sie die ), die x:Keyin XAML erstellt wurde:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Um ein Styleanzuwenden, muss das Zielobjekt ein VisualElement sein, das mit dem TargetType -Eigenschaftswert von Styleübereinstimmt, wie im folgenden XAML-Codebeispiel gezeigt:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

Stile, die niedriger in der Ansichtshierarchie liegen, haben Vorrang vor den weiter oben definierten Formaten. Beispielsweise wird das Festlegen eines Style , das auf Red Anwendungsebene auf festlegtLabel.TextColor, durch eine Formatvorlage auf Seitenebene überschrieben, die auf festgelegt Label.TextColor istGreen. Ebenso wird eine Formatvorlage auf Seitenebene durch ein Steuerelementebenenformat überschrieben. Wenn direkt für eine Steuerelementeigenschaft festgelegt wird, hat dies darüber hinaus Label.TextColor Vorrang vor allen Stilen.

Die Artikel in diesem Abschnitt veranschaulichen und erläutern das Erstellen und Anwenden expliziter und impliziter Stile, das Erstellen globaler Stile, die Stilvererbung, das Reagieren auf Stiländerungen zur Laufzeit und die Verwendung der integrierten Stile, die in Xamarin.Formsenthalten sind.

Hinweis

Was ist StyleId?

Xamarin.Forms Vor Version 2.2 wurde die StyleId -Eigenschaft verwendet, um einzelne Elemente in einer Anwendung für die Identifizierung bei Ui-Tests und in Design-Engines wie Pixate zu identifizieren. In Xamarin.Forms Version 2.2 wurde jedoch die AutomationId -Eigenschaft eingeführt, die die StyleId -Eigenschaft abgelöst hat.