[Xamarin.Forms] Un vistazo a Grial UI Kit V2

Introducción

Xamarin.Forms ofrece una capa de abstracción sobre la capa de la interfaz de usuario permitiendo definir la interfaz de usuario una única vez con código C# o XAML.

Desde los inicios de Xamarin.Forms a hoy día, todo ha evolucionado a pasos agigantados tanto las propias posibilidades de Xamarin.Forms, como el crecimiento de la comunidad así como la implicación de terceros. Hoy precisamente nos vamos a centrar en la segunda versión de Grial UI Kit.

NOTA: Gracias a los chicos de UXDivers por ceder una licencia de Grial para realizar pruebas sobre la librería.

Grial UI Kit

El objetivo principal de Grial es ofrecer un conjunto de controles y plantillas para Xamarin.Forms permitiendo crear interfaces de usuario ricas y vistosas con facilidad.

Grial UI Kit

Cuenta con soporte para:

  • Android 4.1+ (API Level 16).
  • iOS 8.0+.

Incluye:

  • Plantillas y vistas preparadas
  • Controles
  • Efectos
  • Animaciones
  • Temas
  • Iconos

Novedades

De la versión anterior a ahora se han añadido nuevas plantillas de páginas, nuevos controles, tres nuevos temas, animaciones y soporte a tabletas.

Creación de proyectos

La primera de las novedades visibles que vemos esta relacionada con la creación de proyectos. Accedemos a un portal de administración llamado Grial Admin.

Desde el panel de administración podemos crear aplicaciones añadiendo el nombre. De esta forma podemos descargar dos tipos de proyectos:

  • Full: Contiene absolutamente todos los ejemplos y controles incluidos en Grial.
  • Starter: Proyecto mínimo que cuenta con soporte a Grial, sus librerías.

Ambos cuentan con el espacio de nombres y todo lo necesario ya preparado con el nombre asignado a la aplicación.

Tras descargar el proyecto, debemos configurar el acceso a los paquetes NuGet añadiendo un nuevo repositorio de paquetes.

En Visual Studio, accedemos al menu de Opciones > Herramientas > Nuget Package Manager > Package Sources.

Nuevos paquetes

NOTA: Para configurar el repositorio será necesario introducir usuario y contraseña.

Optimización a Tablets

Una de las novedades más importantes se encuentra en las posibilidades de adaptación a diferentes factores de forma, teléfonos y tabletas.

UIs adaptadas a tabletas

Además de tener plantillas ya preparadas para funcionar correctamente tanto en teléfonos como tabletas, se añade un unos helpers Responsive.

Este helper cuenta con diferentes propiedades:

  • Default: Aplica a todos los casos. Es el valor por defecto.
  • Portrait: Aplica a todos los dispositivos en modo vertical.
  • Landscape: Aplica a todos los dispositivos en modo horizontal.
  • PortraitPhone: Aplica solo a teléfonos en modo vertical.
  • PortraitTablet: Aplica solo a tabletas en modo vertical.
  • PortraitDesktop: Aplica solo cuando el dispositivo es escritorio en modo vertical.
  • LandscapePhone: Aplica en teléfonos en modo horizontal.
  • LandscapeTablet: Aplica en tabletas en modo horizontal.
  • LandscapeDesktop: Aplica en escritorio en modo horizontal.

Su uso:

<Label
    Text="{ 
        artina:OnOrientationString 
            Portrait=IsPortrait, 
            Landscape=IsLandscape
        }" 
    IsVisible="{ 
        artina:OnOrientationBool 
            Default=true, 
            PortraitDesktop=false 
        }"
        "/>

El texto mostrará un texto diferente en modo vertical y horizontal además, siempre será visible menos en modo vertical en escritorio. Añade de forma sencilla bastante versatilidad para adaptar la interfaz de usuario en diferentes modos.

Temas

Se añaden varios temas ya preparados y tareas de compilación que permiten cambiar temas al vuelo en la aplicación.

Temas

Nuevos controles

