CSS-Stile

Wichtig

Dieses Projekt ist ein experimentelles Release. Wir hoffen, dass Sie Experimentelle Mobile Blazor Bindings ausprobieren und Feedback unter https://github.com/xamarin/MobileBlazorBindingsgeben.

Übersicht

Anwendungen, die mit Mobile Blazor-Bindungen erstellt wurden, verfügen über eine Reihe von Stilen, die angewendet werden können, um die Darstellung der Benutzeroberfläche zu steuern. Diese Stile können direkt auf Komponenten angewendet oder mit Cascading StyleSheets (CSS) angewendet werden. Einige der Vorteile der Verwendung von CSS anstelle von direkten Formatvorlagen besteht darin, dass es eine bessere Trennung von Belangen ermöglicht (d. a. die Trennung von Komponentenstilen von ihrem Layout und ihrer Funktionalität) und die mögliche Freigabe von CSS mit anderen Medien (z. B. einer Web-App).

Einbinden von CSS in ein Projekt

So fügen Sie einem Mobile Blazor Bindings-Projekt CSS hinzu:

Klicken Sie im freigegebenen UI-Projekt Ihrer Anwendung mit der rechten Maustaste auf einen beliebigen Ordner, und wählen Sie Hinzufügen -> Neues Element hinzufügen aus, und wählen Sie den Stylesheet-Elementtyp aus. (Wenn Sie ihn nicht finden können, verwenden Sie das Suchfeature, um nach zu suchen style sheet).
Wählen Sie einen geeigneten Namen für Ihr Stylesheet aus, und drücken Sie Hinzufügen.
Bearbeiten Sie den Inhalt der CSS-Datei nach Bedarf (unterstützte Formatvorlagen finden Sie unten). So legen Sie beispielsweise alle Bezeichnungen so fest, dass sie einen large Schriftgrad aufweisen:
```
label {
    font-size: large;
}
```
Öffnen Sie die .razor Datei, in der Sie das CSS verwenden möchten.

Hinweis

Viele Apps verfügen über eine einzelne CSS-Datei, die auf der Standard Seite der Anwendung enthalten ist.
Fügen Sie der Datei das .razor folgende Markup hinzu, in der Regel auf der obersten Ebene der Datei. Ändern sie den Namen und Pfad der CSS-Datei, um der erstellten Datei zu entsprechen:
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

Hinweis

Die CSS-Unterstützung erfordert den Verweis auf Xamarin.Forms 4.5 oder höher. Um diese Referenz zu aktualisieren, verwalten Sie die NuGet-Pakete für die Projektmappe, und stellen Sie sicher, dass die Lösung eine Version von Xamarin.Forms verwendet, die 4.5 oder höher ist. Zukünftige Versionen von Mobile Blazor Bindings enthalten diese Version standardmäßig.

Anwenden von CSS auf Komponenten

CSS-Stile werden in der CSS-Datei mithilfe der CSS-Standardsyntax deklariert. Stile werden mithilfe von Selektoren angegeben, die das Anwenden von Formatvorlagen basierend auf Elementtyp, Basisklasse, Name, Klassenattributen und mehreren anderen Mitteln ermöglichen (siehe unten für Xamarin.Forms-Referenz).

In der .razor Datei für jede Komponente, die CSS-Formatvorlagen zulässt, können Sie die Klasse oder den Namen über die class Eigenschaften und StyleId festlegen.

Hinweis

Elemente, die CSS-Formatvorlagen unterstützen, verfügen auch über eine StyleClass -Eigenschaft, die der class -Eigenschaft entspricht. Wenn Sie die class Eigenschaft programmgesteuert von C# verwenden müssen, verwenden Sie entweder die Escapesyntax @class, z myElement.@class. B. , oder verwenden Sie die StyleClass -Eigenschaft, z. B myElement.StyleClass. .

CSS-Beispieldatei:

/* this rule applies to all labels */
label {
    font-size: large;
}

/* these rules apply only when this class is specified */
.happyText {
    color: green;
}

.sadText {
    color: red;
}

Beispielausschnitt einer Razor-Datei:

<Label Text="Seattle" /> @* no class specified, so only 'label' rule applied *@
<Label class="happyText" Text="Weather: good" /> @* class is specified, so 'label' rule and '.happyText' rules applied *@
<Label class="sadText" Text="Traffic: bad" /> @* class is specified, so 'label' rule and '.sadText' rules applied *@

Unterstützte CSS-Stile

Da die integrierten Ui-Komponenten auf Xamarin.Forms-Steuerelementen basieren, erfahren Sie unter Formatieren von Xamarin.Forms-Apps mithilfe von CSS mehr über dieses Feature und welche Stile auf welche Komponenten angewendet werden können.

Problembehandlung

Festlegen der Buildaktion auf eingebettete Ressource

Beim Hinzufügen einer neuen CSS-Datei in Visual Studio sollte die CSS-Datei automatisch auf Embedded resource festgelegt seinBuild Action, um sicherzustellen, dass sie im erstellten Projekt enthalten ist. Wenn dies nicht der Fall ist, klicken Sie mit der rechten Maustaste auf die CSS-Datei, wählen Sie Eigenschaften aus, und legen Sie auf Embedded resourcefestBuild Action.

Verwenden der richtigen Pfadsyntax für CSS in Unterordnern

Wenn sich die CSS-Datei in einem Ordner befindet, geben Sie ihren Namen unter Verwendung des Pfads mit Schrägstrichen als Pfadtrennzeichen an. Wenn die CSS-Datei beispielsweise lautet <PROJECT ROOT>/assets/styles/MyApp.css, ist das Markup, um sie in eine .razor Datei einzuschließen:

<StyleSheet Resource="assets/styles/MyApp.css" Assembly="GetType().Assembly"></StyleSheet>

Last updated on 2021-01-20