Estilos en Xamarin.Forms

*Introducción

Podemos definir estilos que determinen los aspectos visuales de nuestra interfaz de usuario tales como colores, tipografías, tamaños, etcétera; de tal manera que no estemos redefiniendo dichos estilos en cada pantalla. Un estilo funciona de la misma manera como una clase en CSS. Para lo cual creamos una clase donde definimos los estilos y de ahí los vamos colocando según se requiera.

*Creando el Proyecto.

image

  1. Seleccionar "Cross-Platform"
  2. Selección de una plantilla a utilizar "Blank App (Xamarin.Forms.Portable"
  3. Nombre de la aplicación en este caso se llamara "AppStylesXF"
  4. Presionar el botón de "Aceptar" para crear el proyecto

*Creando ESTILOS mediante código C#

-Crearemos una carpeta dentro de nuestro proyecto portable con el nombre "Resources" y enseguida crearemos una nueva clase estática y lo llamaremos "AppStyles" que define un estilo para objetos Label. Este código es independiente de la plataforma así que sólo se fija una vez en nuestro proyecto portable.

using Xamarin.Forms;

namespace AppStylesXF.Resources
{
   public static class AppStyles
   {
       public static Color Fuchsia = Color.Fuchsia;
       public static Color Lime = Color.Lime;

       public static Style LabelStyle
       {
           get
           {
               return new Style(typeof (Label))
               {
                   Setters =
                   {
                       new Setter{Property=Label.FontSizeProperty,Value=20},
                       new Setter{Property = Label.TextColorProperty,Value = Fuchsia},
                       new Setter{Property = Label.FontAttributesProperty,Value = FontAttributes.Bold}
                   }
               };
           }
       }
   }
}

Como se muestra en el código anterior, se ha declarado dos propiedades estáticos del tipo "Color", una llamada "Fuchsia" y otra "Lime" y se le ha puesto un nombre de color para cada propiedad, así como un valor, esto lo recomiendo ya que, luego tenemos que personalizar cajas de texto, botones, etc. y no tener que reescribir varias veces los colores que necesitamos usar en nuestros controles.

Luego otra propiedad estática con el nombre "LabelStyle" del tipo Style que tiene un modificador de acceso "get" que retorna un nuevo estilo del tipo "Label"  y en su propiedad "Setters" agregar nuevas propiedades que contendrá el estilo, para este ejemplo solo se cambiaran algunas de las tantas propiedades que tiene "Label" , se ha cambiado la propiedad del tamaño de font al numero 20, la propiedad del color de texto a Fuchsia y por ultimo la propiedad de atributos del font que es "Bold".

*Implementando el ESTILO en código C#.

En la clase App del proyecto portable, creamos el siguiente código:

using AppStylesXF.Resources;
using Xamarin.Forms;

namespace AppStylesXF
{
    public class App : Application
    {

        public App()
        {
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new Label
                        {
                            XAlign = TextAlignment.Center,
                            Text = "Label sin estilo!",

                        },
                        new Label
                        {
                            XAlign = TextAlignment.Center,
                            Text = "Label Con estilo!",
                            Style = AppStyles.LabelStyle

                        }
                    }
                }
            };
        }
    }

En el código anterior en "New Label" que contiene la propiedad "Style" le indicamos el nombre de la clase y propiedad que contiene el estilo creado. para eso el uso de  "using AppStylesXF.Resources;" se indica nombre del proyecto y la carpeta que lo contiene. ahora ejecutamos el proyecto en Andrioid y en iOS y se obtiene el seiguiente resultado:

imageimage

 

*Creando ESTILOS en XAML

Otra forma de crear los estilos para los controles, es el uso de código XAML para esto hacemos click derecho en el proyecto portable > AGREGAR > NUEVO ELEMENTO

image

  1. Seleccionar "Cross-Platform"
  2. Selección de una plantilla a utilizar "Forms Xaml Page"
  3. Nombre de la plantilla en este caso se llamara "HomePage"
  4. Presionar el botón de "Aceptar" para crear la pagina que contendrá XAML

Agregando al "ContentPage" con un "StackLayout" conteniendo dos elementos "Label" con el siguiente codigo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppStylesXF.HomePage">
  <StackLayout>
    <StackLayout>
      <Label Text="Header" />
      <Label Text="Bodytext value" />
    </StackLayout>
  </StackLayout>
</ContentPage>

Ahora que tenemos nuestro contenedor, estamos listos para agregar los estilos. Para esto tenemos que definir un elemento "Style" dentro de nuestro "ResourceDiccionary". Para este ejemplo agregaremos un estilo para "Header" y otro para el "Bodytext":

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppStylesXF.HomePage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="blueTextHeadline" TargetType="Label">
        <Setter Property="TextColor" Value="Blue" />
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="FontSize" Value="30" />
      </Style>
      <Style x:Key="bodyText" TargetType="Label">
        <Setter Property="TextColor" Value="Red" />
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
  <StackLayout>
    <StackLayout>
      <Label Text="Header" />
      <Label Text="Bodytext value" />
    </StackLayout>
  </StackLayout>