Se han añadido nuevos controles:

  • TabControl: Control de pestañas compatible con iOS y Android que permite el posicionamiento tanto superior como inferior. Totalmente personalizable.
  • Badge: Icono numérico.
  • CircleIcon: Imagen circular.
  • Timeline: Listado con formato línea del tiempo.
  • Rating: Control para puntuar con estrellas.
  • Repeater: Control de listados con personalización de scroll, tamaño de elementos, etc.
  • Walkthroughs: Crea facilmente asistentes personalizables.
  • FontIcons: Permite mostrar iconos utilizando fuente. Incluidos más de 1500 iconos.
  • Lottie Animations: Se incluye soporte a animaciones Lottie.
TabControl

Analizando Grial

Tras ver novedades principales, vamos a continuar realizando un pequeño análisis de la librería.

El tamaño del paquete

Grial se basa en un conjunto de diferentes librerías.

PCL

  • UXDivers.Artina.Shared.dll (50KB)
  • UXDivers.Artina.Shared.Base.dll (13KB)

iOS

  • UXDivers.Artina.Shared.iOS.dll (19KB)
  • UXDivers.Artina.Shared.Base.iOS.dll (12KB)

Android

  • UXDivers.Artina.Shared.Droid.dll (31KB)
  • UXDivers.Artina.Shared.Base.Droid.dll (14KB)

Para utilizar los efectos tenemos otra librería:

PCL

  • UXDivers.Effects.dll (7KB)

iOS

  • UXDivers.Effects.iOS.dll (8KB)

Android

  • UXDivers.Effects.Droid.dll (93KB)

Y para controles:

PCL

  • UXDivers.Artina.Shared.Tab.dll (20KB) – Control TabControl
  • UXDivers.Artina.Shared.Repeater.dll (17KB) – Control Repeater

Dependencias

Con el firme objetivo de mejorar el rendimiento se han añadido algunas dependencias con librerías de terceros con respecto a la versión anterior. Nos encontramos con:

El XAML aportado en el proyecto PCL no está muy acoplado, sólo con los estilos definidos en App.xaml. En el proyecto Xamarin.Android, tenemos una personalización de temas nativos. Mientras que en el proyecto Xamarin.iOS, esta personalización de temas viene en forma de un archivo ThemeColors.cs.

Rendimiento

Grial hace uso de compilación de XAML, reutilización de celdas en listados y otras características incluidas en Xamarin.Forms centradas en el rendimiento. Tras hacer pruebas en emuladores y dispositivos haciendo medidas con Xamarin Profiler, no se encuentran problemas ni penalizaciones relacionadas con el rendimiento.

MVVM

Las páginas con diferentes plantillas, layouts y controles se encuentran asociadas a una ViewModel. La implementación del patrón así como la separación de responsabilidades se encuentra bien implementada ayudando a su correcta implementación al utilizar Grial. Los controles añadidos como por ejemplo el TabControl, añaden propiedades de dependencia necesarias para controlar el comportamiento y apariencia del control.

Soporte multiplataforma

Contamos con soporte a iOS y Android. Tras múltiples pruebas en diferentes dispositivos y emuladores nos encontramos con interfacecs robustas con una implementación prácticamente exacta en cada plataforma y condición.

No encontramos eso sí soporte a UWP (Universal Windows Platform). Es una plataforma que permite el acceso a los diferentes dispositivos de familias de Windows 10 (PCs, tabletas, teléfonos, Xbox One, Surface Hub, IoT, HoloLens).

Conclusiones

Volvemos a estar frente a un paquete bastante grande de plantillas con vistas muy comunes y necesarias en muchas aplicaciones (vista detalle de producto, sign in, registro, chat, configuración, etc.) con un diseño muy cuidado y adaptado a diferentes plataformas y factores de forma. En esta versión nos encontramos la adaptación a diferentes factores de forma, el uso de temas o la llegada de nuevos controles.

Un componente  que no solo aporta funcionalidad, también la forma de hacer ciertas necesidades en la UI con Xamarin.Forms.

¿Y a ti que te parece?

Más información

[Material] Xamarin Dev Days Sevilla 2017

El evento

El pasado sábado 08 de Abril, tenía lugar en Sevilla el Xamarin Dev Days 2o17. Una jornada con varias sesiones técnicas, taller, regalos y mucho networking.

El resultado fue un fantástico día de desarrollo Xamarin con caras nuevas en el grupo, muchas preguntas, ayuda y tiempo para charlar entre todos rodeados de unas pizzas.

El material

Pude participar en el evento con varias de las sesiones. Comenzamos el evento con una sesión introductoria a Xamarin:

