[Xamarin.Forms] Soporte para Apps Windows Runtime!

PreviewIntroducción

Xamarin.Forms es un toolkit que nos crea una abstracción sobre la interfaz de usuario de Android, iOS y Windows Phone permitiendo desarrollar la interfaz de usuario una única vez con código C# o Extensible Application Markup Language (XAML). Teníamos esta posibilidad con Apps Android, iOS y Windows Phone. Sin embargo, en el caso de Windows Phone solo se soportaba Silverlight hasta la versión 8.0. Con la llegada de la versión 8.1 se incorporaron las aplicaciones WinRT que no estaban soportadas… hasta ahora!

En el marco de la dotNetConf 2015, Xamarin ha anunciado la disponibilidad de la versión Windows Preview. Se añade soporte a:

  • Apps Windows Store: Proyectos Windows destinados a Tabletas.
  • Apps Windows Phone 8.1: Proyectos WinRT Windows Phone 8.1.

En este artículo vamos a crear una App Xamarin.Forms con soporte a Windows y Windows Phone 8.1.

¿Te apuntas?

Preparando la Solución

El soporte en versión Preview de Windows en Xamarin.Forms se ha añadido incluyendo una nueva librería que podemos obtener vía NuGet. Por lo tanto, en el proyecto creado podemos mantener el paquete NuGet de Xamarin.Forms añadido, bastará con añadir otro paquete además de cambiar los tipos de proyectos soportados en la librería PCL (en caso de usar PCL en lugar de proyecto Shared).

NOTA: La nueva librería no esta aun incluida en el paquete de Xamarin.Forms al estar en una versión temprana. En futuras versiones más estables será incorporada.

Crearemos un nuevo proyecto Xamarin.Forms:

Nueva Aplicación Xamarin.Forms

Nueva Aplicación Xamarin.Forms

 

 Añadiendo el proyecto Windows

Vamos a comenzar añadiendo el proyecto de la App Windows Store. Clic derecho sobre la solución, nuevo proyecto:

Añadimos el proyecto Windows

Añadimos el proyecto Windows

Dentro de la categoría de proyectos de Aplicaciones de la tienda, seleccionamos una App vacía Windows.

Una vez creada, añadimos la referencia a la PCL:

Añadimos la referencia a la PCL

Añadimos la referencia a la PCL

Continuamos añadiendo una referencia al paquete Xamarin.Forms Windows utilizando NuGet. Para ello, hacemos clic derecho sobre las referencias, Administrar paquetes NuGet…

Añadimos la referencia a Xamarin.Forms Windows

Añadimos la referencia a Xamarin.Forms Windows

Buscamos por “Xamarin.Forms Windows” e instalamos la primera opción.

NOTA: Al instalar Xamarin.Forms Windows se nos añade también las librerías necesarias de Xamarin.Forms.

Ahora llega el momento de preparar el proyecto con leves cambios para utilizar la infraestructura de Xamarin.Forms.

Comenzamos añadiendo en el archivo App.xaml.cs la llamada al método Init en el método OnLaunched:

Xamarin.Forms.Forms.Init (e);

Editamos el tipo de la página principal MainPage.xaml:

forms:WindowsPhonePage

Donde el namespace de forms es:

xmlns:forms="using:Xamarin.Forms.Platform.WinRT"

Suprimimos el tipo Page en MainPage.xaml.cs:

public sealed partial class MainPage

Y en el contructor de la página llamamos al método LoadApplication:

LoadApplication(new Xamarin.Forms_Windows.App());

Y casi todo listo. Basta con revisar el archivo de manifiesto para asegurar tener marcadas las capacidades de Internet y Localización.

Añadiendo el proyecto Windows Phone

Añadimos el proyecto Windows Phone 8.1:

Windows Phone 8.1

Windows Phone 8.1

Al igual que en el caso de Windows añadimos la referencia a la PLC y vía NuGet a Xamarin.Forms Windows.

Al igual que en el proyecto Windows, añadimos en el archivo App.xaml.cs la llamada al método Init en el método OnLaunched:

Xamarin.Forms.Forms.Init (e);

Editamos el tipo de la página principal MainPage.xaml:

forms:WindowsPhonePage

Donde el namespace de forms es:

xmlns:forms="using:Xamarin.Forms.Platform.WinRT"

Suprimimos el tipo Page en MainPage.xaml.cs:

public sealed partial class MainPage 

Y en el contructor de la página llamamos al método LoadApplication:

LoadApplication(new Xamarin.Forms_Windows.App());

Todo listo!

