Apps mit XAML gestalten

.NET Multiplattform-App-UI (.NET MAUI) enthalten häufig mehrere Steuerelemente, die ein identisches Erscheinungsbild aufweisen. Eine App kann z. B. mehrere Label Instanzen mit den gleichen Schriftartoptionen und Layoutoptionen 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 weist jedes Label Objekt identische Eigenschaftswerte auf, um die Darstellung des texts zu steuern, der von der LabelZeichenfolge angezeigt wird. Das Festlegen der Darstellung jedes einzelnen Steuerelements kann jedoch sich wiederholend und fehleranfällig sein. Stattdessen kann eine Formatvorlage erstellt werden, die die Darstellung definiert und dann auf die erforderlichen Steuerelemente angewendet wird.

Einführung in Stile

Eine App kann mithilfe der Style Klasse formatiert werden, um eine Auflistung von Eigenschaftswerten in ein Objekt zu gruppieren, das dann auf mehrere visuelle Elemente angewendet werden kann. Dies trägt dazu bei, sich wiederholendes Markup 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 In C# erstellte Objekte werden in der Regel in der Klasse der Seite oder in einer Klasse definiert, auf die global zugegriffen werden kann.

Die Entscheidung, wo eine Style definiert wird, beeinflusst, wo sie verwendet werden kann:

• Style Instanzen, die auf der Ebene eines Steuerelements definiert sind, können nur auf das Steuerelement selbst und seine untergeordneten Elemente angewendet werden.
• Style Instanzen, die auf Seitenebene definiert sind, können nur auf die Seite und die untergeordneten Elemente angewendet werden.
• Style Instanzen, die auf 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 jedes Setter Objekt ein Property und ein Value hat. Das Property ist der Name der bindungsfähigen Eigenschaft des Elements, auf das die Formatvorlage angewendet wird, und das Value ist der Wert, der auf die Eigenschaft angewendet wird.

Jedes Style Objekt kann explizit oder implizit sein:

• Ein explizitesStyle Objekt wird durch Angeben eines TargetTypex:Key Werts und durch Festlegen der Eigenschaft des Zielelements Style auf den x:Key Verweis definiert. Weitere Informationen finden Sie unter Explizite Formatvorlagen.
• Ein implizitesStyle Objekt wird definiert, indem nur ein TargetType. 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 Formatvorlagen.

Beim Erstellen eines Style ist die TargetType-Eigenschaft immer erforderlich. 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 ein 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 Stile, die weiter unten definiert sind, Vorrang vor denen, die höher oben definiert sind. 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 Eigenschaftsänderungen und bleiben unverändert während der Laufzeit einer App. Apps können jedoch dynamisch auf Stiländerungen während der Laufzeit reagieren, indem sie dynamische Ressourcen verwenden. Weitere Informationen finden Sie unter Dynamische Stile.

Explizite Formatvorlagen

Um eine Style auf Seitenebene zu erstellen, muss der Seite eine ResourceDictionary hinzugefügt werden, und dann können eine oder mehrere Style-Deklarationen in die ResourceDictionary eingeschlossen werden. Ein Style wird explizit gemacht, indem seiner Deklaration ein x:Key-Attribut hinzugefügt wird, das der Deklaration einen beschreibenden Schlüssel in der ResourceDictionary gibt. Explizite Formatvorlagen müssen dann auf bestimmte visuelle Elemente angewendet werden, indem sie ihre Style Eigenschaften festlegen.

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 ResourceDictionary drei Formatvorlagen, die explizit für die Label Objekte der Seite festgelegt werden. Jeder Style wird verwendet, um Text in einer anderen Farbe darzustellen, sowie den Schriftgrad und horizontale und vertikale 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 Formatvorlagen

