Formatieren von Apps mit Cascading StyleSheets

Artikel
03/25/2025

.NET Multi-platform App UI (.NET MAUI)-Apps können mithilfe von Cascading StyleSheets (CSS) formatiert werden. Ein Stylesheet besteht aus einer Liste von Regeln, wobei jede Regel aus einer oder mehreren Selektoren und einem Deklarationsblock besteht. Ein Deklarationsblock besteht aus einer Liste von Deklarationen in geschweiften Klammern, wobei jede Deklaration aus einer Eigenschaft, einem Doppelpunkt und einem Wert besteht. Wenn mehrere Deklarationen in einem Block vorhanden sind, wird ein Semikolon als Trennzeichen eingefügt.

Das folgende Beispiel zeigt einige .NET MAUI-kompatible CSS:The following example shows some .NET MAUI compliant CSS:

navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

listview image {
    height: 60;
    width: 60;
}

stacklayout>image {
    height: 200;
    width: 200;
}

In .NET MAUI werden CSS-Stylesheets zur Laufzeit analysiert und ausgewertet und nicht kompiliert, und Stylesheets werden bei der Verwendung erneut analysiert.

Wichtig

Es ist nicht möglich, eine .NET MAUI-App mit CSS vollständig zu formatieren. XAML-Formatvorlagen können jedoch verwendet werden, um CSS zu ergänzen. Weitere Informationen zu XAML-Formatvorlagen finden Sie unter Apps mit XAML gestalten.

Ein Stylesheet verwenden

Der Prozess zum Hinzufügen eines Stylesheets zu einer .NET MAUI-App lautet wie folgt:

Fügen Sie Ihrem .NET MAUI-App-Projekt eine leere CSS-Datei hinzu. Die CSS-Datei kann in einem beliebigen Ordner platziert werden, wobei die Ressourcen Ordner der empfohlene Speicherort ist.
Legen Sie die Buildaktion der CSS-Datei auf MauiCssfest.

Laden eines Stylesheets

Es gibt eine Reihe von Ansätzen, die zum Laden eines Stylesheets verwendet werden können.

Anmerkung

Es ist nicht möglich, ein Stylesheet zur Laufzeit zu ändern und das neue Stylesheet angewendet zu haben.

Laden eines Stylesheets in XAML

Ein Stylesheet kann mit der StyleSheet Klasse geladen und analysiert werden, bevor sie einem ResourceDictionaryhinzugefügt wird:

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

Die StyleSheet.Source-Eigenschaft gibt das Stylesheet als URI relativ zum Speicherort der eingeschlossenen XAML-Datei oder relativ zum Projektstamm an, wenn der URI mit einem /beginnt.

Warnung

Die CSS-Datei kann nicht geladen werden, wenn die Buildaktion nicht auf MauiCssfestgelegt ist.

Alternativ kann ein Stylesheet mit der StyleSheet-CSS-Klasse geladen und geparst werden, bevor es zu einem ResourceDictionaryhinzugefügt wird, indem es in einen CDATA-Abschnitt eingefügt wird.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

Weitere Informationen zu Ressourcenwörterbüchern finden Sie unter Ressourcenwörterbücher.

Laden eines Stylesheets in C#

In C# kann ein Stylesheet aus einem StringReader geladen und einem ResourceDictionaryhinzugefügt werden:

using Microsoft.Maui.Controls.StyleSheets;

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

Das Argument für die StyleSheet.FromReader-Methode ist die TextReader, die das Stylesheet gelesen hat.

Auswählen von Elementen und Anwenden von Eigenschaften

CSS verwendet Selektoren, um zu bestimmen, welche Elemente als Ziel verwendet werden sollen. Stile mit übereinstimmenden Selektoren werden in der Definitionsreihenfolge nacheinander angewendet. Stile, die für ein bestimmtes Element definiert sind, werden stets zuletzt angewendet. Weitere Informationen zu unterstützten Selektoren finden Sie unter Selector-Referenz.

CSS verwendet Eigenschaften zum Formatieren eines ausgewählten Elements. Jede Eigenschaft verfügt über einen Satz möglicher Werte, und einige Eigenschaften können sich auf jeden Elementtyp auswirken, während andere auf Gruppen von Elementen angewendet werden. Weitere Informationen zu unterstützten Eigenschaften finden Sie unter Eigenschaftsreferenz.

