Compartir a través de

Aplicar estilo a las aplicaciones mediante hojas de estilos en cascada

Las aplicaciones multiplataforma de .NET MAUI se pueden estilizar mediante hojas de estilo en cascada (CSS). Una hoja de estilos consta de una lista de reglas, con cada regla formada por uno o varios selectores y un bloque de declaración. Un bloque de declaración consta de una lista de declaraciones entre llaves, con cada declaración formada por una propiedad, dos puntos y un valor. Cuando hay varias declaraciones en un bloque, se inserta un punto y coma como separador.

En el ejemplo siguiente se muestran algunos CSS compatibles con .NET MAUI:

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

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

En .NET MAUI, las hojas de estilos CSS se analizan y evalúan en tiempo de ejecución, en lugar de en tiempo de compilación, y las hojas de estilos se vuelven a analizar en uso.

Importante

No es posible aplicar un estilo completo a una aplicación MAUI de .NET mediante CSS. Sin embargo, los estilos XAML se pueden usar para complementar CSS. Para obtener más información sobre los estilos XAML, consulta la sección Aplicaciones con estilo utilizando XAML.

Consumir una hoja de estilos

El proceso para agregar una hoja de estilos a una aplicación MAUI de .NET es el siguiente:

  1. Agregue un archivo CSS vacío al proyecto de aplicación MAUI de .NET. El archivo CSS se puede colocar en cualquier carpeta, con la carpeta Resources que es la ubicación recomendada.
  2. Establezca la acción de compilación del archivo CSS en MauiCss.

Carga de una hoja de estilos

Hay una serie de enfoques que se pueden usar para cargar una hoja de estilos.

Nota

No es posible cambiar una hoja de estilos en tiempo de ejecución y aplicar la nueva hoja de estilos.

Cargar una hoja de estilos en XAML

Una hoja de estilos se puede cargar y analizar con la clase StyleSheet antes de agregarse a un ResourceDictionary:

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

La propiedad StyleSheet.Source especifica la hoja de estilos como un URI en relación con la ubicación del archivo XAML envolvente, o en relación con la raíz del proyecto si el URI comienza con un /.

Advertencia

El archivo CSS no se cargará si su acción de compilación no está establecida en MauiCss.

Como alternativa, una hoja de estilos se puede cargar y analizar con la clase StyleSheet antes de agregarse a una ResourceDictionary, incluyéndola en línea en una sección CDATA.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

Para obtener más información sobre los diccionarios de recursos, consulte Diccionarios de recursos.

Cargar una hoja de estilos en C#

En C#, se puede cargar una hoja de estilos desde un StringReader y ser agregada a un ResourceDictionary.

using Microsoft.Maui.Controls.StyleSheets;

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

El argumento del método StyleSheet.FromReader es el TextReader que ha leído la hoja de estilos.

Seleccionar elementos y aplicar propiedades

CSS usa selectores para determinar a qué elementos dirigirse. Los estilos con selectores coincidentes se aplican consecutivamente, en orden de definición. Los estilos definidos en un elemento específico siempre se aplican en último lugar. Para obtener más información sobre los selectores admitidos, vea Referencia del selector.

CSS usa propiedades para aplicar estilo a un elemento seleccionado. Cada propiedad tiene un conjunto de valores posibles y algunas propiedades pueden afectar a cualquier tipo de elemento, mientras que otras se aplican a grupos de elementos. Para obtener más información sobre las propiedades admitidas, consulte "Referencia de propiedades".

Las hojas de estilo secundarias siempre anulan las hojas de estilo primarias si establecen las mismas propiedades. Por lo tanto, se siguen las siguientes reglas de precedencia al aplicar estilos que establecen las mismas propiedades:

  • Un estilo definido en los recursos de la aplicación se sobrescribirá mediante un estilo definido en los recursos de página, si establecen las mismas propiedades.
  • Un estilo definido en los recursos de página se sobrescribirá mediante un estilo definido en los recursos de control, si establecen las mismas propiedades.
  • Un estilo definido en los recursos de la aplicación se sobrescribirá mediante un estilo definido en los recursos de control, si establecen las mismas propiedades.

Nota

No se admiten variables CSS.

Seleccionar elementos por tipo

Los elementos del árbol visual se pueden seleccionar por tipo con el selector de element sin distinción entre mayúsculas y minúsculas:

stacklayout {
    margin: 20;
}

Este selector identifica los elementos StackLayout de las páginas que consumen la hoja de estilos y establece sus márgenes en un grosor uniforme de 20.

Nota

El selector de element no identifica las subclases del tipo especificado.

Selección de elementos por clase base

Los elementos del árbol visual se pueden seleccionar mediante la clase base con el selector de ^base sin distinción entre mayúsculas y minúsculas:

^contentpage {
    background-color: lightgray;
}

Este selector identifica los elementos ContentPage que consumen la hoja de estilos y establece su color de fondo en lightgray.

Nota

El selector de ^base es específico de .NET MAUI y no forma parte de la especificación CSS.

Selección de un elemento por nombre

Los elementos individuales del árbol visual se pueden seleccionar con el selector #id sensible a mayúsculas y minúsculas.

#listView {
    background-color: lightgray;
}

Este selector identifica el elemento cuya propiedad StyleId está establecida en listView. Sin embargo, si no se establece la propiedad StyleId, el selector volverá a usar el x:Name del elemento. Por lo tanto, en el ejemplo siguiente, el selector de #listView identificará el ListView cuyo atributo x:Name está establecido en listViewy establecerá el color de fondo en lightgray.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Selección de elementos con un atributo de clase específico

Los elementos con un atributo de clase específico se pueden seleccionar con el selector .class, sensible a mayúsculas y minúsculas.

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

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

Una clase CSS se puede asignar a un elemento XAML estableciendo la propiedad StyleClass del elemento en el nombre de clase CSS. Por lo tanto, en el ejemplo siguiente, los estilos definidos por la clase .detailPageTitle se asignan al primer Label, mientras que los estilos definidos por la clase .detailPageSubtitle se asignan al segundo Label.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Seleccionar elementos secundarios

Los elementos secundarios del árbol visual se pueden seleccionar con el selector de element element sin distinción entre mayúsculas y minúsculas:

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

Este selector identifica los elementos Image que son hijos de elementos ListView y establece sus dimensiones de altura y anchura en 60 píxeles. Por lo tanto, en el ejemplo XAML siguiente, el selector de listview image identificará el Image que es un elemento secundario del ListViewy establece su alto y ancho en 60.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Nota

El selector element element no requiere que el elemento secundario sea un elemento hijo directo de un elemento padre: el elemento secundario puede tener un elemento padre diferente. La selección se produce siempre que un antecesor sea el primer elemento especificado.

Selección de elementos secundarios directos

Los elementos secundarios directos del árbol visual se pueden seleccionar con el selector de element>element sin distinción entre mayúsculas y minúsculas:

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

Este selector identifica cualquier elemento Image que sea un hijo directo de un elemento StackLayout y establece su alto y ancho en 200. Por lo tanto, en el ejemplo siguiente, el selector stacklayout>image identificará al Image que es un hijo directo de StackLayout, y establecerá su alto y ancho en 200 unidades.

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

Nota

El selector de element>element requiere que el elemento secundario sea un elemento secundario del elemento primario.

Referencia del selector

Los siguientes selectores CSS son compatibles con .NET MAUI:

Seleccionador Ejemplo Descripción
.class .header Selecciona todos los elementos con la propiedad StyleClass que contiene "header". Este selector distingue mayúsculas de minúsculas.
#id #email Selecciona todos los elementos con StyleId establecido en email. Si no se establece StyleId, usar x:Namecomo respaldo. Al usar XAML, se prefiere x:Name sobre StyleId. Este selector distingue mayúsculas de minúsculas.
* * Selecciona todos los elementos.
element label Selecciona todos los elementos de tipo Label, pero no las subclases. Este selector no distingue mayúsculas de minúsculas.
^base ^contentpage Selecciona todos los elementos con ContentPage como clase base, incluido ContentPage. Este selector no distingue mayúsculas de minúsculas y no forma parte de la especificación CSS.
element,element label,button Selecciona todos los elementos Button y todos los elementos Label. Este selector no distingue mayúsculas de minúsculas.
element element stacklayout label Selecciona todos los elementos de Label dentro de un StackLayout. Este selector no distingue mayúsculas de minúsculas.
element>element stacklayout>label Selecciona todos los elementos Label con StackLayout como elemento primario directo. Este selector no distingue mayúsculas de minúsculas.
element+element label+entry Selecciona todos los elementos de Entry que están directamente después de un Label. Este selector no distingue mayúsculas de minúsculas.
element~element label~entry Selecciona todos los elementos de Entry precedidos por un Label. Este selector no distingue mayúsculas de minúsculas.