Um eine Style auf Seitenebene zu erstellen, muss der Seite eine ResourceDictionary hinzugefügt werden, und dann können eine oder mehrere Style-Deklarationen in die ResourceDictionary eingeschlossen werden. Ein Style wird implizit, 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 ResourceDictionary eine einzelne implizite Formatvorlage, die implizit für die Entry-Objekte der Seite festgelegt wird. Dies Style wird verwendet, um blauen Text auf einem gelben Hintergrund anzuzeigen, während auch andere Darstellungsoptionen festgelegt werden. Das Style wird zur Seite ResourceDictionary hinzugefügt, ohne dass ein x:Key-Attribut angegeben wird. Daher wird auf alle Style Objekte implizit die Entry angewendet, da sie genau mit der TargetType Eigenschaft der Style übereinstimmen. Dies Style wird jedoch nicht auf das CustomEntry Objekt angewendet, bei dem es sich um eine Unterklasse handelt Entry. Außerdem überschreibt das vierte Entry die BackgroundColor- und TextColor-Eigenschaften des Stils auf verschiedene Color-Werte.

Anwenden einer Formatvorlage auf abgeleitete Typen

Mit der Style.ApplyToDerivedTypes-Eigenschaft kann eine Stilvorlage auf Steuerelemente angewendet werden, die vom Basistyp abgeleitet sind, auf den die TargetType-Eigenschaft verweist. 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 eine implizite Formatvorlage, die die Hintergrundfarbe von Button Instanzen auf Rot festlegt:

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

Wenn Sie diese Formatvorlage auf seitenebene ResourceDictionary platzieren, wird sie auf alle Button Objekte auf der Seite und auch auf alle Steuerelemente angewendet, die von Buttondiesen abgeleitet werden. Wenn die ApplyToDerivedTypes-Eigenschaft nicht festgelegt ist, würde der Stil jedoch 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 einer App verwendet werden und helfen, die Formatduplizierung auf verschiedenen Seiten und Steuerelementen zu vermeiden.

Das folgende Beispiel zeigt eine auf App-Ebene definierte Style:

<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="Center" />
            <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 ResourceDictionary eine einzelne explizite Formatvorlage buttonStyle, die zum Festlegen der Darstellung von Button Objekten verwendet wird.

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

Formatvorlagen können von anderen Formatvorlagen erben, um Duplizierung zu reduzieren und die Wiederverwendung zu ermöglichen. Dies wird erreicht, indem die Style.BasedOn Eigenschaft auf eine vorhandene StyleEigenschaft festgelegt wird. In XAML kann dies erreicht werden, indem die BasedOn Eigenschaft auf eine StaticResource Markuperweiterung festgelegt wird, die auf eine zuvor erstellte Erweiterung Styleverweist.

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 Formatvorlagen, die von einer Basisformatvorlage erben, auf denselben Typ oder einen Typ abzielen, der von dem Typ abgeleitet ist, auf den die Basisformatvorlage abzielt. Wenn beispielsweise eine Basisformatvorlage auf View Objekte abzielt, können Formatvorlagen, die auf der Basisformatvorlage basieren, auf View Objekte oder Typen abzielen, die von der Klasse View abgeleitet sind, wie z. B. Label und Button Objekte.

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

• Eine Formatvorlage auf App-Ebene kann nur von anderen Formatvorlagen 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 explizite Formatvererbung:

<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 baseStyle auf View-Objekte ab und setzt die Eigenschaften HorizontalOptions und VerticalOptions. Der baseStyle wird nicht direkt auf ein Steuerelement gesetzt. Stattdessen erben labelStyle und buttonStyle von ihr, indem sie zusätzliche bindbare Eigenschaftswerte festlegen. Die Objekte labelStyle und buttonStyle werden dann auf ein Label und ein Button gesetzt.

Dynamische Stile

Stile reagieren nicht auf Eigenschaftsänderungen und bleiben unverändert während der Laufzeit einer App. Wenn einem visuellen Element ein Style zugewiesen wurde und daraufhin eines der Setter Objekte geändert, entfernt oder ein neues Setter hinzugefügt wird, werden diese Änderungen nicht auf das visuelle Element angewendet. Apps können jedoch dynamisch auf Stiländerungen während der Laufzeit reagieren, indem sie dynamische Ressourcen verwenden.