Kind-Stylesheets überschreiben immer Eltern-Stylesheets, wenn sie dieselben Eigenschaften festlegen. Daher werden die folgenden Rangfolgeregeln beim Anwenden von Formatvorlagen befolgt, die dieselben Eigenschaften festlegen:

Eine in den App-Ressourcen definierte Formatvorlage wird durch eine in den Seitenressourcen definierte Formatvorlage überschrieben, wenn sie dieselben Eigenschaften festlegen.
Eine in Seitenressourcen definierte Formatvorlage wird durch eine in den Steuerungsressourcen definierte Formatvorlage überschrieben, wenn sie dieselben Eigenschaften festlegen.
Eine in den App-Ressourcen definierte Formatvorlage wird durch eine in den Steuerelementressourcen definierte Formatvorlage überschrieben, wenn sie dieselben Eigenschaften festlegen.

Anmerkung

CSS-Variablen werden nicht unterstützt.

Elemente nach Typ auswählen

Elemente in der visuellen Struktur können nach Typ ausgewählt werden, wobei die Groß-/Kleinschreibung nicht beachtet wird element Selektor:

stacklayout {
    margin: 20;
}

Dieser Selektor identifiziert alle StackLayout Elemente auf Seiten, die das Stylesheet verwenden, und legt ihre Ränder auf eine einheitliche Stärke von 20 fest.

Anmerkung

Der element Selektor identifiziert keine Unterklassen des angegebenen Typs.

Auswählen von Elementen nach Basisklasse

Elemente im visuellen Baum können mithilfe des case-insensitiven ^base-Selectors nach der Basisklasse ausgewählt werden.

^contentpage {
    background-color: lightgray;
}

Dieser Selektor erkennt alle ContentPage-Elemente, die das Stylesheet verwenden, und legt deren Hintergrundfarbe auf lightgrayfest.

Anmerkung

Der ^base-Selektor ist spezifisch für .NET MAUI und nicht Teil der CSS-Spezifikation.

Auswählen eines Elements anhand des Namens

Einzelne Elemente im visuellen Baum können mit dem fallbezogenen #id-Selektor ausgewählt werden.

#listView {
    background-color: lightgray;
}

Dieser Selektor identifiziert das Element, dessen StyleId-Eigenschaft auf listViewfestgelegt ist. Wenn die StyleId-Eigenschaft jedoch nicht festgelegt ist, fällt der Selektor auf die Verwendung der x:Name des Elements zurück. Daher wird im folgenden Beispiel der #listView Selektor die ListView identifizieren, deren x:Name Attribut auf listViewfestgelegt ist, und legt die Hintergrundfarbe auf lightgrayfest.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Auswählen von Elementen mit einem bestimmten Klassenattribute

Elemente mit einem bestimmten Klassenattribut können mit dem groß-/kleinsensitiven .class-Selektor ausgewählt werden.

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

Eine CSS-Klasse kann einem XAML-Element zugewiesen werden, indem die StyleClass Eigenschaft des Elements auf den CSS-Klassennamen festgelegt wird. Daher werden im folgenden Beispiel die von der .detailPageTitle Klasse definierten Formatvorlagen dem ersten Labelzugewiesen, während die von der .detailPageSubtitle Klasse definierten Formatvorlagen dem zweiten Labelzugewiesen werden.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Auswählen untergeordneter Elemente

Untergeordnete Elemente im visuellen Baum können mit dem Groß-/Kleinschreibung-unabhängigen element element-Selektor ausgewählt werden.

listview image {
    height: 60;
    width: 60;
}

Dieser Selektor identifiziert alle Image Elemente, die Kinder von ListView Elementen sind, und setzt ihre Höhe und Breite auf 60. Daher wird im folgenden XAML-Beispiel durch den listview image-Selektor das Image-Element identifiziert, das ein Kind des ListViewist, und seine Höhe und Breite werden auf 60 festgelegt.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Anmerkung

Der element element-Selektor erfordert nicht, dass das untergeordnete Element ein direkter Nachkomme des übergeordneten Elements ist – es kann auch ein anderes übergeordnetes Element haben. Die Auswahl erfolgt, sofern ein Vorgänger das angegebene erste Element ist.

Auswählen direkter untergeordneter Elemente

Direkte untergeordnete Elemente im visuellen Baum können mit dem groß-/kleinschreibungsunabhängigen element>element-Selektor ausgewählt werden.

stacklayout>image {
    height: 200;
    width: 200;
}

