Freigeben über

Formatieren von Apps mit Cascading Stylesheets

  • Artikel

.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 einem 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 enthalten sind, wird ein Semikolon als Trennzeichen verwendet.

Das folgende Beispiel zeigt einige .NET MAUI-konforme 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 geparst und ausgewertet und nicht zur Kompilierungszeit. Die Stylesheets werden bei Verwendung erneut geparst.

Wichtig

Es ist nicht möglich, eine .NET MAUI-App vollständig mit CSS zu formatieren. XAML-Formatvorlagen können jedoch als Ergänzung zu CSS verwendet werden. Weitere Informationen zu XAML-Formatvorlagen finden Sie unter Formatieren von Apps mithilfe von XAML.

Verwenden eines Stylesheets

Um ein Stylesheet zu einer .NET MAUI-App hinzuzufügen, gehen Sie wie folgt vor:

  1. Fügen Sie eine leere CSS-Datei zu Ihrem .NET MAUI-App-Projekt hinzu. Die CSS-Datei kann in einem beliebigen Ordner abgelegt werden, empfohlen wird der Ordner Ressourcen.
  2. Setzen Sie die Buildaktion der CSS-Datei auf MauiCss.

Laden eines Stylesheets

Es gibt mehrere Methoden, um ein Stylesheet zu laden.

Hinweis

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

Laden eines Stylesheets in XAML

Ein Stylesheet kann mit der StyleSheet-Klasse geladen und geparst werden, bevor es zu einem ResourceDictionary hinzugefü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 umgebenden XAML-Datei oder relativ zum Projektstamm an, wenn der URI mit / beginnt.

Warnung

Die CSS-Datei wird nicht geladen, wenn ihre Buildaktion nicht auf MauiCss gesetzt ist.

Alternativ kann ein Stylesheet mit der StyleSheet-Klasse geladen und geparst werden, bevor es zu einem ResourceDictionary hinzugefü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 Ressourcenverzeichnissen finden Sie unter Ressourcenverzeichnisse.

Laden eines Stylesheets in C#

In C# kann ein Stylesheet aus einem StringReader geladen und zu einem ResourceDictionary hinzugefü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 der StyleSheet.FromReader-Methode ist der TextReader, aus dem das Stylesheet gelesen wurde.

Auswählen von Elementen und Anwenden von Eigenschaften

CSS verwendet Selektoren, um zu bestimmen, welche Elemente ausgewählt werden sollen. Formatvorlagen mit übereinstimmenden Selektoren werden in der Reihenfolge ihrer Definition nacheinander angewendet. Formatvorlagen, die für ein bestimmtes Element definiert wurden, werden immer zuletzt angewendet. Weitere Informationen zu unterstützten Selektoren finden Sie unter Selektorreferenz.

CSS verwendet Eigenschaften zum Formatieren eines ausgewählten Elements. Jede Eigenschaft verfügt über eine Reihe möglicher Werte, und einige Eigenschaften können sich auf jede Art von Element auswirken, während andere sich auf Gruppen von Elementen beziehen. Weitere Informationen zu unterstützten Eigenschaften finden Sie unter Eigenschaftsreferenz.

Untergeordnete Stylesheets haben immer Vorrang vor übergeordneten Stylesheets, wenn sie dieselben Eigenschaften festlegen. Daher gelten die folgenden Rangfolgeregeln, wenn Formatvorlagen verwendet werden, die dieselben Eigenschaften festlegen:

  • Eine in den App-Ressourcen definierte Formatvorlage wird durch eine in den Seitenressourcen definierte Formatvorlage überschrieben, wenn diese dieselben Eigenschaften festlegen.
  • Eine in den Seitenressourcen definierte Formatvorlage wird durch eine in den Kontrollressourcen definierte Formatvorlage überschrieben, wenn diese dieselben Eigenschaften festlegen.
  • Eine in den App-Ressourcen definierte Formatvorlage wird durch eine in den Kontrollressourcen definierte Formatvorlage überschrieben, wenn diese die gleichen Eigenschaften festlegen.

Hinweis

CSS-Variablen werden nicht unterstützt.

Auswählen von Elementen nach Typ

Die Elemente der visuellen Struktur können mit dem element-Selektor nach Typ ausgewählt werden. Dieser Selektor ist unabhängig von der Groß-/Kleinschreibung:

stacklayout {
    margin: 20;
}

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

Hinweis

Der element-Selektor identifiziert keine Unterklassen des angegebenen Typs.

Auswählen von Elementen nach Basisklasse

Elemente in der visuellen Struktur können von der Basisklasse ausgewählt werden, wobei der ^base-Selektor keine Groß-/Kleinschreibung berücksichtigt:

^contentpage {
    background-color: lightgray;
}

