Estilos en XAML

Clase 31 de 83 • Curso de Xamarin 2018

Así como hemos agregado algunos colores como recursos de la aplicación, nosotros podemos definir estilos, que van más allá de definir diccionarios, y nos permiten reutilizar código XAML aún más.

Un estilo nos permitirá establecer la forma en que los elementos se van a mostrar, definido directamente como un recurso que podemos utilizar a lo largo de toda la aplicación.

Ventajas

Ya hemos reutilizado bastante código XAML al definir recursos que reutilizamos en varios elementos, pero aún tuvimos por ejemplo que definir el valor del texto de los Entries en cada uno, y si el valor es el mismo, establecer estilos nos puede ahorrar una línea de código justo ahí. Por supuesto, este ahorro crece con nuestra aplicación, si tuviéramos decenas de Entries, bastaría con definir el estilo una vez.

Definiendo un estilo

Resolvamos el pequeño problema de estar duplicando el código que define el color del texto de los entries que tenemos en la aplicación. Recordarás que tanto para el Entry de usuario, como para el de contraseña y el de nombre de tarea, definimos un color de texto a ser exactamente el mismo recurso. Esto lo podemos hacer más eficiente definiendo que todos los entries deben tener ese color de texto, a través de un estilo en el archivo App.xaml (para que esté disponible en toda la aplicación):

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="accentColor">#293275</Color>
        <Color x:Key="buttonTextColor">#FFFFFF</Color>

        <Style TargetType="Entry">
            <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
        </Style>
    </ResourceDictionary>
</Application.Resources>

El resultado es que podemos, en todos los entries, quitar la línea que establece el color del texto, y aún mantener el mismo color, que esta vez se define desde el estilo.

Nota que para definir el estilo estableces el tipo en el que va a ser usado, en este caso definimos el objetivo como Entry. Hecho esto, se definen setters, cada uno con la propiedad a modificar y el valor que será asignado. En este ejemplo, he definido que el valor para la propiedad TextColor, será la del recurso que llamamos accentColor.

Ahora, este estilo se va a establecer automáticamente a todos los Entries que se definan en la aplicación, y era justo lo que necesitaba, pero ¿qué pasa si he modificado un poco la vista para agregar una nueva tarea para que se vea así?

Lo que necesito es que el primer label tenga un estilo diferente a la del segundo y tercero. Siempre podemos modificar directamente en la definición de un elemento, los valores que provienen del estilo. Por ejemplo, podríamos definir un estilo que aplique a todos los Labels, y en la definición de este primer Label, cambiar el tamaño de letra, o el color.

Pero regresamos al escenario al que esto no nos permite reutilizar estos estilos. Lo conveniente sería definir un estilo para Labels de título y otro para Labels de subtítulo, y así si podría reutilizarlos la próxima vez que requiera el mismo estilo. Para esto, en la definición del estilo, tendremos que establecer el Key, tal como lo hicimos con los recursos:

<Style x:Key="titleLabel" TargetType="Label">
    <Setter Property="FontSize" Value="25"/>
    <Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="subtitleLabel" TargetType="Label">
    <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
</Style>

Ahora que tienen una clave para ser identificados, los estilos no son asignados automáticamente a los Labels que están definidos en la aplicación, tendremos que asignarlos manualmente, para que cada elemento sepa que estilo debe usar:

<Label Text="Nueva tarea"
       Style="{StaticResource titleLabel}"/>
<Label Text="Nueva tarea"
       Style="{StaticResource subtitleLabel}"
       Grid.Row="1"/>
<Entry x:Name="nombreEntry"
       Grid.Row="2"
       Placeholder="Nombre de la tarea"
       Text="Tarea 1"
       Grid.ColumnSpan="2"/>
<Label Text="Nueva tarea" 
       Grid.Row="3"
       Style="{StaticResource subtitleLabel}"/>
...

Así hemos definido dos estilos orientados al mismo tipo de elemento (Label) y lo hemos asignado a los elementos correspondientes, para un resultado como este:

Ahora, si necesitamos cambiar algo por ejemplo a las etiquetas de texto para los subtítulos, sólo lo hacemos en el estilo definido en los recursos de la aplicación:

<Style x:Key="subtitleLabel" TargetType="Label">
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
</Style>

Y los cambios se aplicarán:

Comentarios

Marcos Avila Rodriguez

student•

