Freigeben über


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

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:

MonkeyApp-Hauptseite mit CSS-Formatierung

MonkeyApp-Detailseite mit CSS-Format

Verwenden eines Stylesheets

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

  1. Fügen Sie Ihrem .NET Standard-Bibliotheksprojekt eine leere CSS-Datei hinzu.
  2. 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 doubledouble | 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.

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.

CSS mit Xamarin.Forms Xamarin.University

Xamarin.Forms 3.0 CSS-Video