Freigeben über

Formatieren von Apps mit XAML

  • Artikel

.NET Multi-Platform App UI (.NET MAUI)-Apps enthalten oft mehrere Steuerelemente, die identisch dargestellt werden. Beispielsweise kann eine App mehrere Label-Instanzen haben, die dieselben Schrift- und Layout-Optionen haben:

<Label Text="These labels"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       FontSize="18" />
<Label Text="are not"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       FontSize="18" />
<Label Text="using styles"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       FontSize="18" />

In diesem Beispiel hat jedes Label-Objekt identische Eigenschaftswerte, um die Darstellung des vom Label angezeigten Textes zu steuern. Die Einstellung der Darstellung jedes einzelnen Steuerelements kann jedoch repetitiv und fehleranfällig sein. Stattdessen kann ein Stil erstellt werden, der die Darstellung definiert. Dieser Stil kann dann auf die benötigten Steuerelemente angewendet werden.

Einführung in die Stile

Eine App kann mit der Style-Klasse formatiert werden, um eine Sammlung von Eigenschaftswerten in einem Objekt zu gruppieren, das dann auf mehrere visuelle Elemente angewendet werden kann. Dies trägt dazu bei, sich wiederholende Markups zu reduzieren und die Darstellung einer App einfacher zu ändern.

Obwohl Stile in erster Linie für XAML-basierte Apps konzipiert sind, können sie auch in C# erstellt werden:

  • In XAML erstellte Style-Objekte werden normalerweise in einem ResourceDictionary definiert, das der Resources-Auflistung eines Steuerelements, einer Seite oder der Resources-Auflistung der App zugeordnet ist.
  • Style-Objekte, die in C# erstellt werden, werden normalerweise 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 der Ebene des Steuerelements definiert sind, können nur auf das Steuerelement und seine untergeordneten Elemente angewendet werden.
  • Style-Instanzen, die auf der Seitenebene definiert sind, können nur auf die Seite und ihre untergeordneten Elemente angewandt werden.
  • Style-Instanzen, die auf der App-Ebene definiert sind, können in der gesamten App angewendet werden.

Jedes Style-Objekt enthält eine Sammlung von einem oder mehreren Setter-Objekten, wobei jeder Setter eine Property und eine Value hat. 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.

Jedes Style-Objekt kann explizit, oder implizit sein:

  • Ein explizites Style-Objekt wird durch Angeben eines TargetType- und eines x:Key-Werts definiert und durch Festlegen der Eigenschaft Style des Zielelements auf den Verweis x:Key. Weitere Informationen finden Sie unter Explizite Stile.
  • Ein implizites Style-Objekt wird definiert, indem nur ein TargetType angegeben wird. Das Style-Objekt wird dann automatisch auf alle Elemente dieses Typs angewendet. Der Style wird jedoch nicht automatisch auf die Unterklassen des TargetType angewendet. Weitere Informationen finden Sie unter Implizite Stile.

Wenn Sie eine Style-Instanz erstellen, wird immer die Eigenschaft TargetType benötigt. Das folgende Beispiel zeigt einen expliziten Stil:

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

Um einen Style anzuwenden, muss das Zielobjekt ein VisualElement sein, das dem TargetType-Eigenschaftswert des Style entspricht:

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

In der Ansichtshierarchie haben die untergeordneten Stile Vorrang vor den übergeordneten Stilen. Zum Beispiel wird die Einstellung eines Style, der Label.TextColor auf Red auf der App-Ebene setzt, durch einen Stil auf Seitenebene überschrieben, der Label.TextColor auf Green setzt. Ebenso wird ein Stil auf Seitenebene durch einen Stil auf Steuerelementebene überschrieben. Wenn Label.TextColor direkt auf eine Steuerelementeigenschaft gesetzt wird, hat dies außerdem Vorrang vor allen Stilen.

Stile reagieren nicht auf Änderungen der Eigenschaften und bleiben während der gesamten Laufzeit einer App unverändert. Apps können jedoch dynamisch auf Stiländerungen zur Laufzeit reagieren, indem sie dynamische Ressourcen verwenden. Weitere Informationen finden Sie unter Dynamische Stile.

Explizite Stile

Um ein Style auf Seitenebene zu erstellen, muss der Seite ein ResourceDictionary hinzugefügt werden, und dann können eine oder mehrere Style-Deklarationen in das ResourceDictionary eingefügt werden. Ein Style wird explizit gemacht, indem seiner Deklaration ein x:Key-Attribut zugewiesen wird, das ihm einen beschreibenden Schlüssel im ResourceDictionary gibt. Die expliziten Stile müssen dann auf bestimmte visuelle Elemente angewendet werden, indem ihre StyleEigenschaften gesetzt werden.