Die DynamicResource-Markuperweiterung ist der StaticResource-Markuperweiterung ähnlich, da beide einen Wörterbuchschlüssel verwenden, um einen Wert aus einem ResourceDictionary zu beziehen. Während der StaticResource jedoch eine einzelne Nachschlageoperation im Wörterbuch ausführt, behält der DynamicResource einen Link zum Wörterbuchschlüssel bei. Wenn der dem Schlüssel zugeordnete Wörterbucheintrag ersetzt wird, wird die Änderung daher auf das visuelle Element angewendet. Dadurch können Laufzeitstiländerungen in einer App vorgenommen werden.

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-Markup-Erweiterung, um ein Style mit dem Namen blueSearchBarStyle festzulegen. 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 SearchBar aktualisiert, um die Setter Objekte in greenSearchBarStyle zu verwenden.

Vererbung dynamischer Stile

Das Ableiten eines Stils aus einem dynamischen Stil kann nicht mithilfe der Eigenschaft Style.BasedOn erreicht werden. Stattdessen enthält die Style Klasse die BaseResourceKey Eigenschaft, die auf einen Wörterbuchschlüssel festgelegt werden kann, dessen Wert sich möglicherweise dynamisch ändern kann.

Das folgende Beispiel zeigt die dynamische Vererbung von Stilen:

<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 ein 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, weil sich tealSearchBarStyle nicht ändert, mit Ausnahme von Style, von dem es abgeleitet wird. Daher behält tealSearchBarStyle eine Verbindung zum blueSearchBarStyle bei und wird aktualisiert, wenn sich der Basisstil ändert.

Die blueSearchBarStyle Definition 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 SearchBar aktualisiert, um die Setter Objekte in greenSearchBarStyle zu verwenden.

Stilklassen

Formatvorlagenklassen ermöglichen das Anwenden mehrerer Formatvorlagen auf ein Steuerelement, ohne auf die Formatvorlagenvererbung zurückgreifen zu müssen.

Eine Stilklasse kann erstellt werden, indem die Class Eigenschaft eines Style auf einen string gesetzt wird, der den Klassennamen darstellt. Der Vorteil, den dies gegenüber der Definition einer expliziten Formatvorlage mittels des Attributs x:Key bietet, ist, dass mehrere Stilklassen auf eine VisualElement angewendet werden können.

Das folgende Beispiel zeigt drei BoxView Formatvorlagenklassen und eine VisualElement Formatvorlagenklasse:

<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 legen die Stilklassen Separator, Rounded und Circle jeweils BoxView-Eigenschaften auf bestimmte Werte fest. Die Rotated-Stilklasse hat einen TargetType vom VisualElement, was bedeutet, dass sie nur auf VisualElement-Instanzen angewendet werden kann. Die Eigenschaft von ApplyToDerivedTypes ist jedoch auf true festgelegt, wodurch sichergestellt wird, dass sie auf alle Steuerelemente angewendet werden kann, die von VisualElement, wie z. B. BoxView, abgeleitet werden. Weitere Informationen zum Anwenden einer Formatvorlage auf einen abgeleiteten Typ finden Sie unter Anwenden einer Formatvorlage 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 Formatvorlagenklassen werden angewendet, sofern der Typ des Steuerelements mit den TargetType Formatvorlagenklassen übereinstimmt.

Das folgende Beispiel zeigt drei BoxView Instanzen, die jeweils auf unterschiedliche Stilklassen festgelegt 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 wird der erste BoxView als Linientrennzeichen formatiert, 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:

// Find the style defined in resources.
var myStyle = (Style)Resources["myLabelStyle"];

// Modify a setter value in-place.
myStyle.Setters[0].Value = Colors.Red;

// Force the controls to pick up the change.
myLabel1.InvalidateStyle();
myLabel2.InvalidateStyle();