Dieser Selektor identifiziert alle Image-Elemente, die direkte untergeordnete Elemente von StackLayout-Elementen sind und setzt ihre Höhe und Breite auf 200 Pixel fest. Daher wird im folgenden Beispiel vom stacklayout>image-Selektor das Image identifiziert, welches ein direktes untergeordnetes Element des StackLayoutist, und dessen Höhe und Breite auf 200 Pixel festgelegt.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            ...
            <Image ... />
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

Anmerkung

Die element>element Selektor erfordert, dass das untergeordnete Element ein direktes -Kindelement des übergeordneten Elements ist.

Selektorreferenz

Die folgenden CSS-Selektoren werden von .NET MAUI unterstützt:

Selektor	Beispiel	Beschreibung
`.class`	`.header`	Wählt alle Elemente mit der Eigenschaft `StyleClass` aus, die 'header' enthalten. Bei dieser Auswahl wird die Groß-/Kleinschreibung beachtet.
`#id`	`#email`	Wählt alle Elemente aus, für die `StyleId` auf `email`festgelegt sind. Wenn `StyleId` nicht festgelegt ist, auf `x:Name`zurückgreifen. Bei verwendung von XAML wird `x:Name` gegenüber `StyleId`bevorzugt. Bei dieser Auswahl wird die Groß-/Kleinschreibung beachtet.
`*`	`*`	Wählt alle Elemente aus.
`element`	`label`	Wählt alle Elemente vom Typ Labelaus, jedoch keine Unterklassen. Dieser Selektor ist nicht auf Groß- und Kleinschreibung empfindlich.
`^base`	`^contentpage`	Wählt alle Elemente mit ContentPage als Basisklasse aus, einschließlich ContentPage selbst. Dieser Selektor ist unabhängig von der Groß-/Kleinschreibung und ist nicht Teil der CSS-Spezifikation.
`element,element`	`label,button`	Wählt alle Button Elemente und alle Label Elemente aus. Bei diesem Selektor wird die Groß-/Kleinschreibung nicht beachtet.
`element element`	`stacklayout label`	Wählt alle Label-Elemente in einem StackLayoutaus. Bei diesem Auswahlfeld wird die Groß-/Kleinschreibung nicht beachtet.
`element>element`	`stacklayout>label`	Wählt alle Label Elemente mit StackLayout als direktes übergeordnetes Element aus. Der Selektor ist ohne Berücksichtigung der Groß-/Kleinschreibung.
`element+element`	`label+entry`	Wählt alle Entry-Elemente, die sich direkt hinter einem Labelbefinden, aus. Bei dieser Auswahl wird die Groß-/Kleinschreibung nicht beachtet.
`element~element`	`label~entry`	Wählt alle Entry Elemente aus, denen ein Labelvorangestellt ist. Dieser Selektor ist nicht empfindlich auf die Groß-/Kleinschreibung.

Formatvorlagen mit übereinstimmenden Selektoren werden in der Definitionsreihenfolge nacheinander angewendet. Stile, die für ein bestimmtes Element definiert sind, werden immer zuletzt angewendet.

Trinkgeld

Selektoren können ohne Einschränkung kombiniert werden, z. B. StackLayout>ContentView>label.email.

Die folgenden Selektoren werden nicht unterstützt:

[attribute]
@media und @supports
: und ::

Anmerkung

Spezifität und Spezifitätsüberschreibungen werden nicht unterstützt.

Wenn zwei oder mehr CSS-Regeln auf dasselbe Element verweisen, hat der Selektor mit der höchsten Spezifität Vorrang, und seine Formatvorlagendeklaration wird auf das Element angewendet. Der Spezifitätsalgorithmus berechnet die Gewichtung eines CSS-Selektors, um zu bestimmen, welche Regel aus konkurrierenden CSS-Deklarationen auf das Element angewendet wird.

Eigenschaftsreferenz

Die folgenden CSS-Eigenschaften werden von .NET MAUI unterstützt (in der spalte Values, types are italic, while string literals are gray):