Dieser Selektor identifiziert alle ContentPage-Elemente, die das Stylesheet verwenden, und legt deren Hintergrundfarbe auf lightgray fest.

Hinweis

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

Auswählen eines Elements nach dem Namen

Einzelne Elemente in der visuellen Struktur können mit dem #id-Selektor ausgewählt werden, der Groß-/Kleinschreibung beachtet:

#listView {
    background-color: lightgray;
}

Mit diesem Selektor wird das Element identifiziert, dessen StyleId-Eigenschaft auf listView festgelegt ist. Wenn die StyleId-Eigenschaft nicht festgelegt ist, wird der Selektor auf die Verwendung von x:Name des Elements zurückgesetzt. Aus diesem Grund wird der #listView-Selektor im folgenden Beispiel ListView identifizieren, dessen x:Name-Attribut auf listView festgelegt ist, und seine Hintergrundfarbe auf lightgray setzen.

<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 Klassenattribut

Elemente mit einem bestimmten Klassenattribut können mit dem .class-Selektor ausgewählt werden, der Groß-/Kleinschreibung berücksichtigt:

.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 Stile dem ersten Label zugewiesen, während die von der .detailPageSubtitle-Klasse definierten Stile dem zweiten Label zugewiesen 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 in der visuellen Struktur können mit dem element element-Selektor ausgewählt werden, der Groß-/Kleinschreibung nicht berücksichtigt:

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

Dieser Selektor identifiziert alle Image-Elemente, die untergeordnete Elemente von ListView-Elementen sind, und legt ihre Höhe und Breite auf 60 fest. Daher identifiziert der listview image-Selektor im folgenden XAML-Beispiel Image, das ein untergeordnetes Element von ListView ist, und legt dessen Höhe und Breite auf 60 fest.

<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>

Hinweis

Für den element element-Selektor muss das untergeordnete Element kein direktes untergeordnetes Element des übergeordneten Elements sein – das untergeordnete Element kann 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 in der visuellen Struktur können mit dem element>element-Selektor ausgewählt werden, der Groß-/Kleinschreibung nicht berücksichtigt:

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

Dieser Selektor identifiziert alle Image-Elemente, die direkte untergeordnete Elemente von StackLayout-Elementen sind, und legt ihre Höhe und Breite auf 200 fest. Daher identifiziert der stacklayout>image-Selektor im folgenden Beispiel Image, ein direktes untergeordnetes Element von StackLayout, und legt dessen Höhe und Breite auf 200 fest.

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

Hinweis

Für den element>element-Selektor muss das untergeordnete Element ein direktes untergeordnetes Element des übergeordneten Elements sein.

Selektorreferenz

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

Auswahl Beispiel Beschreibung
.class .header Wählt alle Elemente mit der StyleClass-Eigenschaft aus, die „header“ enthält Dieser Selektor berücksichtigt die Groß-/Kleinschreibung.
#id #email Wählt alle Elemente aus, bei denen StyleId auf email festgelegt ist Wenn StyleId nicht festgelegt ist, erfolgt ein Fallback auf x:Name. Wenn Sie XAML verwenden, wird x:Name gegenüber StyleId bevorzugt. Dieser Selektor berücksichtigt die Groß-/Kleinschreibung.
* * Wählt alle Elemente aus
element label Wählt alle Elemente vom Typ Label, aber keine Unterklassen aus Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht.
^base ^contentpage Wählt alle Elemente mit ContentPage als Basisklasse aus, einschließlich ContentPage selbst Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht und ist nicht Teil der CSS-Spezifikation.
element,element label,button Wählt alle Button- und Label-Elemente aus Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht.
element element stacklayout label Wählt alle Label-Elemente in StackLayout aus Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht.
element>element stacklayout>label Wählt alle Label-Elemente mit StackLayout als einem direkten übergeordneten Element aus Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht.
element+element label+entry Wählt alle Entry-Elemente direkt hinter einer Label aus. Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht.
element~element label~entry Wählt alle Entry-Elemente vor einer Label aus. Dieser Selektor berücksichtigt die Groß-/Kleinschreibung nicht.

Formatvorlagen mit übereinstimmenden Selektoren werden in der Reihenfolge ihrer Definition nacheinander angewendet. Formatvorlagen, die für ein bestimmtes Element definiert wurden, werden immer zuletzt angewendet.

Tipp

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

Die folgenden Selektoren werden unterstützt:

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

Hinweis

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

Eigenschaftsverweis

Die folgenden CSS-Eigenschaften werden von .NET MAUI unterstützt (in der Spalte Werte werden die Typen kursiv und Zeichenfolgenliterale gray dargestellt):