Actualizando la PCL (en caso necesario)

Una vez añadidos los dos nuevos proyectos debemos actualizar el perfil de la PCL. En el proyecto de la misma, hacemos clic derecho y accedemos a sus propiedades. Veremos algo como:

Targets

Targets

Pulsamos el botón cambiar y añadimos Windows Phone 8.1:

Añadimos Windows Phone 8.1

Añadimos Windows Phone 8.1

NOTA: Para poder utilizar los proyectos Windows y Windows Phone bajo WinRT en Xamarin.Forms se requiere Visual Studio 2013 o superior bajo Windows 8.1.

Comenzando!

Llegados a este punto nuestra solución Xamarin.Forms contará con la siguiente estructura:

Los nuevos proyectos en nuestra solución

Los nuevos proyectos en nuestra solución

Con Windows Preview contamos con dos proyectos más para añadir soporte a Apps Windows y Windows Phone 8.1.

En esta ocasión vamos a retomar un antiguo conocido muy simple actualizando con el soporte a las nuevas plataformas. Mostraremos un listado de monos en todas las plataformas utilizando el patrón MVVM.

Comenzamos creando una entidad muy sencilla dentro de la carpeta Models:

public class Monkey
{
     public string Name { get; set; }
     public string Image { get; set; }
     public string Location { get; set; }
     public string Details { get; set; }
}

En nuestra ViewModel definimos una propiedad con  la colección de monos que mostraremos en la interfaz de usuario:

public ObservableCollection<Monkey> Monkeys { get; set; }

Para mantener el enfoque en las nuevas plataformas, reduciremos complejidad al ejemplo cargando el listado de datos directamente de datos locales en nuestra ViewModel:

Monkeys = new ObservableCollection<Monkey>
{
     new Monkey
     {
          Name = "Baboon",
          Location = "Africa & Asia",
          Details = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
          Image = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
     },
     new Monkey
     {
          Name = "Capuchin Monkey",
          Location = "Central & South America",
          Details = "The capuchin monkeys are New World monkeys of the subfamily Cebinae. Prior to 2011, the subfamily contained only a single genus, Cebus.",
          Image = "http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
     },
     ...
};

Ya con la ViewModel preparada llega el turno de definir la interfaz de usuario. Crearemos una interfaz XAML definida dentro de la carpetas Views en nuestra PCL:

<ListView x:Name="List"
          ItemsSource="{Binding Monkeys}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell Height="50">
          <Grid Padding="5">
            <Grid.RowDefinitions>
              <RowDefinition Height="15" />
              <RowDefinition Height="15" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>            
              <ColumnDefinition Width="50"/>
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>     
            <Image
              Grid.Row="0"
              Grid.RowSpan="2"
              Grid.Column="0"
              Source="{Binding Image}"
              Aspect="AspectFill" />
            <Label
              Grid.Row="0"
              Grid.Column="1"
              Text="{Binding Name}"
              LineBreakMode="TailTruncation" />
            <Label
              Grid.Row="1"
              Grid.Column="1"
              Text="{Binding Location}"
              TextColor="Gray"
              LineBreakMode="TailTruncation" />
          </Grid>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Nuestra App esta lista para funcionar en tabletas Windows además de contar con versión Windows Phone 8.1:

Xamarin.Forms Windows Sample

NOTA: En la imagen anterior no aparecen pero seguimos por supuesto contando con App para Windows Phone 8.0 Silverlight e iOS.

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

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

Ver GitHub

Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.

Conclusiones

Estamos ante una versión Preview y tenemos aun varias limitaciones:

  • No contamos aun con soporte a Mapas.
  • Nos falta el control GridView. En el caso de Apps Windows Store sin duda un control a echar de menos.
  • Algunos controles no se comportan exactamente igual y otros no tienen disponible todas las características.

A pesar de todo, esta versión Preview nos añade soporte para Apps WinRT en tabletas Windows y en teléfonos Windows Phone 8.1 que era una de las peticiones quizás más comunes. Es un gran paso adelante y no me cabe ninguna duda que en los próximos meses (¿alguien dijo //BUILD?) tendremos nuevas versiones añadiendo características.

Más información

Un pensamiento en “[Xamarin.Forms] Soporte para Apps Windows Runtime!

  1. Javier que tal un gusto saludarte, tuve oportunidad de revisar tu articulo y me parece muy interesante, sin embargo tengo una duda con este, segun entiendo con xamarin.Forms, ya me sera posible crear app, para windows 8, esto tambien aplica para windows 10?

    saludos..!!

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