A continuación, nos centramos en el desarrollo de aplicaciones móviles multiplataforma utilizando Xamarin.Forms además de ver las últimas novedades:

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

Ver GitHubQuisiera terminar añadiendo algunos agradecimientos. Comienzo por los chicos de Bitnami por las instalaciones, la comida y toda la ayuda ofrecida (muchas gracias!); a Plain Concepts por su patrocinio; a SyncFusion y Xamarin también por patrocinar el evento, los asistentes quedaron encantados con los goodies y licencias; a mi compañero Juan María Lao por sus demos y ayudar con todo y por supuesto a los asistentes. Gracias a todos. Si además están todo el día y con preguntas constantes, hace que todo sea tan apasionante y divertido que…¿cuándo la próxima?.

Más información

[Tips and Tricks] Correción errores compilación Xamarin.Androd

AndroidIntroducción

Gracias a poder participar en múltiples talleres relacionados con el desarrollo Xamarin y principalmente, a los cursos Xamarin que tengo disponible en CampusMVP tengo la posibilidad de interactuar con una gran cantidad de desarrolladores que utilizan Xamarin. Esto me ha permitido conocer las principales dudas y los principales problemas a los que se enfrentan.

En el artículo de hoy, vamos a centrarnos en un error relacionado con la compilación Android dado en mayor medida tras actualizar el paquete de Xamarin.Forms o uno de los implicados con Xamarin.Android.

El problema

Tras actualizar el paquete de Xamarin.Forms o alguno de los implicados con Xamarin.Android obtenemos el siguiente error:

Please install package: 'Xamarin.Android.Support.v4' available in SDK installer. Java library file ...\AppData\Local\Xamarin\Xamarin.Android.Support.v4\23.3.0.0\content\libs/internal_impl-23.3.0.jar doesn't exist.	

También puede ser:

error APT0000: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light.DarkActionBar'.

Xamarin descarga paquetes relacionados con el SDK de Android en la ruta %UserProfile%\AppData\Local\Xamarin\zips tras la restauración de paquetes. Dependiendo de varios factores como la conexión a internet, el tiempo de respuesta puede verse afectado. La implicación es el «congelado» del proceso de compilación en Visual Studio. Puedes creer que no esta sucediendo nada o bien, que algún error ha ocurrido. Ante esta situación, si se cancela la compilación o se cierra Visual Studio, todo puede quedar un estado indeterminado.

La solución

Lo primero que se suele intentar es limpiar y recompilar el proyecto. No funciona. Nos ponemos «más serios» y limpiamos la carpeta packages, bin y obj. Tampoco es suficiente.

Debemos de volver a permitir realizar la descarga de los paquetes relacionados con el SDK Android desde cero. Para ello:

  1. Cerrar Visual Studio.
  2. Acceder a la carpeta del proyecto, limpiar la carpeta packages.
  3. Limpiar todos los paquetes de Xamarin.Android disponibles en la cache de NuGet disponible en la ruta %UserProfile%\.nuget\packages\Xamarin.Android.*.
  4. Limpiar todos los paquetes de Xamarin.Android disponibles en la cache de Xamarin disponible en la ruta %UserProfile%\.nuget\packages\Xamarin.Android.*.
  5. ¿Recuerdas la ruta donde se descargaban los paquetes relacionados con el SDK de Android?. Limpiar las descargas no completadas de la ruta %UserProfile%\AppData\Local\Xamarin\zips.

Tras el proceso anterior, recompilar y esperar (es importante, paciencia!). Todo correcto de nuevo.

Más información

[Xamarin] Gráficas con Oxyplot

ChartIntroducción

En ocasiones en nuestras aplicaciones tendremos la necesidad de mostrar al usuario cierta información de la manera más directa y sencilla posible de modo que de un solo vistazo el usuario sea capaz de obtener la mayor información posible. A nivel de interfaz tenemos muchísimas opciones muy interesantes sin embargo, un excelente recurso muy utilizado para este tipo de situaciones es el uso de gráficas. Por ejemplo, estamos realizando una aplicación de compra de viviendas. Sería fantástico mostrarle al usuario la información de como ha oscilado el precio de la viviendo en el último trimestre por ejemplo. ¿Como lo hacemos?, ¿Que piensas que sería lo más acertado?. Posiblemente una gráfica de barras u otra similar te haya pasado por la mente.

