[Tips and Tricks] Como añadir App.xaml en Xamarin.Forms

XAMLIntroducción

Xamarin.Forms es un toolkit que crea una abstracción sobre la interfaz de usuario de Android, iOS y Windows Phone permitiendo desarrollarla una única vez con código C# o Extensible Application Markup Language (XAML).

Cuando creamos una nueva Aplicación Xamarin.Forms:

AppXAML 01

Nueva App Xamarin.Forms

Automáticamente se nos crea una estructura con cuatro proyectos, tres por cada plataforma nativa y uno con el código común que segun elección será una PCL o un proyecto Shared. En el código compartido se nos creará un archivo llamado App.cs:

Estructura de proyecto Xamarin.Forms

Estructura de proyecto Xamarin.Forms

Este archivo es el punto de entrada de la App donde se establece la vista inicial, se realizan inicializaciones y se gestiona el ciclo de vida compartido de la App. Los desarrolladores .NET con experiencia en WPF, Windows Phone o Windows Store están acostumbrados a utilizar también un fichero XAML asociado donde se pueden establecer estilos comunes a toda la Aplicación además de incluir estilos definidos en diccionario de recursos. Una forma sencilla y bastante potente para poder organizar todos los recursos y estilos necesarios.

¿Podemos haer algo similar con Xamarin.Forms?

En este artículo vamos a aprender como reemplazar el archivo App.cs por un archivo App.xaml con su App.xaml.cs asociado.

Creando el archivo App.xaml

En nuestra PCL o proyecto Shared vamos a incluir un nuevo fichero de tipo Forms Xaml Page:

Añadimos App.xaml

Añadimos App.xaml

Al añadir este archivo veremos la siguiente vista XAML:

<?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="MyXamarinFormsApp.App">
  <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Con el siguiente código asociado:

public partial class App : ContentPage
{
     public App()
     {
         InitializeComponent();
     }
}

Suprimimos el archivo App.cs y realizamos la siguiente modificación en App.xaml.cs:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyXamarinFormsApp.App">

</Application>

Reemplazamos ContentPage por Application. En el código asociado, la clase derivará también de Application y de manera opcional añadiremos la sobreescritura de los métodos que necesitemos (como por ejemplo, los eventos del ciclo de vida).

public partial class App : Application
{
     public App()
     {

     }

     protected override void OnStart()
     {
         // Handle when your app starts
     }

     protected override void OnSleep()
     {
         // Handle when your app sleeps
     }

     protected override void OnResume()
     {
         // Handle when your app resumes
     }
}

Si ejecutamos en este punto, todo funcionará exactamente igual a antes del cambio.

Estilos a nivel de Aplicación

Podemos definir recursos a nivel de Aplicación donde crear desde recursos a estilos más complejos a compartir a lo largo de toda la aplicación:

<Application.Resources>  
     <ResourceDictionary>
          <Style
               x:Key="AppButtonStyle"
               TargetType="Button">
               <Setter Property="Rotation" Value="25" />
          </Style>
     </ResourceDictionary>
</Application.Resources>

En nuestra vista principal podemos acceder al estilo definido en App.xaml:

<Style x:Key="InheritedAppButtonStyle" TargetType="Button" BasedOn="{StaticResource AppButtonStyle}">
     <Setter Property="BorderColor" Value="Green" />
     <Setter Property="FontSize" Value="Large" />
</Style>

El botón en nuestra vista principal:

<Button
     Text="Herencia de Estilos desde App"
     Style="{StaticResource InheritedAppButtonStyle}"/>

El resultado:

El resultado

Rl resultado

Podéis descargar el ejemplo realizado a continuación:

También podéis acceder al código fuente directamente en GitHub:

Ver GitHub

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s