Eigentum	Gilt für	Werte	Beispiel
`align-content`	FlexLayout	`stretch` \| `center` \| `start` \| `end` \| `spacebetween` \| `spacearound` \| `spaceevenly` \| `flex-start` \| `flex-end` \| `space-between` \| `space-around` \| `initial`	`align-content: space-between;`
`align-items`	FlexLayout	`stretch` \| `center` \| `start` \| `end` \| `flex-start` \| `flex-end` \| `initial`	`align-items: flex-start;`
`align-self`	VisualElement	`auto` \| `stretch` \| `center` \| `start` \| `end` \| `flex-start` \| `flex-end` \| `initial`	`align-self: flex-end;`
`background-color`	VisualElement	Farbe \| `initial`	`background-color: springgreen;`
`background-image`	Page	Zeichenfolge \| `initial`	`background-image: bg.png;`
`border-color`	Button, Frame, ImageButton	Farbe \| `initial`	`border-color: #9acd32;`
`border-radius`	BoxView, Button, Frame, ImageButton	doppelten \| `initial`	`border-radius: 10;`
`border-width`	Button, ImageButton	doppelte \| `initial`	`border-width: .5;`
`color`	ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker	Farbe \| `initial`	`color: rgba(255, 0, 0, 0.3);`
`column-gap`	Grid	doppelt \| `initial`	`column-gap: 9;`
`direction`	VisualElement	`ltr` \| `rtl` \| `inherit` \| `initial`	`direction: rtl;`
`flex-direction`	FlexLayout	`column` \| `columnreverse` \| `row` \| `rowreverse` \| `row-reverse` \| `column-reverse` \| `initial`	`flex-direction: column-reverse;`
`flex-basis`	VisualElement	float \| `auto` \| `initial`. Darüber hinaus kann ein Prozentsatz im Bereich von 0% bis 100% mit dem `%`-Zeichen angegeben werden.	`flex-basis: 25%;`
`flex-grow`	VisualElement	float \| `initial`	`flex-grow: 1.5;`
`flex-shrink`	VisualElement	float- \| `initial`	`flex-shrink: 1;`
`flex-wrap`	VisualElement	`nowrap` \| `wrap` \| `reverse` \| `wrap-reverse` \| `initial`	`flex-wrap: wrap-reverse;`
`font-family`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span	String \| `initial`	`font-family: Consolas;`
`font-size`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span	doppelt \| `initial`	`font-size: 12;`
`font-style`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span	`bold` \| `italic` \| `initial`	`font-style: bold;`
`height`	VisualElement	doppelte \| `initial`	`height: 250;`
`justify-content`	FlexLayout	`start` \| `center` \| `end` \| `spacebetween` \| `spacearound` \| `spaceevenly` \| `flex-start` \| `flex-end` \| `space-between` \| `space-around` \| `initial`	`justify-content: flex-end;`
`letter-spacing`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, SearchHandler, Span, TimePicker	doppelt \| `initial`	`letter-spacing: 2.5;`
`line-height`	Label, Span	doppelt \| `initial`	`line-height: 1.8;`
`margin`	View	Stärke \| `initial`	`margin: 6 12;`
`margin-left`	View	Stärke \| `initial`	`margin-left: 3;`
`margin-top`	View	Stärke \| `initial`	`margin-top: 2;`
`margin-right`	View	Stärke \| `initial`	`margin-right: 1;`
`margin-bottom`	View	Stärke \| `initial`	`margin-bottom: 6;`
`max-lines`	Label	int \| `initial`	`max-lines: 2;`
`min-height`	VisualElement	doppelt \| `initial`	`min-height: 50;`
`min-width`	VisualElement	doppelter \| `initial`	`min-width: 112;`
`opacity`	VisualElement	doppelt \| `initial`	`opacity: .3;`
`order`	VisualElement	int \| `initial`	`order: -1;`
`padding`	Button, ImageButton, Layout, Page	Stärke \| `initial`	`padding: 6 12 12;`
`padding-left`	Button, ImageButton, Layout, Page	\| `initial` doppelt	`padding-left: 3;`
`padding-top`	Button, ImageButton, Layout, Page	doppelt \| `initial`	`padding-top: 4;`
`padding-right`	Button, ImageButton, Layout, Page	doppelt \| `initial`	`padding-right: 2;`
`padding-bottom`	Button, ImageButton, Layout, Page	doppelt \| `initial`	`padding-bottom: 6;`
`position`	FlexLayout	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	Grid	doppelte \| `initial`	`row-gap: 12;`
`text-align`	Entry, EntryCell, Label, SearchBar	`left` \| `top` \| `right` \| `bottom` \| `start` \| `center` \| `middle` \| `end` \| `initial`. `left` und `right` sollten in Rechts-nach-links-Umgebungen vermieden werden.	`text-align: right;`
`text-decoration`	Label, Span	`none` \| `underline` \| `strikethrough` \| `line-through` \| `initial`	`text-decoration: underline, line-through;`
`text-transform`	Button,Editor, Entry, Label, SearchBar, SearchHandler	`none` \| `default` \| `uppercase` \| `lowercase` \| `initial`	`text-transform: uppercase;`
`transform`	VisualElement	`none`, `rotate`, `rotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `translate`, `translateX`, `translateY`, `initial`	`transform: rotate(180), scaleX(2.5);`
`transform-origin`	VisualElement	doppeltdoppelt \| `initial`	`transform-origin: 7.5, 12.5;`
`vertical-align`	Label	`left` \| `top` \| `right` \| `bottom` \| `start` \| `center` \| `middle` \| `end` \| `initial`	`vertical-align: bottom;`
`visibility`	VisualElement	`true` \| `visible` \| `false` \| `hidden` \| `collapse` \| `initial`	`visibility: hidden;`
`width`	VisualElement	doppelt \| `initial`	`width: 320;`

Anmerkung

initial ist ein gültiger Wert für alle Eigenschaften. Er löscht den Wert (wird auf standard zurückgesetzt), der aus einer anderen Formatvorlage festgelegt wurde.

Die folgenden Eigenschaften werden nicht unterstützt:

all: initial.
Layouteigenschaften (Feld oder Raster).
Kurzschreibweisen wie fontund border.

Darüber hinaus gibt es keinen inherit Wert, sodass die Vererbung nicht unterstützt wird. Daher können Sie z. B. die font-size-Eigenschaft für ein Layout nicht festlegen und erwarten, dass alle Label Instanzen im Layout den Wert erben. Die einzige Ausnahme ist die direction-Eigenschaft, die einen Standardwert von inherithat.

Wichtig

Span-Elemente können nicht mithilfe von CSS angesprochen werden.

.NET MAUI-spezifische Eigenschaften

Die folgenden .NET MAUI-spezifischen CSS-Eigenschaften werden ebenfalls unterstützt (in der Werte Spalte sind die Typen kursiv, während Zeichenfolgenliterale gray):

Eigentum	Gilt für	Werte	Beispiel
`-maui-bar-background-color`	NavigationPage, TabbedPage	Farbe \| `initial`	`-maui-bar-background-color: teal;`
`-maui-bar-text-color`	NavigationPage, TabbedPage	Farbe \| `initial`	`-maui-bar-text-color: gray`
`-maui-horizontal-scroll-bar-visibility`	ScrollView	`default` \| `always` \| `never` \| `initial`	`-maui-horizontal-scroll-bar-visibility: never;`
`-maui-max-length`	Entry, Editor, SearchBar	int \| `initial`	`-maui-max-length: 20;`
`-maui-max-track-color`	Slider	Farbe \| `initial`	`-maui-max-track-color: red;`
`-maui-min-track-color`	Slider	Farbe \| `initial`	`-maui-min-track-color: yellow;`
`-maui-orientation`	ScrollView, StackLayout	`horizontal` \| `vertical` \| `both` \| `initial`. `both` wird nur für eine ScrollViewunterstützt.	`-maui-orientation: horizontal;`
`-maui-placeholder`	Entry, Editor, SearchBar	zitierter Text \| `initial`	`-maui-placeholder: Enter name;`
`-maui-placeholder-color`	Entry, Editor, SearchBar	Farbe \| `initial`	`-maui-placeholder-color: green;`
`-maui-spacing`	`StackLayout`	doppelt \| `initial`	`-maui-spacing: 8;`
`-maui-shadow`	VisualElement	Gültige Formate sind: Farbe, OffsetX, OffsetY \| Offset X, OffsetY, Radius, Farbe \| Offset X, OffsetY, Radius, Farbe, Opactität	`-maui-shadow: #000000 4 4;`
`-maui-thumb-color`	Slider, Switch	Farbe \| `initial`	`-maui-thumb-color: limegreen;`
`-maui-vertical-scroll-bar-visibility`	ScrollView	`default` \| `always` \| `never` \| `initial`	`-maui-vertical-scroll-bar-visibility: always;`
`-maui-vertical-text-alignment`	Label	`start` \| `center` \| `end` \| `initial`	`-maui-vertical-text-alignment: end;`
`-maui-visual`	VisualElement	Zeichenfolge \| `initial`	`-maui-visual: material;`