En esta entrada vamos a aprender como utilizar gráficas en nuestras aplicaciones Xamarin utilizando OxyPlot.

Añadiendo las dependencias necesarias

Tras crear la solución Xamarin.Forms, comenzamos añadiendo las dependencias necesarias. Hacemos clic secundario sobre la solución, Administrar paquetes NuGet para la solución…

Añadir paquetes NuGet

Buscamos por Oxyplot.Xamarin.Forms:

Oxyplot.Xamarin.Forms

Inciando renderers Oxyplot

Es necesario añadir código específico en cada plataforma para inicializar renderers de Oxyplot.

iOS

Utilizamos el método FinishedLaunching del delegado de la aplicación:

OxyPlot.Xamarin.Forms.Platform.iOS.PlotViewRenderer.Init();

Android

En el método OnCreate de la actividad principal debemos añadir:

OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();

Windows

En este caso, en la clase App.xaml.cs, donde se define Application en Windows, utilizamos el método OnLaunched:

OxyPlot.Xamarin.Forms.Platform.UWP.PlotViewRenderer.Init();

PlotView

Tras inicializar OxyPlot, estamos preparados para comenzar a trabajar con la librería. OxyPlot cuenta con un control llamado PlotView. Este control se encuentra disponible en el namespace XAML:

xmlns:oxyplot="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"

El control cuenta con una propiedad fundamental Model de tipo PlotModel:

<AbsoluteLayout>
     <oxyplot:PlotView
          AbsoluteLayout.LayoutFlags="All"
          AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
          Model="{Binding PlotModel}" />
</AbsoluteLayout>

PlotModel define el origen de la fuente de información de la gráfica así como, información relacionada con el tipo de gráfica.

Enlazar datos

A nivel de ViewModel, necesitamos definir una propiedad de tipo PlotModel:

private PlotModel _plotModel;

Propiedad pública:

public PlotModel PlotModel
{
     get { return _plotModel; }
     set
     {
          _plotModel = value;
          RaisePropertyChanged();
     }
}

PlotModel cuenta con diferentes propiedades que permiten definir el renderizado de la gráfica. Tenemos desde propiedades sencillas y comunes como Title que permite definir el título de la gráfica a otras más complejas como Series.

La propiedad Series espera un valor de tipo OxyPlot.Series. Esta propiedad permite definir el tipo de gráfica a utilizar.

Veamos un sencillo ejemplo para crear una gráfica de columnas utilizando ColumnSeries:

PlotModel = new PlotModel
{
     Title = "Column"
};

var columnSerie = new ColumnSeries
{
     StrokeThickness = 2.0
};

columnSerie.Items.Add(new ColumnItem(1));
columnSerie.Items.Add(new ColumnItem(2));
columnSerie.Items.Add(new ColumnItem(3));
columnSerie.Items.Add(new ColumnItem(4));
columnSerie.Items.Add(new ColumnItem(5));

PlotModel.Series.Add(columnSerie);

El resultado:

Gráfica de columnas

Tipos de gráficas

Tenemos una enome variedad de tipos de gráficas diferentes:

  • Área
  • Líneas
  • Barras
  • Columnas
  • Puntos
  • Circular
  • Mapa de calor
  • Etc

Además se pueden realizar composiciones haciendo combinaciones de varias de ellas, por ejemplo, barras con líneas.

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

[Material CartujaDotNet] Visual Studio 2017 Launch Event

El evento

El pasado 28 de Marzo celebrábamos en CartujaDotNet el lanzamiento de Visual Studio 2017!.

Visual Studio 2017 Launch Event

Contámos con varias sesiones cortas y directas donde vimos las principales novedades en el IDE además de novedades en productividad, Xamarin, Visual Studio Mobile Center, DevOps, etc. Además de por supuesto momentos para el networking!

El material

La presentación:

[slideshare id=73897133&doc=visualstudio2017-launcheventsevilla-170329183817]

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

Ver GitHubNos vemos en la próxima!

Más información

[Xamarin.Forms] Uso de Mapas básico con MVVM

mapsIntroducción

En el desarrollo de aplicaciones móviles contamos con una serie de controles de peso, altamente utilizados y que definen las características básicas de muchas aplicaciones. Hablamos de controles como listados, carruseles o mapas.