</ContentPage>

Tal vez te preguntes por qué tenemos que especificar la ruta completa a la propiedad que queremos modificar dentro del elemento "Setter" en la etiqueta Style, puesto que ya hemos definido que nuestro estilo debe apuntar a los elementos "Label". Este es un requerimiento de la versión preliminar de los Xamarin.Forms 1.3.0 y está sujeta a cambios. Además de esto, los elementos "Setter" se utilizan de la misma manera como se utilizan en el ecosistema Microsoft.

Antes de ejecutar, recordemos que en la clase "App.cs" hay que especificar que nuestra pagina creada llamada "HomePage":

using Xamarin.Forms;

namespace AppStylesXF
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new HomePage();
        }
}

Si probamos la aplicación ahora en Android y en iOS, obtenemos lo siguiente:

image    image

Aun no hemos definido el link entre nuestros elementos "Label"  y el "Style" que queremos aplicar. Para hacer esto tenemos que agregar una referencia estática al elemento que queremos para estilo, usando la sintaxis estándar "StaticResource".

Si ejecutamos en nuestra App de nuevo, obtendremos lo siguiente:

image    image

*Estilos heredados en XAML

Es también posible heredar de otros estilos, para evitar código repetido. Esto se hace ligando la propiedad "BaseOn" en un estilo que se desea usar como estilo de base usando una referencia "StaticResource". Podemos cambiar de código para hacer un nuevo estilo, "inheritedTextStyle", el cual usara el estilo "BodyText" como su estilo base.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppStylesXF.HomePage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="blueTextHeadline" TargetType="Label">
        <Setter Property="TextColor" Value="Blue" />
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="FontSize" Value="30" />
      </Style>
      <Style x:Key="bodyText" TargetType="Label">
        <Setter Property="TextColor" Value="Red" />
      </Style>
      <Style x:Key="interitedTextStyle" TargetType="Label" BasedOn="{StaticResource bodyText}">
        <Setter Property="FontSize" Value="40" />
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
  
  <StackLayout>
    <StackLayout>
      <Label Text="Header" Style="{StaticResource blueTextHeadline}" />
      <Label Text="Bodytext value" Style="{StaticResource interitedTextStyle}"/>
    </StackLayout>
  </StackLayout>
</ContentPage>

Si probamos de nuevo nuestra App, obtendremos el siguiente resultado:

imageimage

*Estilos de Nivel Global en XAML

En este punto, no es posible vincular un "ResourceDiccionary" que reside en un archivo XAML de una pagina especifica, como es la implementación de Microsoft XAML. La única manera de crear estilos es de nivel GLOBAL agregando un "ResourceDiccionary" en el miembro "Resources" de un  "Page". para ejemplificar este punto en el proyecto que ya tenemos creado, junto con el codigo generado, ahora egregaremos una nueva pagina. click derecho en el proyecto portable > AGREGAR > NUEVO ELEMENTO

image

  1. Seleccionar "Cross-Platform"
  2. Selección de una plantilla a utilizar "Forms Xaml Page"
  3. Nombre de la plantilla en este caso se llamara "TestPage"
  4. Presionar el botón de "Aceptar" para crear la pagina que contendrá XAML

En la parte de código XAML agregamos lo siguiente:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppStylesXF.TestPage">
  <StackLayout>
    <StackLayout>
      <Label Text="Titulo de la Pagina" Style="{StaticResource blueTextHeadline}" />
      <Label Text="Descripcion de la pagina" Style="{StaticResource interitedTextStyle}"/>
    </StackLayout>
  </StackLayout>
</ContentPage>

Como se puede ver estamos poniendo el mismo estilo que en ejemplo anterior cuando vimos "estilos heredados", pero si esto ejecutamos, nos marcara un error de no encontrar el estilo. Para esto, hay que pasar la referencia de la instancia de los recursos de "HomePage" en el constructor de la pagina "TestPage" antes de la llamada al meto de inicializar los componentes de XAML (InitializeComponent()).

using Xamarin.Forms;

namespace AppStylesXF
{
    public partial class TestPage : ContentPage
    {
        public TestPage()
        {
            //pasando la referencia de los recursos de -HomePage- a -TestPage-
            Resources = new HomePage().Resources;
            InitializeComponent();
        }
    }
}

Antes de ejecutar, recordemos que en la clase "App.cs" hay que especificar que nuestra pagina creada llamada "TestPage":

using Xamarin.Forms;

namespace AppStylesXF
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new TestPage();
        }
    }
}

Si probamos de nuevo nuestra App, obtendremos el siguiente resultado:

image  image

De esta forma, podemos crear paginas exclusivamente que contengas los estilos que necesitamos para nuestra aplicación  y reutilizarlo en otras paginas donde tengamos vistas para el cliente.

2 thoughts on “Estilos en Xamarin.Forms

  1. Ultimately, a dilemma that I’m passionate about. I have looked for data of this caliber for the previous various hours. Your internet site is greatly appreciated. dbdaecfkcdfcfddg

Deja un comentario