Por si alguien intenta dejar la interfaz igual a la última imagen, comparto como deje el grid de NuevoItem.xaml

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Text="Nueva tarea"
       Style="{StaticResource titleLabel}"
               Grid.Row="1"/>
        <Label Text="Nueva tarea"
       Style="{StaticResource subtitleLabel}"
       Grid.Row="2"/>
        <Entry x:Name="nombreEntry" 
               Placeholder="Nombre de la tarea" 
               Grid.Row="3"
               Grid.ColumnSpan="2"
               TextColor="{StaticResource accentColor}"></Entry>
        
        <DatePicker Grid.Row="4" 
                    x:Name="fechaLimiteDatePicker"
                    TextColor="{StaticResource accentColor}"></DatePicker>
        <TimePicker Grid.Row="4" 
                    Grid.Column="1" 
                    x:Name="horaLimiteDatePicker"
                    TextColor="{StaticResource accentColor}"></TimePicker>
        <Button Text="Guardar" 
                Grid.Row="5" 
                Grid.ColumnSpan="2"
                Clicked="Button_Clicked"
                BackgroundColor="{StaticResource accentColor}"
                TextColor="{StaticResource buttonTextColor}"></Button>
    </Grid>

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="accentColor">#293275</Color>
        <Color x:Key="buttonTextColor">#FFFFFF</Color>

        <Style TargetType="Entry">
            <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
        </Style>
    </ResourceDictionary>
</Application.Resources>

<Style x:Key="titleLabel" TargetType="Label">
    <Setter Property="FontSize" Value="25"/>
    <Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="subtitleLabel" TargetType="Label">
    <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
</Style>

<Label Text="Nueva tarea"
       Style="{StaticResource titleLabel}"/>
<Label Text="Nueva tarea"
       Style="{StaticResource subtitleLabel}"
       Grid.Row="1"/>
<Entry x:Name="nombreEntry"
       Grid.Row="2"
       Placeholder="Nombre de la tarea"
       Text="Tarea 1"
       Grid.ColumnSpan="2"/>
<Label Text="Nueva tarea" 
       Grid.Row="3"
       Style="{StaticResource subtitleLabel}"/>
...

Estilos en XAML

Bienvenida al Curso de Xamarin

Estamos renovando este curso

Introducción a Xamarin

¿Qué es Xamarin?

Xamarin Forms vs. Xamarin Nativo (Clásico)

Xamarin vs Desarrollo tradicional

Preparando el entorno para Xamarin

Requerimientos del sistema para instalar Visual Studio

Xamarin en Mac

Instalando Visual Studio en Mac OS

Xamarin en Windows

Instalando Visual Studio en Windows

Xamarin Emuladores iOS y Android

Crear un Emulador Android en Windows con Visual Studio

Comenzando un Proyecto en Xamarin Forms

Creando proyecto

Creando proyecto Xamarin Forms en Windows

¿Qué es XAML en Xamarin?

¿Qué es XAML en Xamarin? Windows

Eventos en Xamarin Forms

Accediendo al evento Click

Creando y cambiando a otra pantalla

Creando y cambiando a otra pantalla Windows

SQLite en Xamarin Forms

Implementando SQLite en Xamarin Forms Windows

Implementando SQLite en Xamarin Forms

Creando el Modelo Tarea en Xamarin Forms

Creando el Modelo Tarea en Xamarin Forms Windows

Creando una base de datos SQLite en Xamarin Forms

Insertando un registro en la base de datos

Implementando Listas

Leyendo datos desde SQLite

Actualizando datos SQLIte

Implementando Filtros SQLite

Recursos y estilos en XAML Xamarin Forms

Recursos en XAML

Recursos a nivel de aplicación en Xamarin Forms

Estilos en XAML

Xamarin Nativo, comenzando con PlatziTrips

Estructura de una solución para Xamarin Nativo

Xamarin.Android

Definiendo una interfaz con AXML en Xamarin

Controlar una interfaz con C# en Xamarin.Android

Xamarin.iOS

Definiendo una interfaz en Storyboard en Xamarin

Controlar una interfaz con C# en Xamarin.iOS

Proyectos compartidos en Xamarin

PCL vs Shared Project

Usando código compartido en Xamarin

SQLite en Xamarin

Integrando SQLite en el PCL de Xamarin

Insertando elementos a la base de datos en Xamarin

Usando ScrollView en Xamarin.Android

SQLite en el proyecto Xamarin.Android

Utilizando NavigationController en Xamarin.iOS

SQLite en el proyecto Xamarin.iOS

Listas en Android

Creando un ListActivity en Xamarin.Android

Leer datos de SQLite en Xamarin.Android

Implementando para Material Design en Xamarin.Android

Solución de CHALLENGE parte 1

Solución de CHALLENGE parte 2

Solución de CHALLENGE parte 3

Listas en iOS

TableViewController y estilos a celdas Xamarin.iOS

Llenando TableViewCell desde SLQLite Xamarin.iOS

Mejorar experiencia de navegación en Xamarin.iOS

Cambiar colores de la barra de títulos Xamarin.iOS

Consultado Servicios REST en Xamarin

Foursquare y PlatziTrips

Definiendo URL base de Foursquare

Creando un Deserializador JSON en Xamarin

Layout con Toolbar en Xamarin Android

Pasando parámetros entre Activities en Xamarin Android

Llenando un Spinner en Xamarin Android

Creando una pantalla de búsqueda en Xamarin Android

Implementando un toolbar con botón de guardar en Xamarin Android

Implementando Selección Múltiple en un ListView

Leyendo sitios de interés desde base de datos