Formatieren von Xamarin.Forms Apps mit Cascading StyleSheets (CSS)

Artikel
07/28/2020

Xamarin.Forms unterstützt das Formatieren visueller Elemente mithilfe von Cascading StyleSheets (CSS).

Xamarin.Forms Anwendungen können mit 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 Codebeispiel zeigt einige kompatible CSS:The following code example shows some Xamarin.Forms compliant CSS:

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

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
}

.mainPageTitle {
    font-style: bold;
    font-size: medium;
}

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

In Xamarin.Forms, CSS Stylesheets werden zur Laufzeit analysiert und ausgewertet und nicht kompiliert, und Stylesheets werden bei der Verwendung erneut analysiert.

Hinweis

Derzeit können alle mit XAML-Formatierungen möglichen Formatierungen nicht mit CSS ausgeführt werden. XAML-Formatvorlagen können jedoch verwendet werden, um CSS für Eigenschaften zu ergänzen, die derzeit nicht unterstützt werden Xamarin.Forms. Weitere Informationen zu XAML-Formatvorlagen finden Sie unter Formatieren von Xamarin.Forms-Apps mithilfe von XAML-Formatvorlagen.

Das Beispiel veranschaulicht die Verwendung von CSS zum Formatieren einer einfachen App und wird in den folgenden Screenshots gezeigt:

Verwenden eines Stylesheets

Der Prozess zum Hinzufügen eines Stylesheets zu einer Lösung lautet wie folgt:

Fügen Sie Ihrem .NET Standard-Bibliotheksprojekt eine leere CSS-Datei hinzu.
Legen Sie die Buildaktion der CSS-Datei auf EmbeddedResource fest.

Laden eines Stylesheets

Es gibt mehrere Methoden, um ein Stylesheet zu laden.

Hinweis

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

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="/Assets/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 kann nicht geladen werden, wenn die Buildaktion nicht auf EmbeddedResource festgelegt 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.

C#

In C# kann ein Stylesheet aus einem StringReader geladen und zu einem ResourceDictionary hinzugefügt werden:

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 Selector Reference.

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 Property Reference.

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 Anwendungsressourcen definierte Formatvorlage wird durch eine in den Seitenressourcen definierte Formatvorlage überschrieben, wenn sie die gleichen 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 Anwendungsressourcen definierte Formatvorlage wird durch eine in den Steuerelementressourcen definierte Formatvorlage überschrieben, wenn sie dieselben Eigenschaften festlegen.

Wichtig

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

Die ^base Auswahl ist spezifisch für Xamarin.Formsdie CSS-Spezifikation 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. Daher identifiziert der #listView Selektor im folgenden XAML-Beispiel das ListView Attribut, auf das x:Name das Attribut festgelegt listViewist, und legt die Hintergrundfarbe auf lightgray.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/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 .class-Selektor ausgewählt werden, der Groß-/Kleinschreibung berücksichtigt:

