Hola, un placer verte por aquí de nuevo este articulo de hoy lo vamos a dedicar a hacer un repaso por los distintos tipos de estilos que podemos crear en nuestras aplicaciones de Xamarin Forms y así poder personalizar nuestras interfaces de usuario. Si quieres profundizar en este tema, te dejo por aquí un enlace a la documentación oficial de Microsoft: https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/styles/xaml/.

Actualmente disponemos de varios tipos de estilos para usar, concretamente, hoy nos centraremos en los estilo implícitos y explícitos.

 

ESTILOS IMPLÍCITOS

Un estilo implícito es aquél que usan todos los controles del mismo TargetType (del mismo tipo, por ejemplo todos los botones de mi aplicación), sin necesidad de que cada control haga referencia al estilo.

Para declarar un estilo en el nivel de página, se debe agregar una etiqueta ResourceDictionary a la página y, a continuación, se pueden incluir una o varias declaraciones de estilo en el ResourceDictionary. Un estilo se hace implícito si no se especifica un atributo de x:Key. A continuación, veremos un ejemplo de cómo se aplicará el estilo a los elementos visuales que coincidan exactamente con el TargetType de tipo Button.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Curso.MainPage">

<ContentPage.Resources>
 <ResourceDictionary>
  <Style TargetType="Button">
   <Setter Property="BackgroundColor" Value="Aquamarine"></Setter>
  </Style>
 </ResourceDictionary>
</ContentPage.Resources>

<StackLayout Margin="8, 50, 8, 0">
 <Button Text="Boton estilizado"></Button>

 <StackLayout
  Orientation="Horizontal">
  <StackLayout.Resources>
   <ResourceDictionary>
    <Style TargetType="Button">
     <Setter Property="BackgroundColor" Value="Purple"></Setter>
     <Setter Property="TextColor" Value="White"></Setter>
    </Style>
   </ResourceDictionary>
  </StackLayout.Resources>
   <Button HorizontalOptions="FillAndExpand" Text="Boton 1"></Button>
   <Button HorizontalOptions="FillAndExpand" Text="Boton 2"></Button>
   <Button HorizontalOptions="FillAndExpand" Text="Boton 3"></Button>
  </StackLayout>
 </StackLayout>

</ContentPage>

Como se puede observar, hemos aplicado un estilo a todos los botones de mi página, gracias a la etiqueta ResourceDictionary, concretamente, hemos cambiado el color de fondo de todos los botones.

 

ESTILOS EXPLÍCITOS

Un estilo explícito es aquel que se aplica de manera individual a los controles estableciendo una propiedad llamada x:Key a sus propiedades de estilo.

Un estilo se declara de manera explícita proporcionando en la declaración del estilo una etiqueta llamada x:Key, que proporciona una clave descriptiva en el ResourceDictionary, una vez hecho esto debemos hacer referencia al estilo creado en el control donde queramos aplicarlo mediante la etiqueta Style, veamos un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Curso.MainPage">

<ContentPage.Resources>
 <ResourceDictionary>
  <Style TargetType="Button">
   <Setter Property="BackgroundColor" Value="Aquamarine"></Setter>
  </Style>
 </ResourceDictionary>
</ContentPage.Resources>

<StackLayout Margin="8, 50, 8, 0">
 <Button Text="Boton estilizado"></Button>

 <StackLayout
  Orientation="Horizontal">
  <StackLayout.Resources>
   <ResourceDictionary>
    <Style TargetType="Button" x:Key="btnPurple">
     <Setter Property="BackgroundColor" Value="Purple"></Setter>
     <Setter Property="TextColor" Value="White"></Setter>
    </Style>
   </ResourceDictionary>
  </StackLayout.Resources>
  <Button HorizontalOptions="FillAndExpand" Text="Boton 1" Style="{StaticResource btnPurple}"></Button>
  <Button HorizontalOptions="FillAndExpand" Text="Boton 2"></Button>
  <Button HorizontalOptions="FillAndExpand" Text="Boton 3"></Button>
 </StackLayout>
</StackLayout>

</ContentPage>

Si te fijas detenidamente en el código podrás ver como creamos una propiedad x:Key = «btnPurple» dentro del StackLayout y este estilo recién creado lo aplicamos en el primer botón de esta manera:

<Button HorizontalOptions="FillAndExpand" Text="Boton 1" Style="{StaticResource btnPurple}"></Button>

El próximo artículo de Xamarin Forms, lo dedicaremos a continuar esta sección de los estilos, implementando los estilos de dispositivo. Si te ha gustado este artículo, recuerda compartirlo, nos ayudas mucho!!

Un saludo

Jesús Jiménez

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies