[Xamarin.Forms] Propiedades específicas desde XAML para Windows Desktop y Mobile

Introducción

Xamarin.Forms añade una capa de abstracción sobre la capa de la interfaz de usuario permitiendo definir la misma una única vez siendo válida para todas las plataformas.

Xamarin.Forms
Xamarin.Forms

A pesar de definir la interfaz de usuario una única vez para todas las plataformas, tenemos la posibilidad de realizar personalizaciones y adaptaciones para ofrecer la mejor experiencia posible en cada una de las plataformas soportadas.

La clase Device

La clase Device sin duda alguna es una de las claves a la hora de personalizar la interfaz de usuario por plataforma. Esta clase contiene diversas propiedades y métodos para personalizar la UI y la funcionalidad en base a la plataforma.

La propiedad OS permite identificar la plataforma en la que se ejecuta la aplicación. Puede ser un valor de la enumeración TargetPlatform con uno de los siguientes valores:

  • iOS
  • Android
  • WinPhone (Windows 8 Silverlight)
  • Windows (Windows 8.1, Windows Phone 8.1 y UWP)

Permite de forma sencilla y efectiva personalizar la interfaz o la lógica de la aplicación en base a la plataforma:

if (Device.OS == TargetPlatform.iOS) 
{
    stackLayout.Padding = new Thickness (0, 20, 0, 0);
}

La interfaz de usuario de las aplicaciones Xamarin.Forms podemos definirla en C# o desde código XAML. Desde XAML también podemos realizar personalizaciones en base a la plataforma utilizando el método OnPlatform. Device.OnPlatform es un método que cuenta con uno de los siguientes parámetros opcionales:

  • iOS
  • Android
  • WinPhone
<BoxView 
     WidthRequest="100"
     HorizontalOptions="Center">
  <BoxView.Color>
    <OnPlatform x:TypeArguments="Color"
      iOS="Green"
      Android="#738182"
      WinPhone="Accent" />
  </BoxView.Color>
</BoxView>

Lo visto esta genial pero hay un pequeño detalle que nos puede causar problemas…

¿Qué ocurre si deseamos personalizar la UI desde XAML y dinstinguir entre Windows Phone y Windows?.

La clase OnPlatform no nos facilita la gestión completa. Siempre nos queda la posibilidad de hacer lo necesario desde código C# pero aspectos directamente relacionados con la UI sería fantástico poder llevarlo a cabo desde la propia UI o lo que es lo mismo desde código XAML.

CustomOnPlatform

Aquí es donde entra en juego un pequeños helper creado en código C#:

public sealed class CustomOnPlatform<T>
{
     public CustomOnPlatform()
     {
         Android = default(T);
         iOS = default(T);
         WinPhone = default(T);
         Windows = default(T);
     }

     public T Android { get; set; }

     public T iOS { get; set; }

     public T WinPhone { get; set; }

     public T Windows { get; set; }

     public T Other { get; set; }

     public static implicit operator T(CustomOnPlatform<T> onPlatform)
     {
         switch (Xamarin.Forms.Device.OS)
         {
             case Xamarin.Forms.TargetPlatform.Android:
                 return onPlatform.Android;
             case Xamarin.Forms.TargetPlatform.iOS:
                 return onPlatform.iOS;
             case Xamarin.Forms.TargetPlatform.WinPhone:
                 return onPlatform.WinPhone;
             case Xamarin.Forms.TargetPlatform.Windows:
                 if (Xamarin.Forms.Device.Idiom == Xamarin.Forms.TargetIdiom.Desktop)
                     return onPlatform.Windows;
                 else
                     return onPlatform.WinPhone;
         }
     }
}

Sencillo. Utilizamos la propiedad OS de la clase Device para determinar la plataforma en la que estamos. En el caso de Windows, dado que nos indica el mismo valor en UWP (tanto si estamos en el Desktop como Mobile) hacemos uso combinado con la propiedad Idiom.

La propiedad Idiom tiene como objetivo fundamental determinar si la aplicación se ejecuta en teléfono, tableta o escritorio. Puede contener unos de los siguientes valores de la enumeración TargetIdiom:

  • Desktop: Detecta aplicación UWP en Windows 10.
  • Phone: La aplicación corre en iPhone, iPod Touch, móvil Android o Windows Phone.
  • Tablet: iPad, tableta Android o Windows 8.1.

De esta forma, además de detectar cuando se ejecuta en iOS y Android, podremos detectar cuando se ejecuta en Windows Phone y en Windows (UWP) tanto en escritorio como móvil.

Para usar el helper desde XAML, definimos el namespace:

xmlns:helpers="clr-namespace:CustomOnPlatform.Helpers;assembly=CustomOnPlatform"

Y lo usamos tal y como usaríamos OnPlatform:

<BoxView 
     HorizontalOptions="Center"
     VerticalOptions="Center"
     HeightRequest="100"
      WidthRequest="100">
     <BoxView.BackgroundColor>
         <helpers:CustomOnPlatform  
             x:TypeArguments="Color"
             Android="Red"
             iOS="Blue"
             WinPhone="Yellow"            
             Windows="Green"/>
     </BoxView.BackgroundColor>
</BoxView>

El resultado de la ejecución anterior es, cuadrado rojo en Android, azul en iOS, amarillo en Windows Phone (Silverlight) y Windows Mobile (UWP) siendo por último, verde en Windows escritorio.

Tenéis el código fuente del ejemplo utilizado disponible en GitHub:

Ver GitHub

Recuerda, cualquier tipo de duda o sugerencia es bienvenida en los comentario del artículo.

Más información

[Evento] Xamarin Dev Days en Madrid

El evento

Xamarin Dev Days son una serie de eventos celebrados a lo largo de todo el mundo que ofrecen la posibilidad de conocer las últimas novedades relacionadas con el desarrollo Xamarin, poder disfrutar de talleres y por supuesto, compartir momentos de networking.

Xamarin Dev Days
Xamarin Dev Days

Con fuerza llega a Madrid, donde tendremos la siguiente agenda:

• 9:00AM Registro y bienvenida.

• 9:30 – 10:10AM Introducción a Xamarin. Introducción a los conceptos básicos tanto de Xamarin Classic como de Xamarin.Forms así como a la integración con Visual Studio, Xamarin Test Cloud, etc.

• 10:20 – 11:00AM Xamarin Forms. Tras una introducción a conceptos básicos se verá como estructurar el proyecto y una serie de buenas prácticas para compartir la mayor cantidad de código posible. Finalmente se terminará con las últimas novedades como Xamarin.Forms Previewer, DataPages, Themes o Native Embedding.

• 11:10 – 11:40AM Café.

• 11:40 – 12:20AM Xamarin + Azure. Gracias al Azure podemos crear servicios de backend, notificaciones push y otras características esenciales de forma compartida. En esta sesión aprenderemos como sacarle partido a Azure desde nuestras aplicaciones Xamarin.

• 12:30 – 13:30PM Comida.

• 13:30 – 16:30PM Hands on Lab. ¿Crear una aplicación Xamarin paso a paso con MVVM, uso de servicios web y accediendo a características de cada plataforma?. En este taller realizaremos una aplicación con esas características entre todos. Anímate y ven con tu portátil preparado!

• 16:30PM Networking.

Organizadores y ponentes

El lugar

El evento se celebrará en Liferay. Dirección detallada:

Paseo de la Castellana, 280, 28046 Madrid, Madrid

Liferay
Liferay

La fecha

El evento tendrá lugar el próximo Sábado, 26 de Noviembre de 9:00h a 16:30h. Tendremos tres sesiones técnicas de  40 minutos de duración cada una junto a un taller de 3 horas de duración. Además contaremos con regalos y sorpresas.

¿Te apuntas?

Más información

[Material] Microsoft Tech Summit

El evento

El pasado 05 y 06 de Octubre, en el Palacio Municial de Congresos de Madrid tenía lugar el Microsoft tech Summit 2016, un evento donde se daban cita clientes, partners y desarrolladores de tecnologías Microsoft.

Microsoft Tech Summit
Microsoft Tech Summit

Con 10 Tracks organizados en diferentes categorías, varias deceneas de sesiones, un par de talleres y cientos de asistentes, un gran evento donde volver a ver a grandes amigos, conocer a otros nuevos, compartir y aprender mucho.

A continuación, una pequeña galería con algunos momentos del evento:

El material

Pude participar en el evento con una sesión en el track de Mobile Apps & Cross-Platform junto a un taller.

En la sesión me centré en dar a conocer todas las implicaciones y conceptos necesarios para desarrollar una aplicación UWP para Xbox One. Aspectos como la gestión del Gamepad, sonido o la adaptación a TV además de cómo adaptar la UI, sacar partido con efectos visuales y elementos 3D.

App UWP para Xbox One
App UWP para Xbox One

La presentación utilizada la tenéis disponible a continuación:

En cuanto a las demos técnicas realizadas, las tenéis disponible en GitHub:

Ver GitHub

Además de la sesión, por la tarde, disfrutamos de un divertido taller de 2,5h sobre Xamarin.

Realizamos paso a paso desde cero una aplicación meteorológica realizada con Xamarin.Forms y utilizando MVVM. Muy divertido!

Me gustaría terminar agradeciendo a Microsoft, sponsors, ponentes y asistentes por hacer el posible el evento. Ante la cantidad y calidad de sesiones, el networking, sorpresas, concursos y grandes momentos, no puedo terminar de otra forma que no sea…

¿Para cuándo el próximo?

Más información

[Tips and Tricks] Corrección al error “Unsupported major.minor version 52.0”

androidEl error

Lleno de ilusión, descargas e instalas Xamarin y te dispones a crear tu primera aplicación móvil multiplataforma nativa con C#. Seleccionas el proyecto Android como proyecto de arranque, un simulador y compilas. Si tras breves segundos no ves tu aplicación en ejecución, quizás estas dentro del porcentaje reducido de desarrolladores que obtienen el siguiente error:

Unsupported major.minor version 52.0
Unsupported major.minor version 52.0

¿Qué ocurre?

Probablemente has instalado múltiples SDKs de Android utilizando Android SDK Manager. Xamarin Android intenta utilizar las últimas “Android Build-Tools” aún no compatibles.

La solución

Tenemos dos caminos posibles.

El primero de ellos se basa en actualizar Java JDK y asegurar su uso. La versión 52.0 referenciada en el error se refiere al JDK, en concreto a la versión 8. Xamarin Android 7.0 requiere el JDK 1.8 para usar las APIs de Android Nougat (API Level 24). Es necesaria además una versión de 64 bits para poder usar controles personales en el editor Android entre otras acciones.

Descargamos la versión correspondiente del JDK en este enlace.

Tras descargar e instalar, debemos asegurar que se utiliza la versión instalada. Para ello:

  • Visual Studio: Tools > Options > Xamarin > Android Settings > Java Development Kit Location.
  • Xamarin Studio (en Mac): Xamarin Studio > Preferences > Projects > SDK Locations > Android > Java SDK (JDK).

El segundo camino se basa en utilizar Android 6.0 o lo que es lo mismo el API Level 23. Abrimos Android SDK Manager:

Abrimos Android SDK Manager
Abrimos Android SDK Manager

Debemos desinstalar:

  • Android SDK Build-tools 24.0.x.

Y tener instalado:

  • Android SDK Build-tools 23.0.x.
  • SDK Platform 23.
Android SDK Manager
Android SDK Manager

Más información

[Tips and Tricks] Corregir error “could not connect to the debugger” utilizando Visual Studio Android Emulator

device-tablet-wfEl problema

Estas desarrollando una aplicación nativa multiplataforma con Xamarin con soporte a Android, te disponibles a lanzar y depurar la misma en el emulador Android incluido con Visual Studio y…

No se puede depurar!
No se puede depurar!

La aplicación realiza el despliegue e incluso arranca en el emulador, pero se detiene inmediatamente sin permitir depurar. Obtenemos el mensaje:

Could not connect to the debugger.

¿Cómo solucionamos el problema?

La solución

El error radica en incompatibilidades entre el procesador que hace de host y la máquina virtual Hyper-V.

En Windows 10, pulsamos el botón de inicio y escribimos MMC. A continuación, pulsamos la opción Hyper-V Manager:

Hyper-V Manager
Hyper-V Manager

En la herramienta de gestión de máquinas Hyper-V (emuladores) seleccionamos la que queremos usar y hacemos clic derecho, Settings.

Virtual Machines
Virtual Machines

En la ventana de configuración de la máquina, vamos a la sección Compatibility y habilitamos Migrate to a physical computer with a different processor version:

Configuración de compatibilidad
Configuración de compatibilidad

Si ejecutamos de nuevo la aplicación depurando desde Visual Studio, todo debe funcionar como se espera.

Más información

[Tips and Tricks] “Error MT0091: This version of Xamarin.iOS requires the iOS 10.0 SDK (shipped with Xcode 8.0) when the managed linker is disabled”

i-phoneEl problema

Desarrollando una aplicación con Xamarin para iOS, acabas de actualizar recientemente (Cycle 8) y al intentar compilar y desplegar el proyecto te encuentras con el siguiente error:

Error MT0091
Error MT0091

¿Qué ocurre?

La solución

El problema viene dado por tener la última versión de Xamarin.iOS ya preparada para iOS 10.0  y no tener XCode actualizado a la última versión. Xamarin.iOS 10 incluye los simbolos de XCode 8.

Tenemos dos soluciones.

  • La primera de ellas es sencilla, actualizar XCode a la versión 8.0.
  • La segunda opción es indicar al Linker que no utilice estos simbolos para permitir la compilación contra versiones anteriores de XCode (como es tu caso). Debes dirigirte a las propiedades del proyecto (clic derecho), pestaña Build, iOS Build y acceder a la opción Linker Behavior. Debes seleccionar la opción Link Framework SDKs only.

Más información