.detailPageTitle {
    font-style: bold;
    font-size: medium;
    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 XAML-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="/Assets/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="/Assets/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 XAML-Beispiel das Image direkte untergeordnete Element des StackLayoutElements und legt seine Höhe und Breite auf 200 fest.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/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 Xamarin.Forms:

Auswahl	Beispiel	Beschreibung
`.class`	`.header`	Wählt alle Elemente mit der `StyleClass`-Eigenschaft aus, die „header“ enthält Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung beachtet wird.
`#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. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung beachtet wird.
`*`	`*`	Wählt alle Elemente aus
`element`	`label`	Wählt alle Elemente vom Typ `Label`, aber keine Unterklassen aus Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`^base`	`^contentpage`	Wählt alle Elemente mit `ContentPage` als Basisklasse aus, einschließlich `ContentPage` selbst Beachten Sie, dass diese Auswahl die Groß-/Kleinschreibung nicht beachtet und nicht Teil der CSS-Spezifikation ist.
`element,element`	`label,button`	Wählt alle `Button`- und `Label`-Elemente aus Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element element`	`stacklayout label`	Wählt alle `Label`-Elemente in `StackLayout` aus Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element>element`	`stacklayout>label`	Wählt alle `Label`-Elemente mit `StackLayout` als einem direkten übergeordneten Element aus Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element+element`	`label+entry`	Wählt alle `Entry`-Elemente direkt hinter einer `Label` aus. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element~element`	`label~entry`	Wählt alle `Entry`-Elemente vor einer `Label` aus. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.

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 derzeit nicht unterstützt:

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

Hinweis

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

Eigenschaftsverweis

Die folgenden CSS-Eigenschaften werden unterstützt von Xamarin.Forms (in der Spalte "Werte " sind Typen kursiv, während Zeichenfolgenliterale sind gray):

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`, `FrameImageButton`	color \| `initial`	`border-color: #9acd32;`
`border-radius`	`BoxView`, , `ButtonFrameImageButton`	double \| `initial`	`border-radius: 10;`
`border-width`	`Button`, `ImageButton`	double \| `initial`	`border-width: .5;`
`color`	`ActivityIndicator`, `BoxView`, , `Button`, `CheckBox`, `EditorDatePicker`, `Entry`, , `Label`, `Picker`, , `ProgressBarSearchBar`, , `SwitchTimePicker`	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`, , `EntryEditor`, `Label`, `Picker`, `SearchBar`, , `TimePickerSpan`	string \| `initial`	`font-family: Consolas;`
`font-size`	`Button`, `DatePicker`, , `EntryEditor`, `Label`, `Picker`, `SearchBar`, , `TimePickerSpan`	Double \| namedsize \| `initial`	`font-size: 12;`
`font-style`	`Button`, `DatePicker`, , `EntryEditor`, `Label`, `Picker`, `SearchBar`, , `TimePickerSpan`	`bold` \| `italic` \| `initial`	`font-style: bold;`
`height`	`VisualElement`	double \| `initial`	`min-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`, , `EntryEditor`, `Label`, `Picker`, `SearchBar`, , , `SearchHandler`, , `SpanTimePicker`	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`, , `ImageButtonLayoutPage`	thickness \| `initial`	`padding: 6 12 12;`
`padding-left`	`Button`, , `ImageButtonLayoutPage`	double \| `initial`	`padding-left: 3;`
`padding-top`	`Button`, , `ImageButtonLayoutPage`	double \| `initial`	`padding-top: 4;`
`padding-right`	`Button`, , `ImageButtonLayoutPage`	double \| `initial`	`padding-right: 2;`
`padding-bottom`	`Button`, , `ImageButtonLayoutPage`	double \| `initial`	`padding-bottom: 6;`
`position`	`FlexLayout`	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	`Grid`	double \| `initial`	`row-gap: 12;`
`text-align`	`Entry`, , `EntryCellLabelSearchBar`	`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`, , `SearchBarSearchHandler`	`none` \| `default` \| `uppercase` \| `lowercase` \| `initial`	`text-transform: uppercase;`
`transform`	`VisualElement`	`none`, `rotate`, `rotateXscaleXscalerotateY`, `scaleY`, , `translate`, , , `translateYtranslateXinitial`	`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`	`min-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).

Die folgenden Eigenschaften werden derzeit 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.

Das Adressieren von Span Elementen hat ein bekanntes Problem, das verhindert, dass es sich um das Ziel von CSS-Formatvorlagen sowohl nach Element als auch nach Namen (mithilfe des # Symbols) handeln kann. Das Span Element wird abgeleitet von GestureElement, das nicht über die StyleClass Eigenschaft verfügt, sodass die CSS-Klassenadressierung nicht unterstützt wird. Weitere Informationen finden Sie unter "Css-Formatierung auf Span"-Steuerelement nicht anwenden können.

Xamarin.Forms bestimmte Eigenschaften

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

Eigenschaft	Gilt für:	Werte	Beispiel
`-xf-bar-background-color`	`NavigationPage`, `TabbedPage`	color \| `initial`	`-xf-bar-background-color: teal;`
`-xf-bar-text-color`	`NavigationPage`, `TabbedPage`	color \| `initial`	`-xf-bar-text-color: gray`
`-xf-horizontal-scroll-bar-visibility`	`ScrollView`	`default` \| `always` \| `never` \| `initial`	`-xf-horizontal-scroll-bar-visibility: never;`
`-xf-max-length`	`Entry`, `EditorSearchBar`	int \| `initial`	`-xf-max-length: 20;`
`-xf-max-track-color`	`Slider`	color \| `initial`	`-xf-max-track-color: red;`
`-xf-min-track-color`	`Slider`	color \| `initial`	`-xf-min-track-color: yellow;`
`-xf-orientation`	`ScrollView`, `StackLayout`	`horizontal` \| `vertical` \| `both` \| `initial`. `both` wird nur unter `ScrollView` unterstützt.	`-xf-orientation: horizontal;`
`-xf-placeholder`	`Entry`, `EditorSearchBar`	quoted text \| `initial`	`-xf-placeholder: Enter name;`
`-xf-placeholder-color`	`Entry`, `EditorSearchBar`	color \| `initial`	`-xf-placeholder-color: green;`
`-xf-spacing`	`StackLayout`	double \| `initial`	`-xf-spacing: 8;`
`-xf-thumb-color`	`Slider`, `Switch`	color \| `initial`	`-xf-thumb-color: limegreen;`
`-xf-vertical-scroll-bar-visibility`	`ScrollView`	`default` \| `always` \| `never` \| `initial`	`-xf-vertical-scroll-bar-visibility: always;`
`-xf-vertical-text-alignment`	`Label`	`start` \| `center` \| `end` \| `initial`	`-xf-vertical-text-alignment: end;`
`-xf-visual`	`VisualElement`	string \| `initial`	`-xf-visual: material;`

Xamarin.Forms Shell-spezifische Eigenschaften

Die folgenden Xamarin.Forms shellspezifischen CSS-Eigenschaften werden ebenfalls unterstützt (in der Spalte "Werte " sind Typen kursiv, während Zeichenfolgenliterale sind gray):

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

Color

Die folgenden color-Werte werden unterstützt:

X11Farben, die mit CSS-Farben, vordefinierten UWP-Farben und Xamarin.Forms Farben übereinstimmen. Beachten Sie, dass bei diesen Farbwerten die Groß-/Kleinschreibung nicht beachtet wird.
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.

NamedSize

Bei den folgenden Werten wird die Groß-/Kleinschreibung nicht beachtet namedsize :

default
micro
small
medium
large

Die genaue Bedeutung jedes namedsize Werts ist plattformabhängig und ansichtsabhängig.

Funktionen

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.

CSS mit Xamarin.Forms Xamarin.University

Xamarin.Forms 3.0 CSS-Video

Freigeben über

Formatieren von Xamarin.Forms Apps mit Cascading StyleSheets (CSS)

Verwenden eines Stylesheets

Laden eines Stylesheets

XAML

C#

Auswählen von Elementen und Anwenden von Eigenschaften

Auswählen von Elementen nach Typ

Auswählen von Elementen nach Basisklasse

Auswählen eines Elements nach dem Namen

Auswählen von Elementen mit einem bestimmten Klassenattribute

Auswählen untergeordneter Elemente

Auswählen direkter untergeordneter Elemente

Selektorreferenz

Eigenschaftsverweis

Xamarin.Forms bestimmte Eigenschaften

Xamarin.Forms Shell-spezifische Eigenschaften

Color

Stärke

NamedSize

Funktionen

CSS mit Xamarin.Forms Xamarin.University

Zusätzliche Ressourcen

Freigeben über

Formatieren von Xamarin.Forms Apps mit Cascading StyleSheets (CSS)

Verwenden eines Stylesheets

Laden eines Stylesheets

XAML

C#

Auswählen von Elementen und Anwenden von Eigenschaften

Auswählen von Elementen nach Typ

Auswählen von Elementen nach Basisklasse

Auswählen eines Elements nach dem Namen

Auswählen von Elementen mit einem bestimmten Klassenattribute

Auswählen untergeordneter Elemente

Auswählen direkter untergeordneter Elemente

Selektorreferenz

Eigenschaftsverweis

Xamarin.Forms bestimmte Eigenschaften

Xamarin.Forms Shell-spezifische Eigenschaften

Color

Stärke

NamedSize

Funktionen

CSS mit Xamarin.Forms Xamarin.University

Verwandte Links

Zusätzliche Ressourcen