.NET MAUI Shell spezifische Eigenschaften

Die folgenden .NET MAUI Shell-spezifischen CSS-Eigenschaften werden ebenfalls unterstützt (in der Spalte Values sind die Typen kursiv, während Zeichenfolgenliterale gray):

Eigentum	Gilt für	Werte	Beispiel
`-maui-flyout-background`	Shell	Farbe \| `initial`	`-maui-flyout-background: red;`
`-maui-shell-background`	Element	Farbe \| `initial`	`-maui-shell-background: green;`
`-maui-shell-disabled`	Element	Farbe \| `initial`	`-maui-shell-disabled: blue;`
`-maui-shell-foreground`	Element	Farbe \| `initial`	`-maui-shell-foreground: yellow;`
`-maui-shell-tabbar-background`	Element	Farbe \| `initial`	`-maui-shell-tabbar-background: white;`
`-maui-shell-tabbar-disabled`	Element	Farbe \| `initial`	`-maui-shell-tabbar-disabled: black;`
`-maui-shell-tabbar-foreground`	Element	Farbe \| `initial`	`-maui-shell-tabbar-foreground: gray;`
`-maui-shell-tabbar-title`	Element	Farbe \| `initial`	`-maui-shell-tabbar-title: lightgray;`
`-maui-shell-tabbar-unselected`	Element	Farbe \| `initial`	`-maui-shell-tabbar-unselected: cyan;`
`-maui-shell-title`	Element	Farbe \| `initial`	`-maui-shell-title: teal;`
`-maui-shell-unselected`	Element	Farbe \| `initial`	`-maui-shell-unselected: limegreen;`

