Estilos CSS

Artículo
01/20/2021

Importante

Este proyecto es una versión experimental. Esperamos que pruebes enlaces blazor móviles experimentales y proporciones comentarios en https://github.com/xamarin/MobileBlazorBindings.

Información general

Las aplicaciones creadas con enlaces blazor móviles tienen una variedad de estilos que se pueden aplicar para controlar la apariencia de la interfaz de usuario. Estos estilos se pueden aplicar directamente a los componentes o se pueden aplicar mediante hojas de estilos en cascada (CSS). Algunas de las ventajas de usar CSS en lugar de estilos directos es que permite una mejor separación de preocupaciones (es decir, mantener los estilos de componente separados de su diseño y funcionalidad) y permitir el posible uso compartido de CSS con otros medios (por ejemplo, una aplicación web).

Incluir CSS en un proyecto

Para agregar CSS a un proyecto mobile Blazor Bindings:

En el proyecto de interfaz de usuario compartida de la aplicación, haga clic con el botón derecho en cualquier carpeta y seleccione Agregar nuevo> elemento y seleccione el tipo de elemento Hoja de estilos (si no lo encuentra, use la característica de búsqueda para buscar style sheet).
Elija un nombre adecuado para la hoja de estilos y presione Agregar.
Edite el contenido del archivo CSS según sea necesario (consulte a continuación los estilos admitidos). Por ejemplo, para establecer todas las etiquetas para que tengan un large tamaño de fuente:
```
label {
    font-size: large;
}
```
Abra el .razor archivo donde desea usar el CSS.

Nota

Muchas aplicaciones tendrán un único archivo CSS que se incluye en la página principal de la aplicación.
Agregue el siguiente marcado al .razor archivo, normalmente en el nivel superior del archivo. Cambiar el nombre y la ruta de acceso del archivo CSS para que coincidan con lo que creó:
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

Nota

La compatibilidad con CSS requiere hacer referencia a Xamarin.Forms 4.5 o versiones posteriores. Para actualizar esta referencia, administre los paquetes NuGet para la solución y asegúrese de que la solución usa una versión de Xamarin.Forms que sea 4.5 o posterior. Las versiones futuras de enlaces blazor móviles incluirán esta versión de forma predeterminada.

Aplicación de CSS a componentes

Los estilos CSS se declaran en el archivo CSS mediante la sintaxis CSS estándar. Los estilos se especifican mediante selectores, que permiten aplicar estilos basados en el tipo de elemento, la clase base, el nombre, el atributo de clase y otros medios (consulte a continuación para la referencia de Xamarin.Forms).

En el .razor archivo de cada componente que permite estilos CSS, puede establecer la clase o el nombre a través de las class propiedades y StyleId , respectivamente.

Nota

Los elementos que admiten estilos CSS también tienen una StyleClass propiedad , que es equivalente a la class propiedad . Si necesita usar la class propiedad mediante programación desde C#, use la sintaxis @classde escape , como myElement.@class, o use la StyleClass propiedad , como myElement.StyleClass.

Archivo CSS de ejemplo:

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

Fragmento de archivo de Razor de ejemplo:

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

Estilos CSS admitidos

Dado que los componentes de la interfaz de usuario integrados se basan en controles de Xamarin.Forms, consulte Aplicación de estilos de aplicaciones de Xamarin.Forms con CSS para obtener más información sobre esta característica y qué estilos se pueden aplicar a qué componentes.

Solución de problemas

Establecer acción de compilación en recurso incrustado

Al agregar un nuevo archivo CSS en Visual Studio, el archivo CSS debería tener automáticamente establecido Build ActionEmbedded resource en para asegurarse de que se incluye en el proyecto compilado. Si no es así, haga clic con el botón derecho en el archivo CSS, seleccione Propiedades y establezca en Build ActionEmbedded resource.

Usar la sintaxis de ruta de acceso correcta para CSS en subcarpetas

Si el archivo CSS se encuentra en una carpeta, especifique su nombre mediante su ruta de acceso con barras diagonales como separadores de ruta de acceso. Por ejemplo, si el archivo CSS es <PROJECT ROOT>/assets/styles/MyApp.css, el marcado para incluirlo en un .razor archivo es:

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

Compartir a través de