En Xamarin.Forms se pueden utilizar mapas utilizando las APIs nativas de cada plataforma. El uso básico se ve altamente simplifcado utilizando un paquete NuGet, Xamarin.Forms.Maps, que requiere cierta configuración inicial.

Trabajando con mapas, el inicio

Para trabajar con mapas en Xamarin.Forms debemos de comenzar añadiendo un paquete NuGet en cada proyecto de la solución, es decir, tanto en la librería portable como en cada proyecto nativo.

NuGet
NuGet

Tras añadir el paquete NuGet se deben de realizar tareas de inicialización.

En el caso de iOS se debe añadir:

Xamarin.FormsMaps.Init();

En el delegado principal de la aplicación tras inicializar Xamarin.Forms en el método FinishedLaunching.

En el caso de Android:

Xamarin.FormsMaps.Init(this, bundle);

Se realiza la inicialización de los mapas en la actividad principal utilizando el método OnCreate.

Por último, en el caso de Windows, la inicialización se realiza en el constructor de la página principal, MainPage:

Xamarin.FormsMaps.Init("INSERT_AUTHENTICATION_TOKEN_HERE");

Además de realizar el proceso de inicialización, los mapas requieren de ciertas capacidades además de requerir un Api Key correspondiente a los mapas nativos utilizados en cada plataforma.

En iOS, si se utiliza iOS 8 o superior, es necesario añadir dos claves al Info.plist.

<key>NSLocationAlwaysUsageDescription</key>
    <string>Can we use your location</string>
<key>NSLocationWhenInUseUsageDescription</key>
    <string>We are using your location</string>

En Android se utiliza la API de Google Maps que requiere un Api Key. A nivel de aplicación en el arhivo de manifiesto Android es necesario añadir:

<meta-data android:name="com.google.android.maps.v2.API_KEY"
            android:value="INSERT_API_KEY" />

Además, es necesario añadir los siguientes permisos:

  • AccessCoarseLocation
  • AccessFineLocation
  • AccessLocationExtraCommands
  • AccessMockLocation
  • AccessNetworkState
  • AccessWifiState
  • Internet

Se pueden añadir desde Opciones > Build > Android Application.

Para trabajar con Windows, como ya vimos en el proceso de inicialización, se necesita generar un token de autorización para poder autenticar con Bing Maps.

Uso básico de mapas

A la hora de trabajar con mapas en Xamarin.Forms haremos uso del control Map. El control se puede inicializar y utilizar desde C#:

var map = new Map(
            MapSpan.FromCenterAndRadius(
                   new Position(37,-122), Distance.FromMiles(0.3))) {
                   IsShowingUser = true,
                   HeightRequest = 100,
                   WidthRequest = 960,
                   VerticalOptions = LayoutOptions.FillAndExpand
            };

Y desde XAML:

  <maps:Map 
       x:Name="MyMap"
       WidthRequest="320" 
       HeightRequest="200" />

Donde el namespace XAML es:

xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"

Las propiedades fundamentales del mapa son:

  • MapType: Permite establecer el tipo de mapa entre vista satélite, calle e híbrida.
  • Pins: Conjunto de pushpins del mapa.

Para añadir pushpins al mapa basta con rellenar la colección Pins con objetos de tipo Pin.

En cuanto a los métodos fundamentales tenemos:

  • MoveToRegion: Permite establecer y modificar la posición y nivel de zoom aplicado al mapa.
MyMap.MoveToRegion(
    MapSpan.FromCenterAndRadius(
      new Position(37,-122), Distance.FromMiles(1)));

Utilizando MVVM

Hasta este punto tenemos el mapa funcionando y contamos con todos los conceptos básicos necesarios para trabajar con mapas. Sin embargo, rellenar la colección de pushpins utilizando la propiedad Pins o posiciona el mapa utilizando el método MoveToRegion en el código asociado, no es lo que habitualmente realizamos.

¿Cómo utilizamos todo utilizando MVVM?

Pongámonos en situación. Habitualmente tendremos cierto contexto. Imagina que tenemos una aplicación de Taxis donde por supuesto, tendremos clientes. Cada cliente lo representaremos utilizando una entidad, dentro de la carpeta Models:

    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string Phone { get; set; }
        public string Address { get; set; }
        public string Description { get; set; }
        public double Longitude { get; set; }
        public double Latitude { get; set; }
        public DateTime? FullyAttendedTime { get; set; }
    }