Farbe

Die folgenden color Werte werden unterstützt:

X11 Farben, die CSS-Farben und .NET MAUI-Farben entsprechen. Bei diesen Farbwerten wird die Groß-/Kleinschreibung nicht beachtet.
Hexfarben: #rgb, #argb, #rrggbb, #aarrggbb
RGB-Farben: rgb(255,0,0), rgb(100%,0%,0%). Die Werte liegen im Bereich 0-255 oder 0%-100%.
rgba farben: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). Der Deckkraftwert liegt im Bereich 0,0-1,0.
hsl-Farben: hsl(120, 100%, 50%). Der h-Wert liegt im Bereich 0-360, während s und l im Bereich 0%-100%liegen.
hsla Farben: hsla(120, 100%, 50%, .8). Der Deckkraftwert liegt im Bereich 0,0-1,0.

Dicke

Ein, zwei, drei oder vier thickness Werte werden unterstützt, jeweils durch Leerzeichen getrennt:

Ein einzelner Wert gibt eine einheitliche Stärke an.
Zwei Werte geben die vertikale und dann horizontale Stärke an.
Drei Werte zeigen die obere, dann die horizontale (links und rechts) und schließlich die untere Dicke an.
Vier Werte geben oben, dann rechts und dann unten und dann die linke Stärke an.

Anmerkung

CSS-thickness Werte unterscheiden sich von XAML-Thickness Werten. Beispielsweise gibt in XAML eine zweiwertige Thickness horizontale und dann vertikale Stärke an, während ein vierwertiges Thickness links, dann oben, dann rechts und dann untere Stärke angibt. Darüber hinaus sind XAML-Thickness Werte durch Trennzeichen getrennt.

Funktionen

Lineare und radiale Farbverläufe können mithilfe der linear-gradient()- bzw. radial-gradient() CSS-Funktionen angegeben werden. Das Ergebnis dieser Funktionen sollte der background Eigenschaft eines Steuerelements zugewiesen werden.

Freigeben über

Formatieren von Apps mit Cascading StyleSheets

Ein Stylesheet verwenden

Laden eines Stylesheets

Laden eines Stylesheets in XAML

Laden eines Stylesheets in C#

Auswählen von Elementen und Anwenden von Eigenschaften

Elemente nach Typ auswählen

Auswählen von Elementen nach Basisklasse

Auswählen eines Elements anhand des Namens

Auswählen von Elementen mit einem bestimmten Klassenattribute

Auswählen untergeordneter Elemente

Auswählen direkter untergeordneter Elemente

Selektorreferenz

Eigenschaftsreferenz

.NET MAUI-spezifische Eigenschaften

.NET MAUI Shell spezifische Eigenschaften

Farbe

Dicke

Funktionen

Zusätzliche Ressourcen