[Xamarin.Forms] Soporte para Apps Windows Runtime!

Introducció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:

 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:

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:

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

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:

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:

Pulsamos el botón cambiar y 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:

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.",
     },
     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."
,
     },
     ...
};

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:

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

Deja un comentario

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