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 eine App-Darstellung einfacher zu ändern.

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

• Style In XAML erstellte Objekte werden typischerweise in einer ResourceDictionary Auflistung eines Steuerelements, einer Seite oder einer Resources Auflistung der Anwendung definiert.
• 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. Jedoch werden die Unterklassen der TargetType nicht automatisch Style 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. Eine auf App-Ebene festgelegte Style-Einstellung wird beispielsweise durch eine auf Seitenebene festgelegte Formatierung überschrieben, die Label.TextColorRed auf Label.TextColorGreen setzt. Ebenso wird eine Formatvorlage auf Seitenebene durch eine Formatvorlage auf Kontrollebene überschrieben. Zusätzlich, wenn Label.TextColor direkt auf eine Steuerelementeigenschaft gesetzt wird, hat es Vorrang vor allen Formatvorlagen.

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 Dynamischen Formatvorlagen.

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 Formatvorlagen in einer Seite ResourceDictionary und diese auf die Objekte der Seite Label angewendet:

<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 eine andere Label angewendet, indem seine Style Eigenschaften mithilfe der StaticResource Markup-Erweiterung festgelegt werden. Zusätzlich wird, während die endgültige Label ein Style gesetzt hat, auch die TextColor-Eigenschaft auf einen anderen Color-Wert überschrieben.

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. Die Formatvorlage wird dann auf im Umfang liegende visuelle Elemente angewendet, die dem TargetType exakt entsprechen, aber nicht auf Elemente, die vom TargetType-Wert abgeleitet werden.

Das folgende Codebeispiel zeigt eine implizite Formatvorlage in den Seiten ResourceDictionaryund angewendet auf die Objekte der Seite Entry :

<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 wird eine einzelne implizite ResourceDictionary definiert, die implizit auf den Seitenobjekten festgelegt ist. 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. Darüber hinaus überschreibt der vierte Entry die BackgroundColor und TextColor Eigenschaften der Formatvorlage auf unterschiedliche 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 Sie diese Eigenschaft so festlegen, dass true eine einzelne Formatvorlage auf mehrere Typen angewendet werden kann, vorausgesetzt, die Typen werden von dem Basistyp abgeleitet, der in der TargetType Eigenschaft angegeben ist.

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 die buttonStyle Objekte der Seite Button 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.

Formatvorlagen, die von einer Basisformatvorlage erben, können Setter-Instanzen für neue Eigenschaften enthalten oder um Setter der Basisformatvorlage zu überschreiben verwenden. 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.

Eine Formatvorlage kann nur von Formatvorlagen auf derselben Ebene oder höher in der Ansichts-Hierarchie erben. Dies bedeutet Folgendes:

• Eine Formatvorlage auf App-Ebene kann nur von anderen Formatvorlagen auf App-Ebene erben.
• Ein Seitenstil kann von Stilen auf Anwendungsebene und anderen Seitenstilen erben.
• Eine Formatvorlage auf Steuerelementebene kann von Stilen auf App-Ebene, Formatvorlagen auf Seitenebene und anderen Formatvorlagen auf Steuerelementebene 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. Die baseStyle Einstellung wird nicht direkt für Steuerelemente festgelegt. 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 Markuperweiterung, um einen Style namens blueSearchBarStyle festzulegen. Die Definition von SearchBar kann dann im Code Style 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.

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. Dadurch werden zusätzliche Eigenschaften festgelegt und die Style-Eigenschaft verwendet, um direkt auf BaseResourceKey zu verweisen. Die DynamicResource-Markuperweiterung ist nicht erforderlich, weil sich tealSearchBarStyle nicht ändert, mit Ausnahme von Style, von dem es abgeleitet wird. Daher wird ein Link zu tealSearchBarStyle verwaltet und aktualisiert, wenn sich die Basisformatvorlage ändert, zu blueSearchBarStyle.

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 eine TargetType von 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 genutzt werden, indem die StyleClass-Eigenschaft des Steuerelements vom Typ IList<string> 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. Die zweite BoxView hat zwei Stilklassen angewandt, die ihm abgerundete Ecken verleihen und es um 45 Grad drehen.

// 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();