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

Artikel
07/13/2023

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

Xamarin.Forms -Anwendungen können mithilfe von 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 vorhanden sind, wird ein Semikolon als Trennzeichen eingefügt. Im folgenden Codebeispiel werden einige Xamarin.Forms kompatible CSS-Codebeispiele veranschaulicht:

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.Formswerden CSS-Stylesheets zur Laufzeit und nicht zur Kompilierzeit analysiert und ausgewertet, und Stylesheets werden bei verwendung erneut analysiert.

Hinweis

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

Das MonkeyAppCSS-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 Projektmappe sieht wie folgt aus:

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 eine Reihe von Ansätzen, die zum Laden eines Stylesheets verwendet werden können.

Hinweis

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

XAML

Ein Stylesheet kann geladen und mit der StyleSheet -Klasse analysiert werden, bevor es einem ResourceDictionaryhinzugefü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 einschließenden 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 EmbeddedResource festgelegt ist.

Alternativ kann ein Stylesheet geladen und mit der StyleSheet -Klasse analysiert werden, bevor es 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.

C#

In C# kann ein Stylesheet aus einem StringReader geladen und einem ResourceDictionaryhinzugefü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 das , das TextReader 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 nacheinander in der Definitionsreihenfolge angewendet. Stile, die für ein bestimmtes Element definiert sind, werden immer zuletzt angewendet. Weitere Informationen zu unterstützten Selektoren finden Sie unter Selektorreferenz.

CSS verwendet Eigenschaften, um ein ausgewähltes Element zu formatieren. Jede Eigenschaft verfügt über einen Satz möglicher Werte, und einige Eigenschaften können sich auf jeden Elementtyp auswirken, während andere für Gruppen von Elementen gelten. Weitere Informationen zu unterstützten Eigenschaften finden Sie unter Eigenschaftenreferenz.

Untergeordnete Stylesheets überschreiben immer übergeordnete Stylesheets, wenn sie die gleichen Eigenschaften festlegen. Daher werden beim Anwenden von Formatvorlagen, die die gleichen Eigenschaften festlegen, die folgenden Rangfolgeregeln befolgt:

Ein in den Anwendungsressourcen definiertes Format wird durch einen in den Seitenressourcen definierten Stil überschrieben, wenn die gleichen Eigenschaften festgelegt werden.
Eine in Seitenressourcen definierte Formatvorlage wird durch eine in den Steuerelementressourcen definierte Formatvorlage überschrieben, wenn sie die gleichen Eigenschaften festlegen.
Ein in den Anwendungsressourcen definiertes Format wird durch einen in den Steuerelementressourcen definierten Stil überschrieben, wenn die gleichen Eigenschaften festgelegt werden.

Wichtig

CSS-Variablen werden nicht unterstützt.

Auswählen von Elementen nach Typ

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

stacklayout {
    margin: 20;
}

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

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 mit dem Selektor ohne Beachtung der Groß-/Kleinschreibung ^base ausgewählt werden:

^contentpage {
    background-color: lightgray;
}

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

Hinweis

Der ^base Selektor ist spezifisch für Xamarin.Formsund nicht Teil der CSS-Spezifikation.

Auswählen eines Elements anhand des Namens

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

#listView {
    background-color: lightgray;
}

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

<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 Klassenattribute können mit dem Selektor ausgewählt werden, der die Groß-/Kleinschreibung beachtet .class :

.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 Stile dem ersten Labelzugewiesen, während die von der .detailPageSubtitle -Klasse definierten Stile 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 Selektor ohne Beachtung der Groß-/Kleinschreibung element element ausgewählt werden:

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

Dieser Selektor identifiziert alle Image Elemente, die untergeordnete Elemente von ListView Elementen sind, und legt deren Höhe und Breite auf 60 fest. Daher identifiziert der Selektor im folgenden XAML-Beispiel listview image die , die Image ein untergeordnetes Element von ListViewist, 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

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

Auswählen von direkten untergeordneten Elementen

Direkte untergeordnete Elemente in der visuellen Struktur können mit dem Selektor ohne Beachtung der Groß-/Kleinschreibung element>element ausgewählt werden:

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

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

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

Hinweis

Der element>element Selektor erfordert, dass das untergeordnete Element ein direktes untergeordnetes Element des übergeordneten Elements ist.

Selektorreferenz

Die folgenden CSS-Selektoren werden von Xamarin.Formsunterstützt:

Auswahl	Beispiel	BESCHREIBUNG
`.class`	`.header`	Wählt alle Elemente mit der -Eigenschaft aus, die `StyleClass` "header" enthält. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung beachtet wird.
`#id`	`#email`	Wählt alle Elemente aus, deren `StyleId` Wert auf festgelegt ist `email`. Wenn `StyleId` nicht festgelegt ist, fallback auf `x:Name`. Bei Verwendung von XAML `x:Name` wird 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`aus, aber keine Unterklassen. 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` sich selbst. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird und nicht Teil der CSS-Spezifikation ist.
`element,element`	`label,button`	Wählt alle `Button` Elemente und alle `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 einem aus `StackLayout`. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element>element`	`stacklayout>label`	Wählt alle `Label` Elemente mit `StackLayout` als direktes übergeordnetes Element aus. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element+element`	`label+entry`	Wählt alle `Entry` Elemente direkt nach einem aus `Label`. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.
`element~element`	`label~entry`	Wählt alle `Entry` Elemente aus, die einem `Label`vorangestellt sind. Beachten Sie, dass bei diesem Selektor die Groß-/Kleinschreibung nicht beachtet wird.

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

Tipp

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

Die folgenden Selektoren werden derzeit nicht unterstützt:

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

Hinweis

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

Eigenschaftsverweis

Die folgenden CSS-Eigenschaften werden von Xamarin.Forms unterstützt (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`	Farbe \| `initial`	`background-color: springgreen;`
`background-image`	`Page`	Schnur \| `initial`	`background-image: bg.png;`
`border-color`	`Button`, `Frame`, `ImageButton`	Farbe \| `initial`	`border-color: #9acd32;`
`border-radius`	`BoxView`, `Button`, `Frame`, `ImageButton`	Doppel \| `initial`	`border-radius: 10;`
`border-width`	`Button`, `ImageButton`	Doppel \| `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`	Doppel \| `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 mit `%` dem Vorzeichen ein Prozentsatz im Bereich von 0 % bis 100 % angegeben werden.	`flex-basis: 25%;`
`flex-grow`	`VisualElement`	schweben \| `initial`	`flex-grow: 1.5;`
`flex-shrink`	`VisualElement`	schweben \| `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`	Schnur \| `initial`	`font-family: Consolas;`
`font-size`	`Button`, `DatePicker`, `Editor`, `Entry`, `Label`, `Picker`, `SearchBar`, `TimePicker`, `Span`	Doppel \| namedsize \| `initial`	`font-size: 12;`
`font-style`	`Button`, `DatePicker`, `Editor`, `Entry`, `Label`, `Picker`, `SearchBar`, `TimePicker`, `Span`	`bold` \| `italic` \| `initial`	`font-style: bold;`
`height`	`VisualElement`	Doppel \| `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`, `Editor`, `Entry`, `Label`, `Picker`, `SearchBar`, `SearchHandler`, `Span`, `TimePicker`	Doppel \| `initial`	`letter-spacing: 2.5;`
`line-height`	`Label`, `Span`	Doppel \| `initial`	`line-height: 1.8;`
`margin`	`View`	Dicke \| `initial`	`margin: 6 12;`
`margin-left`	`View`	Dicke \| `initial`	`margin-left: 3;`
`margin-top`	`View`	Dicke \| `initial`	`margin-top: 2;`
`margin-right`	`View`	Dicke \| `initial`	`margin-right: 1;`
`margin-bottom`	`View`	Dicke \| `initial`	`margin-bottom: 6;`
`max-lines`	`Label`	Int \| `initial`	`max-lines: 2;`
`min-height`	`VisualElement`	Doppel \| `initial`	`min-height: 50;`
`min-width`	`VisualElement`	Doppel \| `initial`	`min-width: 112;`
`opacity`	`VisualElement`	Doppel \| `initial`	`opacity: .3;`
`order`	`VisualElement`	Int \| `initial`	`order: -1;`
`padding`	`Button`, `ImageButton`, `Layout`, `Page`	Dicke \| `initial`	`padding: 6 12 12;`
`padding-left`	`Button`, `ImageButton`, `Layout`, `Page`	Doppel \| `initial`	`padding-left: 3;`
`padding-top`	`Button`, `ImageButton`, `Layout`, `Page`	Doppel \| `initial`	`padding-top: 4;`
`padding-right`	`Button`, `ImageButton`, `Layout`, `Page`	Doppel \| `initial`	`padding-right: 2;`
`padding-bottom`	`Button`, `ImageButton`, `Layout`, `Page`	Doppel \| `initial`	`padding-bottom: 6;`
`position`	`FlexLayout`	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	`Grid`	Doppel \| `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`	Doppel \| `initial`	`min-width: 320;`

Hinweis

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

Die folgenden Eigenschaften werden derzeit nicht unterstützt:

all: initial.
Layouteigenschaften (Feld oder Raster).
Kurzeigenschaften, z font. B. , und border.

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

Das Ziel Span von Elementen hat ein bekanntes Problem, das verhindert, dass Spannen das Ziel von CSS-Formatvorlagen nach Element und Name (unter Verwendung des # Symbols) sind. Das Span -Element wird von GestureElementabgeleitet, das nicht über die StyleClass -Eigenschaft verfügt, sodass spans keine CSS-Klassenadressierung unterstützen. Weitere Informationen finden Sie unter Css-Formatierung kann nicht auf das Span-Steuerelement angewendet werden.

Xamarin.Forms bestimmte Eigenschaften

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

Eigenschaft	Gilt für	Werte	Beispiel
`-xf-bar-background-color`	`NavigationPage`, `TabbedPage`	Farbe \| `initial`	`-xf-bar-background-color: teal;`
`-xf-bar-text-color`	`NavigationPage`, `TabbedPage`	Farbe \| `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`, `Editor`, `SearchBar`	Int \| `initial`	`-xf-max-length: 20;`
`-xf-max-track-color`	`Slider`	Farbe \| `initial`	`-xf-max-track-color: red;`
`-xf-min-track-color`	`Slider`	Farbe \| `initial`	`-xf-min-track-color: yellow;`
`-xf-orientation`	`ScrollView`, `StackLayout`	`horizontal` \| `vertical` \| `both` \| `initial`. `both` wird nur für unterstützt `ScrollView`.	`-xf-orientation: horizontal;`
`-xf-placeholder`	`Entry`, `Editor`, `SearchBar`	Text in Anführungszeichen \| `initial`	`-xf-placeholder: Enter name;`
`-xf-placeholder-color`	`Entry`, `Editor`, `SearchBar`	Farbe \| `initial`	`-xf-placeholder-color: green;`
`-xf-spacing`	`StackLayout`	Doppel \| `initial`	`-xf-spacing: 8;`
`-xf-thumb-color`	`Slider`, `Switch`	Farbe \| `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`	Schnur \| `initial`	`-xf-visual: material;`

Spezifische Eigenschaften der Xamarin.Forms-Shell

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

Eigenschaft	Gilt für	Werte	Beispiel
`-xf-flyout-background`	`Shell`	Farbe \| `initial`	`-xf-flyout-background: red;`
`-xf-shell-background`	`Element`	Farbe \| `initial`	`-xf-shell-background: green;`
`-xf-shell-disabled`	`Element`	Farbe \| `initial`	`-xf-shell-disabled: blue;`
`-xf-shell-foreground`	`Element`	Farbe \| `initial`	`-xf-shell-foreground: yellow;`
`-xf-shell-tabbar-background`	`Element`	Farbe \| `initial`	`-xf-shell-tabbar-background: white;`
`-xf-shell-tabbar-disabled`	`Element`	Farbe \| `initial`	`-xf-shell-tabbar-disabled: black;`
`-xf-shell-tabbar-foreground`	`Element`	Farbe \| `initial`	`-xf-shell-tabbar-foreground: gray;`
`-xf-shell-tabbar-title`	`Element`	Farbe \| `initial`	`-xf-shell-tabbar-title: lightgray;`
`-xf-shell-tabbar-unselected`	`Element`	Farbe \| `initial`	`-xf-shell-tabbar-unselected: cyan;`
`-xf-shell-title`	`Element`	Farbe \| `initial`	`-xf-shell-title: teal;`
`-xf-shell-unselected`	`Element`	Farbe \| `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.
Sechskantfarben: #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 von 0,0 bis 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 von 0,0 bis 1,0.

