Recursos en XAML

Clase 29 de 83 • Curso de Xamarin 2018

Contenido del curso

Bienvenida al Curso de Xamarin

1
Estamos renovando este curso
00:28 min

Introducción a Xamarin

Preparando el entorno para Xamarin

Comenzando un Proyecto en Xamarin Forms

Eventos en Xamarin Forms

SQLite en Xamarin Forms

Recursos y estilos en XAML Xamarin Forms

Xamarin Nativo, comenzando con PlatziTrips

32
Estructura de una solución para Xamarin Nativo
04:36 min

Xamarin.Android

Xamarin.iOS

Proyectos compartidos en Xamarin

SQLite en Xamarin

Listas en Android

Listas en iOS

Consultado Servicios REST en Xamarin

Mapas en Xamarin

Publicando Apps en Xamarin

Fin del Curso de Xamarin

83
Cierre del curso de Xamarin
00:28 min

Tomar examen

Hasta ahora la aplicación que desarrollamos está utilizando estilos por defecto de los elementos que estamos usando. Pero imagina el escenario en el que quieres que todos los botones tengan el mismo color de fondo, que todas las etiquetas de texto tengan un tamaño específico y usen un tipo de letra diferente al por default, o que tengas colores que se deben usar a lo largo de toda la aplicación en diferentes elementos.

La solución directa que puede venirte a la mente es agregar, dentro de la definición XAML de cada uno de los elementos, un valor para las propiedades correspondientes. Sin embargo, esta no es una solución viable para un proyecto que tiene varios botones, muchas etiquetas de texto o demasiados elementos en los cuales ocupar el mismo color.

En este punto entran los recursos en XAML, que hacen que ciertos elementos estén disponibles dentro de su ámbito. Podemos pensar de los recursos como algo similar a las propiedades en C#, y que estarán disponibles para su uso y re-uso a lo largo de su ámbito, por ejemplo una página, o la aplicación completa.

¿Qué es XAML?

Definiendo recursos

Para definir recursos, abre la página de inicio de sesión en el proyecto de ToDo, vamos a definir como recursos algunos colores que la app va a usar.

Así como un ContentPage tiene una propiedad Content, también tiene una de Resources, que podemos definir así:


<ContentPage.Resources>
    <ResourceDictionary>
            
    </ResourceDictionary>
</ContentPage.Resources>

Dentro de esta definición podremos definir recursos que estarán disponibles en todo el ContentPage. Nota que dentro de los recursos, estamos definiendo un diccionario de recursos, un diccionario se identifica porque tiene una llave y tiene un valor, y será exactamente lo que definiremos. Cada recurso se identificará por un key, y se le asignará un valor, por ejemplo, si queremos definir un color, deberemos hacer lo siguiente:

<Color x:Key="accentColor">#7FC719</Color>

Primero hemos establecido el tipo de recurso que usaremos, en este caso, Color. Después definimos el valor de la llave, que será accentColor, y nos ayudará a identificar el recurso para usarlo. Finalmente, definimos el valor del recurso con un valor hexadecimal en el caso de un color.

Ahora, podremos usar este recurso a través de su key como valor del color de cualquier elemento.

Usando un recurso

Una vez definido el recurso, podemos asignarlo como valor de cualquier propiedad que acepte ese tipo. En el caso del recurso accentColor, podemos asignarlo a propiedades que establecen color de algún elemento, por ejemplo el color de background del botón. Para acceder a un recurso deberemos hacer uso de la siguiente sintaxis, así como de StaticResource:

BackgroundColor="{StaticResource accentColor}"

Hacer esto dentro del botón dará estos resultados:

Por supuesto, podemos seguir definiendo nuevos recursos y utilizarlos de forma similar. Por ejemplo un recurso para el color de texto del botón:

<Color x:key="buttonTextColor">#FFFFFF</Color>

Para usarlo de esta manera:

TextColor="{StaticResou![](url)rce buttonTextColor}"

Para obtener este resultado:

Ventajas

¿Cuál es la ventaja de usar los recursos? Simple, podemos reutilizarlos a lo largo de toda la página, o incluso toda la aplicación. Imagina que has utilizado este recurso en algunos otros elementos:

<Entry x:Name="nombreEntry"
       Text="Tarea 1"
       Placeholder="Nombre de la tarea"
       TextColor="{StaticResource accentColor}"
       Grid.ColumnSpan="2"/>
<DatePicker x:Name="fechaDatePicker"
            TextColor="{StaticResource accentColor}"
            Grid.Row="1"/>
<TimePicker x:Name="horaTimePicker"
            TextColor="{StaticResource accentColor}"
            Grid.Row="1"
            Grid.Column="1"/>
<Button Text="Guardar"
        BackgroundColor="{StaticResource accentColor}"
        TextColor="{StaticResource buttonTextColor}"
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Clicked="Handle_Clicked”/>

Después de haber definido este color como el color de acento, quieres cambiarlo. De no haber usado el recurso, tendrías que ir a cada elemento y cambiar el color. Pero como has usado un recurso que se está reutilizando en cada lugar necesario, basta con cambiar su valor para que los cambios se apliquen:

<Color x:Key="accentColor">#293275</Color>

Comentarios

Marcos Avila Rodriguez

student•

Este es la definicion final del bloque que no se ve, yo lo coloque debajo del "StackLayout" y antes de la etiqueta de cierre de "ContentPage"

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

Jose Manuel Tejeda Morales

student•

Hola que tal el segmento de código que falta es este:

 <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="accentColor">#00BCD4</Color>
            <Color x:Key="buttonTextColor">#0097A7</Color>
          </ResourceDictionary>
    </ContentPage.Resources>

los colores me base en material design

Carlos Alfonso Montoya Cruz

student•

El recuadro donde se debe visualizar las lineas para agregar los recursos está vacío. Por favor verificar este tipo de contenidos.

Altair Barahona

student•

NO SALE EL CÓDIGO INICIAL, arreglar eso por favor

Josué A. Madrigal

student•

el primero recuadro aparece vacio, porque__?

<Entry x:Name="nombreEntry"
       Text="Tarea 1"
       Placeholder="Nombre de la tarea"
       TextColor="{StaticResource accentColor}"
       Grid.ColumnSpan="2"/>
<DatePicker x:Name="fechaDatePicker"
            TextColor="{StaticResource accentColor}"
            Grid.Row="1"/>
<TimePicker x:Name="horaTimePicker"
            TextColor="{StaticResource accentColor}"
            Grid.Row="1"
            Grid.Column="1"/>
<Button Text="Guardar"
        BackgroundColor="{StaticResource accentColor}"
        TextColor="{StaticResource buttonTextColor}"
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Clicked="Handle_Clicked”/>

Recursos 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