Eigenschaft 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 color | initial background-color: springgreen;
background-image Page string | initial background-image: bg.png;
border-color Button, Frame, ImageButton color | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButton double | initial border-radius: 10;
border-width Button, ImageButton double | initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker color | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid double | 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 %-Vorzeichen 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 double | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initial font-style: bold;
height VisualElement double | 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 double | initial letter-spacing: 2.5;
line-height Label, Span double | initial line-height: 1.8;
margin View Stärke | initial margin: 6 12;
margin-left View thickness | initial margin-left: 3;
margin-top View thickness | initial margin-top: 2;
margin-right View thickness | initial margin-right: 1;
margin-bottom View thickness | initial margin-bottom: 6;
max-lines Label int | initial max-lines: 2;
min-height VisualElement double | initial min-height: 50;
min-width VisualElement double | initial min-width: 112;
opacity VisualElement double | initial opacity: .3;
order VisualElement int | initial order: -1;
padding Button, ImageButton, Layout, Page thickness | initial padding: 6 12 12;
padding-left Button, ImageButton, Layout, Page double | initial padding-left: 3;
padding-top Button, ImageButton, Layout, Page double | initial padding-top: 4;
padding-right Button, ImageButton, Layout, Page double | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, Page double | initial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid double | 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 double, double | 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 double | initial width: 320;

Hinweis

initial ist ein gültiger Wert für alle Eigenschaften. Er löscht den in einer anderen Formatvorlage definierten Wert (setzt ihn auf den Standardwert zurück).

Folgende Eigenschaften werden nicht unterstützt:

  • all: initial.
  • Layouteigenschaften (Feld oder Raster).
  • Kurzformeigenschaften, wie font und border.

Darüber hinaus gibt es keinen inherit-Wert, sodass die Vererbung nicht unterstützt wird. Daher ist es nicht möglich, z. B. eine font-size-Eigenschaft in einem Layout zu definieren und zu erwarten, dass der Wert an alle Label-Instanzen im Layout vererbt wird. Die einzige Ausnahme ist die direction-Eigenschaft, die den Standardwert inherit hat.

Wichtig

Span-Elemente können nicht mit CSS ausgerichtet werden.

.NET MAUI-spezifische Eigenschaften

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

Eigenschaft Gilt für: Werte Beispiel
-maui-bar-background-color NavigationPage, TabbedPage color | initial -maui-bar-background-color: teal;
-maui-bar-text-color NavigationPage, TabbedPage color | 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 color | initial -maui-max-track-color: red;
-maui-min-track-color Slider color | initial -maui-min-track-color: yellow;
-maui-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both wird nur unter ScrollView unterstützt. -maui-orientation: horizontal;
-maui-placeholder Entry, Editor, SearchBar quoted text | initial -maui-placeholder: Enter name;
-maui-placeholder-color Entry, Editor, SearchBar color | initial -maui-placeholder-color: green;
-maui-spacing StackLayout double | initial -maui-spacing: 8;
-maui-thumb-color Slider, Switch color | 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 string | initial -maui-visual: material;

.NET MAUI Shell-spezifische Eigenschaften

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

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

Color

Die folgenden color-Werte werden unterstützt:

  • X11 Farben, die den CSS- und .NET MAUI-Farben entsprechen. Bei diesen Farbwerten wird nicht zwischen Groß- und Kleinschreibung unterschieden.
  • Hex-Farben: #rgb, #argb, #rrggbb, #aarrggbb
  • RGB-Farben: rgb(255,0,0), rgb(100%,0%,0%). Die Werte liegen im Bereich 0-255 bzw. 0 %-100 %.
  • RGBA-Farben: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). Der Wert für die Deckkraft liegt im Bereich von 0.0-1.0.
  • HSL-Farben: hsl(120, 100%, 50%). Der Wert für „h“ liegt im Bereich 0-360, während „s“ und „l“ im Bereich 0 %-100 % liegen.
  • HSLA-Farben: hsla(120, 100%, 50%, .8). Der Wert für die Deckkraft liegt im Bereich von 0.0-1.0.

Stärke

Es werden ein, zwei, drei oder vier thickness-Werte unterstützt, die jeweils durch ein Leerzeichen getrennt sind:

  • Ein Wert gibt die einheitliche Stärke an.
  • Zwei Werte geben die vertikale und die horizontale Stärke an.
  • Drei Werte geben die obere, dann die horizontale (links und rechts) und dann die untere Stärke an.
  • Vier Werte geben die obere, dann die rechte, dann die untere und dann die linke Stärke an.

Hinweis

CSS-thickness-Werte unterscheiden sich von XAML-Thickness-Werten. In XAML zum Beispiel gibt ein Thickness-Zweierwert die horizontale und dann die vertikale Stärke an, während ein Thickness-Viererwert die linke, dann die obere, dann die rechte und dann die untere Stärke angibt. Darüber hinaus sind XAML-Thickness-Werte durch Trennzeichen getrennt.

Functions

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