Das folgende Beispiel zeigt explizite Stile in der ResourceDictionary einer Seite, die auf die Label Objekte der Seite angewendet werden:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="labelRedStyle"
               TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="Red" />
        </Style>
        <Style x:Key="labelGreenStyle"
               TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="Green" />
        </Style>
        <Style x:Key="labelBlueStyle"
               TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <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>

In diesem Beispiel definiert die ResourceDictionary drei Stile, die explizit auf die Label-Objekte der Seite gesetzt werden. Jeder Style wird verwendet, um den Text in einer anderen Farbe darzustellen und gleichzeitig die Schriftgröße sowie die horizontalen und vertikalen Layoutoptionen festzulegen. Jeder Style wird auf ein anderes Label angewendet, indem seine Style-Eigenschaften mithilfe der StaticResource-Markuperweiterung definiert werden. Zusätzlich hat das abschließende Label einen Style-Wert, überschreibt aber auch die TextColor-Eigenschaft mit einem anderen Color-Wert.

Implizite Stile

Um ein Style auf Seitenebene zu erstellen, muss der Seite ein ResourceDictionary hinzugefügt werden, und dann können eine oder mehrere Style-Deklarationen in das ResourceDictionary eingefügt werden. Ein Style wird implizit gemacht, indem kein x:Key-Attribut angegeben wird. Der Stil wird dann auf die visuellen Elemente innerhalb des Geltungsbereichs angewendet, die genau mit TargetType übereinstimmen, aber nicht auf Elemente, die vom TargetType-Wert abgeleitet sind.

Das folgende Codebeispiel zeigt einen impliziten Stil im ResourceDictionary einer Seite, der auf die Entry-Objekte der Seite angewendet wird:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="Entry">
            <Setter Property="HorizontalOptions" Value="Fill" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="BackgroundColor" Value="Yellow" />
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <Entry Text="These entries" />
        <Entry Text="are demonstrating" />
        <Entry Text="implicit styles," />
        <Entry Text="and an implicit style override"
               BackgroundColor="Lime"
               TextColor="Red" />
        <local:CustomEntry Text="Subclassed Entry is not receiving the style" />
    </StackLayout>
</ContentPage>

In diesem Beispiel definiert das ResourceDictionary einen einzelnen impliziten Stil, der implizit auf die Entry-Objekte der Seite gesetzt wird. Der Style wird verwendet, um blauen Text auf gelbem Hintergrund darzustellen und gleichzeitig andere Darstellungsoptionen zu definieren. Der Style wird dem ResourceDictionary der Seite hinzugefügt, ohne dass ein x:Key-Attribut angegeben wird. Daher wird der Style implizit auf alle Entry-Objekte angewendet, da sie genau der TargetType-Eigenschaft des Style entsprechen. Der Style wird jedoch nicht auf das CustomEntry-Objekt angewendet, das eine Unterklasse von Entry ist. Außerdem überschreibt das vierte Entry die BackgroundColor- und TextColor-Eigenschaften des Stils auf verschiedene Color-Werte.

Anwenden eines Stils auf abgeleitete Typen

Die Style.ApplyToDerivedTypes-Eigenschaft ermöglicht die Anwendung eines Stils auf Steuerelemente, die von dem durch die TargetType-Eigenschaft referenzierten Basistyp abgeleitet sind. Wenn diese Eigenschaft auf true gesetzt wird, kann ein einziger Stil auf mehrere Typen angewendet werden, sofern diese Typen von dem in der Eigenschaft TargetType angegebenen Basistyp abgeleitet sind.

Das folgende Beispiel zeigt einen impliziten Stil, der die Hintergrundfarbe von Button-Instanzen auf Rot setzt:

<Style TargetType="Button"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Red" />
</Style>

Wenn Sie diesen Stil in einem ResourceDictionary auf Seitenebene platzieren, wird er auf alle Button-Objekte auf der Seite angewendet und auch auf alle Steuerelemente, die von Button abgeleitet sind. Wenn die ApplyToDerivedTypes-Eigenschaft jedoch nicht gesetzt ist, wird der Stil nur auf Button-Objekte angewendet.

Globale Stile

Stile können global definiert werden, indem sie dem Ressourcenwörterbuch der App hinzugefügt werden. Diese Stile können dann in der gesamten App verwendet werden und helfen, die Duplizierung von Stilen auf Seiten und Steuerelementen zu vermeiden.