La lógica necesaria para añadir pushpins al mapa es sencilla utilizando la propiedad Pins del mapa. También podemos gestionar la posición central del mapa y el nivel de zoom utilizando el método MoveToRegion:

private void AddPins()
{
     foreach (var customer in DataRepository.LoadCustomerData())
     {
                var pin = new Pin
                {
                    Type = PinType.Place,
                    Position = new Position(customer.Latitude, customer.Longitude),
                    Label = customer.Name,
                    Address = customer.Address
                };

                MyMap.Pins.Add(pin);
     }
}

private void PositionMap()
{
     MyMap.MoveToRegion(
          MapSpan.FromCenterAndRadius(
               new Position(GlobalSetting.UserLatitude, GlobalSetting.UserLongitude),
               Distance.FromMiles(1)));
}

Vamos a aprovechar toda la versatilidad y potencia que nos brindan los Behaviors en Xamarin.Forms.

El concepto de Behavior es algo muy sencillo. Un Behavior espera por “algo” para hacer “algo”. Concretamos más. Un Behavior espera por “algo”. Puede ser un evento que se lanza, el cambio de una propiedad o cualquier otra acción personalizada que deseamos monitorear. Una vez que ese “algo” se desencadena, el Behavior puede hacer acciones muy variadas, desde cambiar el valor de una propiedad, lanzar un evento, hacer verificaciones o validaciones, etc.

Los Behaviors nos permiten encapsular lógica que se puede adjuntar a un componente específico. Generalmente ayudan a personalizar o completar ciertos componentes e incluso en muchas ocasiones son un a ayuda fundamental para mantener una estructura idónea al implementar patrones como MVVM.

Comenzamos creando la clase MapBehavior que debe de heredar de BindableBehavior<Map>:

public class MapBehavior : BindableBehavior<Map>
{

}

Para permitir tener acceso a la colección de pushpins vamos a crear una BindableProperty de tipo IEnumerable<Customer>:

public static readonly BindableProperty ItemsSourceProperty =
     BindableProperty.CreateAttached("ItemsSource", typeof(IEnumerable<Customer>), typeof(MapBehavior), 
          default(IEnumerable<Customer>), BindingMode.Default, null, OnItemsSourceChanged);

public IEnumerable<Customer> ItemsSource
{
     get { return (IEnumerable<Customer>)GetValue(ItemsSourceProperty); }
     set { SetValue(ItemsSourceProperty, value); }
}

Al recibir la información, añadiremos los pushpins al mapa y centraremos la posición deseada:

private static void OnItemsSourceChanged(BindableObject view, object oldValue, object newValue)
{
     var mapBehavior = view as MapBehavior;

     if (mapBehavior != null)
     {
          mapBehavior.AddPins();
          mapBehavior.PositionMap();
     }
}

Sencillo, ¿cierto?. Pues ahora llega el momento de utilizar el Behavior. Añadimos en la página el namespace XAML necesario:

xmlns:behaviors="clr-namespace:MyTaxiCompany01.Behaviors;assembly=MyTaxiCompany01"

Utilizamos el Behavior:

<AbsoluteLayout>
    <maps:Map
      AbsoluteLayout.LayoutFlags="All"
      AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0">
      <maps:Map.Behaviors>
        <behaviors:MapBehavior 
             ItemsSource="{Binding Customers}" />
      </maps:Map.Behaviors>
    </maps:Map>
</AbsoluteLayout>

El resultado:

La aplicación de ejemplo
La aplicación de ejemplo

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

Ver GitHub

Hasta este punto hemos aprendido como utilizar mapas en Xamarin.Forms de forma básica. Sin embargo, en las aplicaciones que hacen un uso intensivo de mapas vemos características como:

  • Pushpins totalmente personalizados.
  • Pushpins dinámicos (se añaden, se quitan e incluso se desplazan).
  • Mostrar un  diálogo al pulsar un puhspin.
  • Traza de rutas.
  • Dibujo de figuras poligonales.

¿Cómo hacemos estas opciones en Xamarin.Forms?. En próximos artículos iremos profundizando en el uso de mapas viendo como realizar cada uno de los puntos anteriores.

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

Más información