Stärke

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

Ein einzelner Wert gibt eine gleichmäßige Dicke an.
Zwei Werte geben die vertikale und dann die horizontale Stärke an.
Drei Werte zeigen oben, dann horizontal (links und rechts) und dann untere Stärke an.
Vier Werte zeigen oben, dann rechts, dann unten und dann links.

Hinweis

CSS-Werte thickness unterscheiden sich von XAML-Werten Thickness . In XAML gibt beispielsweise ein zwei -Wert Thickness die horizontale und dann die vertikale Dicke an, während ein Vierwert Thickness links, dann oben, dann rechts und dann untere Stärke angibt. Darüber hinaus sind XAML-Werte Thickness durch Trennzeichen getrennt.

NamedSize

Die folgenden Werte ohne Beachtung der Groß-/Kleinschreibung namedsize werden unterstützt:

default
micro
small
medium
large

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

Functions

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

CSS in Xamarin.Forms mit Xamarin.University

Xamarin.Forms 3.0 CSS-Video

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 anhand des Namens

Auswählen von Elementen mit einem bestimmten Klassenattribute

Auswählen untergeordneter Elemente

Auswählen von direkten untergeordneten Elementen

Selektorreferenz

Eigenschaftsverweis

Xamarin.Forms bestimmte Eigenschaften

Spezifische Eigenschaften der Xamarin.Forms-Shell

Color

Stärke

NamedSize

Functions

CSS in Xamarin.Forms mit Xamarin.University

Ähnliche Themen

Zusätzliche Ressourcen