Das folgende Beispiel zeigt einen Style, der auf App-Ebene definiert wurde:


<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Styles"
             x:Class="Styles.App">
    <Application.Resources>        
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="HorizontalOptions"
                        Value="Center" />
            <Setter Property="VerticalOptions"
                        Value="CenterAndExpand" />
            <Setter Property="BorderColor"
                        Value="Lime" />
            <Setter Property="CornerRadius"
                        Value="5" />
            <Setter Property="BorderWidth"
                        Value="5" />
            <Setter Property="WidthRequest"
                        Value="200" />
            <Setter Property="TextColor"
                        Value="Teal" />
        </Style>
    </Application.Resources>
</Application>

In diesem Beispiel definiert das ResourceDictionary einen einzigen expliziten Stil, buttonStyle, der verwendet wird, um die Darstellung von Button-Objekten zu definieren.

Hinweis

Globale Stile können explizit oder implizit sein.

Das folgende Beispiel zeigt eine Seite, die den buttonStyle auf den Button-Objekten der Seite verwendet:

<ContentPage ...>
    <StackLayout>
        <Button Text="These buttons"
                Style="{StaticResource buttonStyle}" />
        <Button Text="are demonstrating"
                Style="{StaticResource buttonStyle}" />
        <Button Text="application styles"
                Style="{StaticResource buttonStyle}" />
    </StackLayout>
</ContentPage>

Stilvererbung

Stile können von anderen Stilen geerbt werden, um Doppelarbeit zu vermeiden und Wiederverwendung zu ermöglichen. Dies wird erreicht, indem die Eigenschaft Style.BasedOn auf einen vorhandenen Style gesetzt wird. In XAML kann dies erreicht werden, indem die BasedOn-Eigenschaft auf eine StaticResource-Markuperweiterung gesetzt wird, die auf einen zuvor erstellten Style verweist.

Stile, die von einem Basisstil erben, können Setter-Instanzen für neue Eigenschaften enthalten oder diese verwenden, um Setter des Basisstils zu überschreiben. Darüber hinaus müssen Stile, die von einem Basisstil erben, auf denselben Typ oder einen Typ abzielen, der von dem Typ abgeleitet ist, auf den der Basisstil abzielt. Wenn beispielsweise ein Basisstil auf View-Objekte abzielt, können Stile, die auf dem Basisstil basieren, auf View-Objekte oder auf Typen abzielen, die von der View-Klasse abgeleitet sind, wie Label- und Button-Objekte.

Ein Stil kann nur von Stilen auf der gleichen oder einer höheren Ebene der Ansichtshierarchie erben. Dies bedeutet Folgendes:

  • Ein Stil auf App-Ebene kann nur von anderen Stilen auf App-Ebene erben.
  • Ein Stil auf Seitenebene kann von Stilen auf App-Ebene und von anderen Stilen auf Seitenebene erben.
  • Ein Stil auf Steuerungsebene kann von Stilen auf App-Ebene, Stilen auf Seitenebene und anderen Stilen auf Steuerungsebene erben.

Das folgende Beispiel zeigt eine explizite Stilvererbung:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="baseStyle"
               TargetType="View">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <StackLayout.Resources>
            <Style x:Key="labelStyle"
                   TargetType="Label"
                   BasedOn="{StaticResource baseStyle}">
                <Setter Property="FontSize" Value="18" />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
            <Style x:Key="buttonStyle"
                   TargetType="Button"
                   BasedOn="{StaticResource baseStyle}">
                <Setter Property="BorderColor" Value="Lime" />
                <Setter Property="CornerRadius" Value="5" />
                <Setter Property="BorderWidth" Value="5" />
                <Setter Property="WidthRequest" Value="200" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
        </StackLayout.Resources>
        <Label Text="This label uses style inheritance"
               Style="{StaticResource labelStyle}" />
        <Button Text="This button uses style inheritance"
                Style="{StaticResource buttonStyle}" />
    </StackLayout>
</ContentPage>

In diesem Beispiel zielt der baseStyle auf View-Objekte ab und setzt die HorizontalOptions- und VerticalOptions-Eigenschaften. Der baseStyle wird nicht direkt auf ein Steuerelement gesetzt. Stattdessen erben labelStyle und buttonStyle von ihm und setzen zusätzliche bindbare Eigenschaftswerte. Die labelStyle- und buttonStyle-Objekte werden dann auf ein Label und Button gesetzt.

Wichtig

