Stili CSS

Articolo
01/20/2021

Importante

Questo progetto è una versione sperimentale. Speriamo di provare le associazioni Sperimentale blazor per dispositivi mobili e fornire feedback all'indirizzo https://github.com/xamarin/MobileBlazorBindings.

Panoramica

Le applicazioni create usando le associazioni Blazor per dispositivi mobili hanno un assortimento di stili che possono essere applicati per controllare l'aspetto dell'interfaccia utente. Questi stili possono essere applicati direttamente ai componenti oppure possono essere applicati usando fogli di stile CSS (Cascading Style Sheets). Alcuni dei vantaggi dell'uso di CSS invece degli stili diretti sono il fatto che consente una migliore separazione dei problemi (ovvero mantenere gli stili dei componenti separati dal layout e dalla funzionalità) e consentire la possibile condivisione di CSS con altri supporti (ad esempio, un'app Web).

Inclusione di CSS in un progetto

Per aggiungere CSS a un progetto Mobile Blazor Bindings:

Nel progetto dell'interfaccia utente condivisa dell'applicazione fare clic con il pulsante destro del mouse su qualsiasi cartella e selezionare Aggiungi> nuovo elemento e selezionare il tipo di elemento Foglio di stile (se non è possibile trovarlo, usare la funzionalità di ricerca per trovare style sheet).
Scegliere un nome appropriato per il foglio di stile e premere Aggiungi.
Modificare il contenuto del file CSS in base alle esigenze (vedere di seguito per gli stili supportati). Ad esempio, per impostare tutte le etichette in modo da avere una dimensione del large carattere:
```
label {
    font-size: large;
}
```
Aprire il .razor file in cui si vuole usare il css.

Nota

Molte app avranno un singolo file CSS incluso nella pagina principale dell'applicazione.
Aggiungere il markup seguente al .razor file, in genere al livello superiore del file. Modifica del nome e del percorso del file CSS in modo che corrispondano a quanto creato:
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

Nota

Il supporto CSS richiede il riferimento a Xamarin.Forms 4.5 o versione successiva. Per aggiornare questo riferimento, gestire i pacchetti NuGet per la soluzione e assicurarsi che la soluzione usi una versione di Xamarin.Forms 4.5 o successiva. Le versioni future di Mobile Blazor Bindings includeranno questa versione per impostazione predefinita.

Applicazione di CSS ai componenti

Gli stili CSS vengono dichiarati nel file CSS usando la sintassi CSS standard. Gli stili vengono specificati usando selettori, che consentono l'applicazione di stili in base al tipo di elemento, alla classe base, al nome, all'attributo di classe e a diversi altri mezzi (vedere di seguito per informazioni di riferimento su Xamarin.Forms).

.razor Nel file in ogni componente che consente gli stili CSS è possibile impostare rispettivamente la classe o il nome tramite le class proprietà e StyleId .

Nota

Gli elementi che supportano gli stili CSS hanno anche una StyleClass proprietà, equivalente alla class proprietà . Se è necessario usare la class proprietà a livello di codice da C#, usare la sintassi @classdi escape , ad esempio , o usare la StyleClass proprietà , ad esempio myElement.@classmyElement.StyleClass.

File CSS di esempio:

/* 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;
}

Frammento di file Razor di esempio:

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

Stili CSS supportati

Poiché i componenti dell'interfaccia utente predefiniti sono basati su controlli Xamarin.Forms, vedere Applicazione di stili alle app Xamarin.Forms tramite CSS per altre informazioni su questa funzionalità e sugli stili che è possibile applicare ai componenti.

Risoluzione dei problemi

Impostare Azione di compilazione su Risorsa incorporata

Quando si aggiunge un nuovo file CSS in Visual Studio, il file CSS deve essere Build Action impostato automaticamente per Embedded resource assicurarsi che sia incluso nel progetto compilato. In caso contrario, fare clic con il pulsante destro del mouse sul file CSS, scegliere Proprietà e impostare su Build ActionEmbedded resource.

Usare la sintassi del percorso corretta per CSS nelle sottocartelle

Se il file CSS si trova in una cartella, specificarne il nome usando il percorso con barre come separatori di percorso. Ad esempio, se il file CSS è <PROJECT ROOT>/assets/styles/MyApp.css, il markup da includere in un .razor file è:

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

Condividi tramite