Los estilos con selectores coincidentes se aplican consecutivamente, en orden de definición. Los estilos definidos en un elemento específico siempre se aplican en último lugar.

Propina

Los selectores se pueden combinar sin limitación, como StackLayout>ContentView>label.email.

Los siguientes selectores no son compatibles:

  • [attribute]
  • @media y @supports
  • : y ::

Nota

No se admiten la especificidad ni las anulaciones de especificidad.

Si dos o más reglas CSS apuntan al mismo elemento, el selector con la mayor especificidad tendrá prioridad y su declaración de estilo se aplicará al elemento. El algoritmo de especificidad calcula el peso de un selector de CSS para determinar qué regla de las declaraciones CSS en conflicto se aplica al elemento.

Referencia de propiedad

Las siguientes propiedades CSS son compatibles con .NET MAUI (en la columna Valores, los tipos están en cursiva, mientras que los literales de cadena están en gray):

Propiedad Se aplica a Valores Ejemplo
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 de cadena | initial background-image: bg.png;
border-color Button, Frame, ImageButton color | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButton doble | initial border-radius: 10;
border-width Button, ImageButton doble | initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, SwitchTimePicker de color | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid | initial doble 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. Además, se puede especificar un porcentaje del intervalo de 0% a 100% con el signo de %. flex-basis: 25%;
flex-grow VisualElement flotante | initial flex-grow: 1.5;
flex-shrink VisualElement flotante | 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, TimePickerSpan de cadena | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePickerSpan doble | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePickerSpan bold | italic | initial font-style: bold;
height VisualElement doble | initial 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 | initial doble letter-spacing: 2.5;
line-height Label, Span doble | initial line-height: 1.8;
margin View grosor | initial margin: 6 12;
margin-left View | initial de grosor margin-left: 3;
margin-top View Medida de grosor | initial margin-top: 2;
margin-right View | initial de grosor margin-right: 1;
margin-bottom View Grosor | initial margin-bottom: 6;
max-lines Label int | initial max-lines: 2;
min-height VisualElement doble | initial min-height: 50;
min-width VisualElement doble | initial min-width: 112;
opacity VisualElement doble | initial opacity: .3;
order VisualElement int | initial order: -1;
padding Button, ImageButton, Layout, Page | initial de grosor padding: 6 12 12;
padding-left Button, ImageButton, Layout, Page doble | initial padding-left: 3;
padding-top Button, ImageButton, Layout, Page doble | initial padding-top: 4;
padding-right Button, ImageButton, Layout, Page doble | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, Page doble | initial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid doble | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBar left | top | right | bottom | start | center | middle | end | initial. left y right deben evitarse en entornos de derecha a izquierda. 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 doble, doble | 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 doble | initial width: 320;

Nota

initial es un valor válido para todas las propiedades. Borra el valor (se restablece al valor predeterminado) que se estableció desde otro estilo.

No se admiten las siguientes propiedades:

  • all: initial.
  • Propiedades de diseño (cuadro o cuadrícula).
  • Propiedades abreviadas, como fonty border.

Además, no hay ningún valor inherit y, por tanto, no se admite la herencia. Por lo tanto, no puede, por ejemplo, establecer la propiedad font-size en un diseño y esperar que todas las instancias de Label del diseño hereden el valor. La única excepción es la propiedad direction, que tiene un valor predeterminado de inherit.

Importante

Los elementos Span no se pueden seleccionar mediante CSS.

Propiedades específicas de .NET MAUI

También se admiten las siguientes propiedades CSS específicas de .NET MAUI (en la columna de valores de , los tipos están en cursiva, mientras que los literales de cadena están en gray):