Ein impliziter Stil kann von einem expliziten Stil abgeleitet werden, aber ein expliziter Stil kann nicht von einem impliziten Stil abgeleitet werden.

Dynamische Stile

Stile reagieren nicht auf Änderungen der Eigenschaften und bleiben während der gesamten Laufzeit einer App unverändert. Wenn beispielsweise nach der Zuweisung eines Style zu einem visuellen Element eines der Setter-Objekte geändert oder gelöscht wird oder ein neuer Setter hinzugefügt wird, werden diese Änderungen nicht auf das visuelle Element angewendet. Apps können jedoch dynamisch auf Stiländerungen zur Laufzeit reagieren, indem sie dynamische Ressourcen verwenden.

Die DynamicResource-Markuperweiterung ähnelt der StaticResource-Markuperweiterung insofern ähnlich, als beide einen Wörterbuchschlüssel verwenden, um einen Wert aus einem ResourceDictionary zu extrahieren. Während die StaticResource jedoch nur eine einzige Wörterbuchabfrage durchführt, behält die DynamicResource eine Verknüpfung zum Wörterbuchschlüssel bei. Wenn also der mit dem Schlüssel verknüpfte Wörterbucheintrag ersetzt wird, wird die Änderung auf das visuelle Element angewendet. Dies ermöglicht Stiländerungen in einer App zur Laufzeit.

Das folgende Beispiel zeigt dynamische Stile:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="baseStyle"
               TargetType="View">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style x:Key="blueSearchBarStyle"
               TargetType="SearchBar"
               BasedOn="{StaticResource baseStyle}">
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue" />
        </Style>
        <Style x:Key="greenSearchBarStyle"
               TargetType="SearchBar">
            <Setter Property="FontAttributes" Value="None" />
            <Setter Property="PlaceholderColor" Value="Green" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <SearchBar Placeholder="SearchBar demonstrating dynamic styles"
                   Style="{DynamicResource blueSearchBarStyle}" />
    </StackLayout>
</ContentPage>

In diesem Beispiel verwendet das SearchBar-Objekt die DynamicResource-Markuperweiterung, um einen Style mit dem Namen blueSearchBarStyle zu setzen. Die SearchBar kann dann ihre Style-Definition im Code aktualisieren lassen:

Resources["blueSearchBarStyle"] = Resources["greenSearchBarStyle"];

In diesem Beispiel wird die blueSearchBarStyle-Definition aktualisiert, um die Werte aus der greenSearchBarStyle-Definition zu verwenden. Wenn dieser Code ausgeführt wird, wird die SearchBar aktualisiert, um die in der greenSearchBarStyle definierten Setter-Objekte zu verwenden.

Vererbung dynamischer Stile

Die Ableitung eines Stils aus einem dynamischen Stil ist mit der Eigenschaft Style.BasedOn nicht möglich. Stattdessen enthält die Style-Klasse die Eigenschaft BaseResourceKey, die auf einen Wörterbuchschlüssel gesetzt werden kann, dessen Wert sich dynamisch ändern kann.

Das folgende Beispiel zeigt eine dynamische Stilvererbung:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="baseStyle"
               TargetType="View">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style x:Key="blueSearchBarStyle"
               TargetType="SearchBar"
               BasedOn="{StaticResource baseStyle}">
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
        <Style x:Key="greenSearchBarStyle"
               TargetType="SearchBar">
            <Setter Property="FontAttributes" Value="None" />
            <Setter Property="TextColor" Value="Green" />
        </Style>
        <Style x:Key="tealSearchBarStyle"
               TargetType="SearchBar"
               BaseResourceKey="blueSearchBarStyle">
            <Setter Property="BackgroundColor" Value="Teal" />
            <Setter Property="CancelButtonColor" Value="White" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <SearchBar Text="SearchBar demonstrating dynamic style inheritance"
                   Style="{StaticResource tealSearchBarStyle}" />
    </StackLayout>
</ContentPage>

In diesem Beispiel verwendet das SearchBar-Objekt die StaticResource-Markuperweiterung, um auf einen Style namens tealSearchBarStyle zu verweisen. Dieser Style definiert einige zusätzliche Eigenschaften und verwendet die BaseResourceKey-Eigenschaft, um auf blueSearchBarStyle zu verweisen. Die DynamicResource-Markuperweiterung ist nicht erforderlich, da tealSearchBarStyle unverändert bleibt, mit Ausnahme von Style, von dem es abgeleitet ist. Daher behält tealSearchBarStyle eine Verbindung zum blueSearchBarStyle bei und wird aktualisiert, wenn sich der Basisstil ändert.