Propiedad Se aplica a Valores Ejemplo
-maui-bar-background-color NavigationPage, TabbedPage color | initial -maui-bar-background-color: teal;
-maui-bar-text-color NavigationPage, TabbedPage Color | initial -maui-bar-text-color: gray
-maui-horizontal-scroll-bar-visibility ScrollView default | always | never | initial -maui-horizontal-scroll-bar-visibility: never;
-maui-max-length Entry, Editor, SearchBar int | initial -maui-max-length: 20;
-maui-max-track-color Slider color | initial -maui-max-track-color: red;
-maui-min-track-color Slider color | initial -maui-min-track-color: yellow;
-maui-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both solo se admite en un ScrollView. -maui-orientation: horizontal;
-maui-placeholder Entry, Editor, SearchBar | initial de texto entre comillas -maui-placeholder: Enter name;
-maui-placeholder-color Entry, Editor, SearchBar color | initial -maui-placeholder-color: green;
-maui-spacing StackLayout doble | initial -maui-spacing: 8;
-maui-shadow VisualElement Los formatos válidos son: color, offsetX, offsetY | offset X, offsetY, radius, color | offset X, offsetY, radius, color, opacidad -maui-shadow: #000000 4 4;
-maui-thumb-color Slider, Switch de color | initial -maui-thumb-color: limegreen;
-maui-vertical-scroll-bar-visibility ScrollView default | always | never | initial -maui-vertical-scroll-bar-visibility: always;
-maui-vertical-text-alignment Label start | center | end | initial -maui-vertical-text-alignment: end;
-maui-visual VisualElement cadena | initial -maui-visual: material;

Propiedades específicas del shell de MAUI de .NET

También se admiten las siguientes propiedades CSS específicas del Shell de .NET MAUI (en la columna de valores , los tipos están en cursiva, mientras que los literales de cadena son gray):

Propiedad Se aplica a Valores Ejemplo
-maui-flyout-background Shell color | initial -maui-flyout-background: red;
-maui-shell-background Element de color | initial -maui-shell-background: green;
-maui-shell-disabled Element De color | initial -maui-shell-disabled: blue;
-maui-shell-foreground Element color | initial -maui-shell-foreground: yellow;
-maui-shell-tabbar-background Element Color | initial -maui-shell-tabbar-background: white;
-maui-shell-tabbar-disabled Element Color | initial -maui-shell-tabbar-disabled: black;
-maui-shell-tabbar-foreground Element color | initial -maui-shell-tabbar-foreground: gray;
-maui-shell-tabbar-title Element color de | initial -maui-shell-tabbar-title: lightgray;
-maui-shell-tabbar-unselected Element color | initial -maui-shell-tabbar-unselected: cyan;
-maui-shell-title Element Color | initial -maui-shell-title: teal;
-maui-shell-unselected Element de color | initial -maui-shell-unselected: limegreen;

Color

Se admiten los siguientes valores de color:

  • X11 colores, que coinciden con los colores CSS y .NET MAUI. Estos valores de color no distinguen mayúsculas de minúsculas.
  • Colores hexadecimales: #rgb, #argb, #rrggbb, #aarrggbb
  • colores rgb: rgb(255,0,0), rgb(100%,0%,0%). Los valores están en el intervalo entre 0 y 255 o 0%-100%.
  • colores rgba: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). El valor de opacidad está en el intervalo 0,0-1,0.
  • Colores hsl: hsl(120, 100%, 50%). El valor h está en el intervalo 0-360, mientras que s y l están en el intervalo 0%-100%.
  • Colores de HSLA: hsla(120, 100%, 50%, .8). El valor de opacidad está en el intervalo 0,0-1,0.

Espesor

Se admiten uno, dos, tres o cuatro valores de thickness, separados por espacios en blanco:

  • Un valor único indica un grosor uniforme.
  • Dos valores indican el grosor vertical y horizontal.
  • Tres valores indican grosor superior, luego horizontal (izquierda y derecha), luego grosor inferior.
  • Cuatro valores indican el espesor de arriba, luego derecha, luego abajo y luego izquierda.

Nota

Los valores de thickness CSS difieren de los valores de Thickness XAML. Por ejemplo, en XAML, un Thickness de dos valores indica el grosor horizontal y vertical, mientras que un Thickness de cuatro valores indica a la izquierda, después arriba, después a la derecha y, a continuación, el grosor inferior. Además, los valores de Thickness XAML están delimitados por comas.

Funciones

Los degradados lineales y radiales se pueden especificar mediante las funciones css linear-gradient() y radial-gradient(), respectivamente. El resultado de estas funciones debe asignarse a la propiedad background de un control .

  • Last updated on