Die Definition von blueSearchBarStyle kann im Code aktualisiert werden:

Resources["blueSearchBarStyle"] = Resources["greenSearchBarStyle"];

In diesem Beispiel wird die blueSearchBarStyle-Definition aktualisiert, um die Werte aus der greenSearchBarStyle-Definition zu verwenden. Wenn dieser Code ausgeführt wird, wird die SearchBar aktualisiert, um die in der greenSearchBarStyle definierten Setter-Objekte zu verwenden.

Stilklassen

Stilklassen ermöglichen es, mehrere Stile auf ein Steuerelement anzuwenden, ohne auf die Stilvererbung zurückgreifen zu müssen.

Eine Stilklasse kann erstellt werden, indem die Class-Eigenschaft eines Style auf eine string gesetzt wird, die den Klassennamen darstellt. Der Vorteil gegenüber der Definition eines expliziten Stils mit dem Attribut x:Key besteht darin, dass mehrere Stilklassen auf einem VisualElement angewendet werden können.

Wichtig

Mehrere Stile können denselben Klassennamen haben, solange sie auf unterschiedliche Typen abzielen. Auf diese Weise können mehrere gleichnamige Stilklassen für unterschiedliche Typen verwendet werden.

Das folgende Beispiel zeigt drei BoxView-Stilklassen und eine VisualElement-Stilklasse:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="BoxView"
               Class="Separator">
            <Setter Property="BackgroundColor"
                    Value="#CCCCCC" />
            <Setter Property="HeightRequest"
                    Value="1" />
        </Style>

        <Style TargetType="BoxView"
               Class="Rounded">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="10" />
        </Style>    

        <Style TargetType="BoxView"
               Class="Circle">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="WidthRequest"
                    Value="100" />
            <Setter Property="HeightRequest"
                    Value="100" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="50" />
        </Style>

        <Style TargetType="VisualElement"
               Class="Rotated"
               ApplyToDerivedTypes="true">
            <Setter Property="Rotation"
                    Value="45" />
        </Style>        
    </ContentPage.Resources>
</ContentPage>

In diesem Beispiel setzen die Separator-, Rounded- und Circle-Stilklassen die BoxView-Eigenschaften auf bestimmte Werte. Die Rotated-Stilklasse hat einen TargetType vom VisualElement, was bedeutet, dass sie nur auf VisualElement-Instanzen angewendet werden kann. Seine ApplyToDerivedTypes-Eigenschaft ist jedoch auf true gesetzt, wodurch sichergestellt wird, dass sie auf alle vom VisualElement abgeleiteten Steuerelemente wie BoxView angewendet werden kann. Weitere Informationen zur Anwendung eines Stils auf einen abgeleiteten Typ finden Sie unter Anwenden eines Stils auf abgeleitete Typen.

Stilklassen können verwendet werden, indem die StyleClass-Eigenschaft des Steuerelements, die vom Typ IList<string> ist, auf eine Liste von Stilklassennamen gesetzt wird. Die Stilklassen werden angewendet, wenn der Typ des Steuerelements mit dem TargetType der Stilklassen übereinstimmt.

Das folgende Beispiel zeigt drei BoxView-Instanzen, die jeweils auf unterschiedliche Stilklassen gesetzt sind:

<ContentPage ...>
    <ContentPage.Resources>
        ...
    </ContentPage.Resources>
    <StackLayout>
        <BoxView StyleClass="Separator" />       
        <BoxView WidthRequest="100"
                 HeightRequest="100"
                 HorizontalOptions="Center"
                 StyleClass="Rounded, Rotated" />
        <BoxView HorizontalOptions="Center"
                 StyleClass="Circle" />
    </StackLayout>
</ContentPage>

In diesem Beispiel ist der erste BoxView als Zeilentrennzeichen gestaltet, während der dritte BoxView kreisförmig ist. Auf den zweiten BoxView werden zwei Stilklassen angewendet, die ihm abgerundete Ecken und eine Drehung um 45 Grad verleihen:

Screenshot von BoxViews, die mit Formatvorlagenklassen formatiert sind.

Wichtig

Auf ein Steuerelement können mehrere Stilklassen angewendet werden, da die Eigenschaft StyleClass vom Typ IList<string> ist. In diesem Fall werden die Stilklassen in aufsteigender Reihenfolge der Liste angewendet. Wenn also mehrere Stilklassen identische Eigenschaften definieren, hat die Eigenschaft der Stilklasse Vorrang, die in der Liste an erster Stelle steht.