[Xamarin.Forms] IndicatorView

Introducción

Recientemente recibíamos en Xamarin.Forms un nuevo CarouselView. El CarouselView permite mostrar una colección donde se pueden desplazar los elementos haciendo deslizamientos (gestos de Swipe). A pesar de contar con diferentes opciones para gestionar el layout, orientación, espaciado, etc. una de las peticiones más habituales a la hora de trabajar con el nuevo Carousel es poder mostrar un indicador con el número de elementos y la posición.

Indicador de posición

Llega en Xamarin.Forms 4.4 un nuevo control, IndicatorView, que tiene como objetivo permitir mostrar el número de elementos y la posición del elemento actual.

IndicatorView

IndicatorView sale en forma de Preview y para poder usarlo en estos momentos es necesario usar la etiqueta IndicatorView_Preview.

Xamarin.Forms.Forms.SetFlags("IndicatorView_Experimental");

IndicatorView nos permite mostrar un indicador de posición de diferentes formas, bien usando una forma sencilla o incluso usando una plantilla personalizada. Normalmente, el indicador va asociado a un Carousel:

<CarouselView 
     x:Name="Carousel" 
     ItemsSource="{Binding Items}">
     <CarouselView.ItemTemplate>
          <DataTemplate>
               <Frame 
                    BackgroundColor="{Binding Color}">
                    <Grid 
                         HorizontalOptions="Center" 
                         VerticalOptions="Center">
                         <Label 
                              Text="{Binding Name}" 
                              FontSize="25" />
                    </Grid>
               </Frame>
          </DataTemplate>
     </CarouselView.ItemTemplate>
</CarouselView>

A continaución, vamos a ver todas las propiedades básicas que definen la apariencia de IndicatorView.

Formas básicas

La forma más sencilla de usar IndicatorView es la siguiente:

<IndicatorView 
     ItemsSourceBy="Carousel" 
     IndicatorsShape="Circle" 
     IndicatorColor="Gray" 
     SelectedIndicatorColor="White" 
     HorizontalOptions="Center" />

Vaya, hemos utilizado varias propiedades. Vamos a revisar el conjunto de propiedades usadas:

  • ItemsSourceBy: El control muestra el conjunto de elementos disponibles en una colección y el elemento seleccionado (o actual) correspondiente a otro control (normalmente, un CarouselView). Esta propiedad permite indicar el control que será fuente de datos.
  • IndicatorShape: Permite definir la apariencia visual de la forma del indicador. Por ahora se soportan dos opciones, Circle o Square.
  • IndicatorColor: Color que se aplicará al fondo de todas los elementos que componen el IndicatorView.
  • SelectedIndicatorColor: Color aplicado al elemento seleccionado o actual.

El resultado:

IndicatorView usando formas básicas

Usando plantillas

¿Y qué ocurre si no nos encaja el uso de una forma básica (circulo o cuadrado)?. IndicatorView también cuenta con la propiedad IndicatorTemplate  que permite usando cualquier contenido personalizado:

<IndicatorView 
     x:Name="IndicatorsForms" 
     ItemsSourceBy="Carousel" 
     IndicatorColor="Transparent" 
     SelectedIndicatorColor="Gray" 
     HorizontalOptions="Center" 
     Visual="Forms">
     <IndicatorView.IndicatorTemplate>
          <DataTemplate>
               <Image>
                    <Image.Source>
                         <FontImageSource 
                              Glyph="{StaticResource Indicator}" 
                              FontFamily="{StaticResource IonicsFontFamily}" 
                              Color="Pink" />
                    </Image.Source>
               </Image>
          </DataTemplate>
     </IndicatorView.IndicatorTemplate>
</IndicatorView>

El resultado:

Usando plantillas

IndicatorView es una opción interesante que llega como un complemente perfecto ante determinadas necesidades relacionadas con colecciones (principalmente CarouselView). ¿Qué te parece el control?. Recuerda que cualquier duda o pregunta es bienvenida en los comentarios!.

Más información

[Xamarin.Forms] Un primer vistazo a SwipeView

Opciones contextuales

Los dispositivos móviles han cambiado la forma en la que el usuario interactua con el contenido de la aplicación. Un ejemplo de ello, es el uso de opciones contextuales. Hablamos de las opciones contextuales a las que podemos acceder realizando un gesto de deslizamiento (swipe).

Opciones contextuales

En Xamarin.Forms 4.4 nos llega SwipeView, un nuevo control con el objetivo de cubrir la funcionalidad relacionada con opcones contextuales. Disponible para Android, iOS y UWP (pronto también en Tizen).

SwipeView

SwipeView permite tener una colección de elementos a los que acceder haciendo un gesto de deslizamiento (Swipe).

SwipeView

Izquierda, derecha, arriba o abajo

El uso habitual de estas opciones contextuales va asociada a un listado de elementos, pero el control SwipeView puede usarse en cualquier contexto. Podemos usar SwipeView junto con BindableLayouts, ListView, CollectionView, CarouselView o incluso sin ninguna colección.

Además, se permite hacer el swipe hacia cualquier dirección:

  • Arriba
  • Abajo
  • Izquierda
  • Derecha

Para definir la dircción del swipe, SwipeView permite definir diferentes colecciones de SwipeItems:

  • TopItems
  • BottomItems
  • LeftItems
  • RightItems

Veamos un ejemplo:

<SwipeView>
     <SwipeView.BottomItems>
          <SwipeItems
               Mode="Execute">
               <SwipeItem 
                    Text="Delete"
                    Icon="coffee.png"
                    BackgroundColor="Red"
                    Invoked="OnInvoked"/>
          </SwipeItems>
     </SwipeView.BottomItems>
     <SwipeView.Content>
          <Grid
               HeightRequest="60"
               WidthRequest="300"
               BackgroundColor="LightGray">
               <Label
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Text="Swipe Up (Execute)"/>
    </Grid>
    </SwipeView.Content>
</SwipeView>

Swipe en cualquier dirección

SwipeItem o SwipeItemView

La colección de SwipeItems contiene uno o N SwipeItem. Contamos con dos tipos:

SwipeItem

Es un elemento básicos que permite definir:

  • Text: El texto a mostrar debajo del icono.
  • Icon: Una propiedad de tipo ImageSource (se soportan imagenes desde recursos, URL, etc.).
  • BackgroundColor: Define el color de fondo.

SwipeItemView

Si quieres mostrar algo con más opciones de personalización, SwipeItemView permite definir una View, es decir, se puede crear el contenido de forma personalizada con una composición de elementos.

SwipeItemView es idóneo si se quiere una mayor personalización (contenido personalizado, bordes redondeados, etc.) como por ejemplo:

Usando SwipeItemView

Ambas opciones, cuentan tanto con comando (pensando en MVVM) como con eventos.

  • Command: Comando a ejecutar.
  • CommandParameter: Es el parámetro (opcional) que podemos utilizar con el comando.
  • Invoked: Además de lanzar el comando, se lanza este evento.

Diferentes modos

Se cuentan con dos modos a la hora de trabajar con SwipeItems:

  • Reveal: En el modo mostrar, se desliza para abrir un menú de uno o varios comandos y se debe pulsar explícitamente un comando para ejecutarlo.
  • Execute: En el modo ejecutar, si se suelta el elemento que se está deslizando antes de pasar un umbral, el menú se cierra y el comando no se ejecuta. Si el usuario desliza el dedo más allá del umbral y luego lo suelta, el comando se ejecuta inmediatamente.

SwipeBehaviorOnInvoked

Se puede tener control sobre lo que ocurre al pulsar un elemento gracias a la propiedad SwipeBehaviorOnInvoked. Las opciones disponibles son:

  • Auto.
  • Close: Cuando se invoque el elemento, el SwipeView siempre se cerrará y volverá al estado normal, independientemente del modo.
  • RemainOpen: Cuando se invoque el elemento, el SwipeView siempre seguirá abierto, independientemente del modo.

Ejemplo:

leftSwipeItems.SwipeBehaviorOnInvoked = SwipeBehaviorOnInvoked.Auto;

Veámoslo en funcionamiento:

SwipeBehaviorOnInvoked

Eventos

Contamos con diferentes eventos que nos permiten controlar el estado del SwipeView:

  • SwipeStarted: Se lanza justo al iniciar el deslizamiento. Ofrece la dirección del swipe como información.
  • SwipeChanging: Se lanza cada vez que el deslizamiento cambia. Además de indicar la dirección, permite obtener el offset.
  • SwipeEnded: Es similar a SwipeStarted pero este se lanza al terminar el deslizamiento.

Eventos

¿Controlar la transición?

Por defecto, se realiza una transición de revelación de cada SwipeItem. Es decir, se hace un deslizamiento del contenido mientras que el conjunto de SwipeItems permanece fijo.

¿Y si podemos elegir entre diferentes opciones?.

Podemos hacerlo gracias a un Platform Specific en Android e iOS.

leftSwipeView.On<Android>().SetSwipeTransitionMode(PlatformConfiguration.AndroidSpecific.SwipeTransitionMode.Drag);

Contamos con dos opciones:

  • Reveal
  • Drag

A continuación, puedes ver las diferencias:

Platform Specific para establecer la transición

Cerrar programáticamente el SwipeView

En ocasiones, puede ser necesario cerrar el SwipeVIew programáticamente. Esto se puede conseguir de forma sencilla utilizando el método Close:

swipeView.Close();

El resultado:

Cerrar

Un detalle importante!

SwipeView instancia y liberar recursos al abrirse o cerrarse. La ventaja de esto es que, si tenemos un listado de 1000 elementos haciendo uso de SwipeView sin tener ninguno abierto, tendremos la misma jerarquía beneficiando el rendimiento.

Llegamos al final de la introducción al SwipeView. Usaremos este control en algun GoodLooking UI sample pronto (con su correspondiente artículo!). Sin embargo, ¿qué te parece esta nueva opción?. Cualquier feedback es bienvenido en los comentarios del artículo.

Más información

[Xamarin.Forms] Soporte a Gifs

Introducción

Desde los inicios de Xamarin.Forms se contaba con soporte para diferentes formatos de imagen. Con la llegada de nuevas versiones llegaron nuevas opciones como FontImageSource.

Con Xamarin.Forms 4.4 llega el soporte al formato gif y animaciones.

Soporte al formato gif

El uso de gif en Xamarin.Forms no implica grandes cambios en API o nuevos conceptos a aprender. Al igual que usamos la propiedad Source de Image con diferentes formatos de imagen (png, jpg, etc.), podemos usar gifs:

var gifImage = new Image
{
     Source = "awesome.gif"
};

NOTA: La funcionalidad completa relacionada con gifs en Android esta incluido usando FastRenderers (usados hoy día por defecto). Sin usar Fast Renderers (UseLegacyRenderers), el gif se renderizará pero la animación no funcionará.

Soporte a gifs

La novedad incluida relacionada con gifs viene a permitir controlar la animación del mismo. Contamos con la propiedad IsAnimationPlaying de tipo bool para indicar si el gif lanzará o no su animación.

gifImage.IsAnimationPlaying = true;

Sencillo, ¿verdad?.

¿Qué te parece el soporte al formato gif?. Recuerda, cualquier tipo de feedback es bienvenido en los comentarios de la entrada.

Más información

[Material] Monkey Conf 2019

El evento

En España tenemos una gran comunidad Xamarin y con la idea de contar con un evento de desarrollo relacionado con Xamarin de gran tamaño, el año pasado nacía la Monkey Conf. Ante el buen recibimiento, no podía más que hacer lo posible para volver este año con más contenido, mayor tamaño y más sorpresas.

El pasado 30 de Noviembre, celebramos la Monkey Conf 2019. A continuación, una pequeña galería del evento:

Fue un día lleno de sesiones técnicas de calidad. Es increíble ver sesiones donde se dan consejos de distribución y venta de apps basadas en la experiencia real con consejos de arquitectura de código. Esto demuestra el nivel y madurez de la comunidad Xamarin. Desde el inicio hasta el final, donde no podía faltar “el preguntón” (gracias a MFractor y SyncFusion por facilitarnos licencias) el día fluyo de forma natural, sin problemas. Muchas gracias a sponsors, asistentes y ponentes por ello!.

El material

Vamos al material. Participé en el evento con una sesión repasando lo que ha llegado en Xamarin.Forms en este año, así como revisando que llegará próximamente.

Al final, tuvimos 11 sesiones técnicas, 3 mesas redondas, 1 sesión de preguntas y respuestas además de 1 taller. Un día repleto de viejos y nuevos amigos, de compartir conocimiento, de enseñar y aprender. Un día rodeado de gente que llegaba desde Cataluña, Canarias, Valencia, Andalucía…

Solo puedo decir una cosa: Gracias!. Quiero terminar recordando que anunciamos la Monkey Conf 2020, así que, ¿nos vemos allí?.

Nos vemos en la Monkey Conf 2020!

[Xamarin.Forms] Nuevo CarouselView!

Introducción

Con el lanzamiento de Xamarin.Forms 4.3 nos llegan una gran variedad de novedades: CarouselView, RefreshView, HTML en Label, etc. Es un buen momento para profundizar en el uso de CarouselView.

Nuevo Carousel!

El CarouselView permite mostrar una colección donde se pueden desplazar los elementos haciendo deslizamientos (gestos de Swipe).

CarouselView está disponible en Xamarin. forms 4.3. Sin embargo, actualmente esta en fase experimental y solo se puede usar agregando la siguiente línea de código a la clase AppDelegate en iOS, o bien a la clase MainActivity en Android, antes de llamar a Forms.Init:

Forms.SetFlags("CarouselView_Experimental");

NOTA: El CarouselView esta disponible para Android, iOS y UWP.

Una parte muy interesante del nuevo CarouselView es que su implementación esta basada en CollectionView (se reutiliza una cantidad considerable de código). Sin embargo, los controles tienen casos de uso bastante diferentes. CollectionView se suele usar para mostrar un listado de datos, mientras que CarouselView se suele usar para resaltar información en una lista de longitud más limitada.

Comencemos viendo las propiedades fundamentales del control. El CarouselView obtiene su fuente de información utilizando la propiedad ItemsSource.

<CarouselView ItemsSource="{Binding Items}" />

La apariencia de cada elemento se puede definir utilizando la propiedad ItemTemplate:

<CarouselView ItemsSource="{Binding Items}">
     <CarouselView.ItemTemplate>
          <DataTemplate>
               <StackLayout>
                    <Frame>
                    ...
                    </Frame>
               </StackLayout>
          </DataTemplate>
     </CarouselView.ItemTemplate>
</CarouselView>

La propiedad CurrentItem, de tipo object, tiene asociado el elemento actual visible. Esta propiedad tiene un modo de enlace predeterminado de TwoWay y tiene un valor null cuando no hay datos. Por otro lado, también tenemos la propiedad Position, de tipo int, que es el índice del elemento actual.

Orientación

Llegamos a otra de las propiedades claves del control, ItemsLayout. Esta propiedad de tipo LinearItemsLayout, especifica el panel que se va a utilizar. Cuenta con varias propiedades que nos permiten modificar el comportamiento del mismo:

  • Orientation: Propiedad de tipo ItemsLayoutOrientation. Soporta layouts de forma horizontal o vertical.
  • SnapPointsAlignment: Especifica cómo se alinean los puntos de anclaje con los elementos (Start, Center, End).
  • SnapPointsType: Especifica el comportamiento de los puntos de anclaje al desplazarse (no anclar el elemento, etc).
  • ItemSpacing: Es el espacio entre cada elemento.
<CarouselView ItemsSource="{Binding Items}">
     <CarouselView.ItemsLayout>
          <LinearItemsLayout Orientation="Horizontal" />
     </CarouselView.ItemsLayout>
</CarouselView>

Sencillo, ¿verdad?.

Controlando el número de elementos visibles

El Carousel por defecto, muestra un elemento ocupando el ancho del control. Sin embargo, podemos modificar este comportamiento de varias formas.

Por un lado, contamos con la propiedad NumberOfSideItems, un entero que representa el número de elementos que se van a mostrar junto al elemento actual (por ejemplo, si indicamos 1 se mostrará un elemento a izquierda y otro a derecha del elemento actual).

<CarouselView ItemsSource="{Binding Items}"
     NumberOfSideItems="1">
</CarouselView>

Por otro lado, tenemos la propiedad PeekAreaInsets, en un valor de tipo Thickness que especifica la cantidad de espacio que puede ver de los elementos adyacentes. Es una opción ideal si se quiere mostrar de forma parcial un elemento para indicar al usuario que hay más contenido de una forma sencilla.

<CarouselView ItemsSource="{Binding Monkeys}"
     PeekAreaInsets="0,0,200,0">
</CarouselView>

EmptyView

EmptyView permite añadir una View a mostrar en caso de que el número de elementos enlazado sea cero o nulo.

Se soporta desde una sencilla cadena de texto:

<CarouselView ItemsSource="{Binding EmptyItems}"
EmptyView="No items." />

A una View tan compleja como sea necesario:

<CarouselView ItemsSource="{Binding Items}">
     <CarouselView.EmptyView>
          <StackLayout>
               <Label Text="No items."
                    FontAttributes="Bold" />
          </StackLayout>
     </CarouselView.EmptyView>
</CarouselView>

Desplazamiento

Poder desplazarnos entre elementos es una de las características del Carousel. Por lo tanto, tener el control sobre el desplazamiento es algo importante.

Podemos controlar si se puede hacer desplazamiento (Swipe) mediante la propiedad IsSwipeEnabled. También podemos saber cuando se hace drag con la propiedad IsDragging.

CarouselView cuenta con dos sobrecargas del método ScrollTo, usando índices u objetos para hacer scroll a una posición concreta:

carouselView.ScrollTo(3);

Eventos

Para detectar cuando se realiza desplazamiento, podemos usar el evento Scrolled:

carouselView.Scrolled += OnCarouselViewScrolled;

void OnCarouselViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
     Debug.WriteLine("HorizontalDelta: " + e.HorizontalDelta);
     Debug.WriteLine("VerticalDelta: " + e.VerticalDelta);
     Debug.WriteLine("HorizontalOffset: " + e.HorizontalOffset);
     Debug.WriteLine("VerticalOffset: " + e.VerticalOffset);
     Debug.WriteLine("FirstVisibleItemIndex: " + e.FirstVisibleItemIndex);
     Debug.WriteLine("CenterItemIndex: " + e.CenterItemIndex);
     Debug.WriteLine("LastVisibleItemIndex: " + e.LastVisibleItemIndex);
}

Contamos con información relacionada con índices (elemento actual, anterior, etc.) y de offsets (distancia transladada).

Además de detectar el cambio de scroll (por ejemplo, para animar y hacer una transición entre elementos, algo que veremos en otro artículo), nos interesa saber cuando se cambia el elemento actual. Para ello, contamos con PositionChanged:

carouselView.PositionChanged += OnPositionChanged;

void OnPositionChanged(object sender, PositionChangedEventArgs e)
{
     int previousItemPosition = e.PreviousPosition;
     int currentItemPosition = e.CurrentPosition;
}

Por supuesto, contamos con más propiedades y eventos, pero en este artículo nos hemos centrado en los básicos o más usados.

Manos a la obra!

Tras repasar las propiedades y eventos principales del control, vamos a crear un pequeño ejemplo:

<CarouselView 
     CurrentItem="{Binding CurrentPost, Mode=TwoWay}"
     ItemsSource="{Binding Posts}"
     ItemTemplate="{StaticResource PostItemTemplate}">
     <CarouselView.PeekAreaInsets>
          <OnPlatform x:TypeArguments="Thickness">
               <On Platform="iOS" Value="0, 0, 200, 0" />
               <On Platform="Android" Value="0, 0, 600, 0" />
     </OnPlatform>
     </CarouselView.PeekAreaInsets>
     <CarouselView.ItemsLayout>
         <ListItemsLayout
              Orientation="Horizontal"
              SnapPointsType="Mandatory"
              SnapPointsAlignment="Start"
              ItemSpacing="12"/>
     </CarouselView.ItemsLayout>
</CarouselView>

Hemos realizado un ejemplo de una App de viajes. Mostraremos las últimas noticias destacadas usando el CarouselView combinando “cartas” con video, etc.

El resultado es el siguiente:

Ejemplo usando CarouselView

Vamos a repasar las claves del ejemplo. Para mostrar dos elementos completos y una parte del tercero, utilizamos la propiedad PeekAreaInsets. Otro propiedad con un uso interesante en el ejemplo es la propiedad CurrentItem. Al hacer scroll y cambiar el elemento actual, notificamos el cambio en la ViewModel que actualizará a su vez la URL del video a reproducir actualizando la reproducción de fondo.

Puedes encontrar el código en GitHub:

Ver GitHub

¿Qué te parece el CarouselView?. Recuerda, puedes dejar cualquier feedback en los comentarios de la entrada.

Más información

Xamarin.Forms y Source Link

Introducción

Estas desarrollando, todo parece tener lógica pero…no funciona como esperas. Te preguntas, ¿que ocurre?, ¿que estoy haciendo mal?. En ocasiones, el error esta entre la silla y el teclado (en uno mismo) pero en ciertos casos puede ser algo externo a tu código. En el caso de desarrollar aplicaciones Xamarin.Forms, puede deberse a un bug en Xamarin.Forms. Como todo software, no esta exento de posibles bugs.

Bien, pero, ¿qué hacer en este caso?. Sincronizar el código fuente de Xamarin.Forms y hacer que tu App use directamente los proyectos en lugar de las librerías de NuGet es una opción pero…es un proceso tedioso.

¿Qué es SourceLink?

Source Link es una tecnología que permite depurar el código de librerías .NET desde NuGets. Se ha incluido soporte a Source Link en Xamarin.Forms y esto quiere decir que…puedes depurar código de Xamarin.Forms desde tu propio código usando directamente el paquete NuGet!.

Ahora podrás “ver más allá” ayudándote a resolver dudas o en caso de encontrar una issue en Xamarin.Forms, puedes dar información mucho más detallada.

¿Cómo funciona SourceLink?

Es sencillo. Tan pronto como se lance una excepción o navegas a un método de Xamarin.Forms, verás un cartel como el siguiente:

Source Link

Lo que ocurrirá es que se descargará automáticamente el código fuente desde GitHub y comenzará a depurar. Depurar, navegar entre el código, puntos de ruptura, etc. todo lo habitual funcionará como de costumbre.

NOTA: La descarga de archivos va a una cache.

Ahora el paquete de Xamarin.Forms cuenta con la referencia al repositorio oficial en Github y de esta forma permite al IDE saber qué debe descargar, etc.

¿Cómo lo uso con Xamarin.Forms?

En Visual Studio para Windows, Source Link lleva funcionando un tiempo. En el caso de Visual Studio para macOS se ha incluido soporte en la versión 8.3 Preview (gran trabajo chicos!).

Mientras depuras una App Xamarin.Forms, si navegas a algo que forme parte de Xamarin.Forms se descargará el código automáticamente y podrás depurar “más allá”.

Es un pequeño añadido en Xamarin.Forms pero bastante potente. Puede ayudar considerablemente a la hora de conocer mejor el framework, depurar, contribuir, etc.

¿Qué te parece esta opción?. Recuerda, cualquier comentario o pregunta es bienvenido!.

Más información

Xamarin.Forms en la web con WebAssembly y UNO

Introducción

Xamarin.Forms en la web. No es la primera vez que hablamos de ello. Dependiendo de con quien hables es una idea que trae malos recuerdos y piensa en algo horrible o piensa que es genial aprovechar la expansión de Xamarin.Forms, llegar a la web y aprovechar para reutilizar herramientas, código, etc.

En cualquier caso, en este artículo, vamos a conocer como llevar Xamarin.Forms en la web, vamos a ello!.

WebAssembly

¿Qué es?

WebAssembly es una nueva definición de bajo nivel de Abstract Syntax Tree (AST) representada en un formato binario. Puedes pensar en ello como un lenguaje ensamblador que los navegadores web pueden ejecutar. Esto quiere decir que sería posible compilar código escrito en muchos idiomas modernos en binarios que los navegadores web ejecutan de forma nativa.

¿Por qué Web Assembly?

WebAssembly está tratando de resolver los problemas existentes que dificultan la optimización del rendimiento de aplicaciones grandes, proporcionando acceso a lenguajes que producen binarios y mejorando la seguridad de ejecutar el código resultante.

También proporciona una forma para que cualquier lenguaje tenga un back-end de compilación (como LLVM) para llegar a la Web. Esto abre un camino para C, C ++, lenguajes basados ​​en .NET a través de Mono, Java y otros lenguajes. Proporciona opciones para los desarrolladores para llegar a la Web, reutilizando una librería (por ejemplo C++) sin tener que portarla a Javascript.

WebAssembly y .NET

Microsoft ha estado trabajando en WebAssembly y .NET utilizando  Mono desde hace un tiempo, y el progreso ha sido constante desde inicios de 2018.

Debido a consideraciones técnicas como la integración de Emscripten y su implementación sobre Javascript, AOT aún no está disponible. Se está trabajando actualmente en la integración AOT, pero la ruta actual para ejecutar código .NET en un entorno WebAssembly es a través del intérprete Mono. Se consiguen resultados bastante positivos, aunque obviamente el rendimiento mejorará considerablemente al usar AOT.

Uno Platform WebAssembly Renderers for Xamarin.Forms

Tras repasar que es WebAssembly, vamos a conocer cómo llevamos una App Xamarin.Forms a la web (usando WebAssembly).

Uno Platform

Uno Platform es un framework que permite desarrollar Apps para iOS y Android (Xamarin Stack) y para WebAssembly (Mono-Wasm runtime).

Uno Platform WebAssembly Renderers for Xamarin.Forms

Xamarin.Forms lleva soportando UWP desde el inicio, y Uno proporciona el conjunto de APIs UWP para funcionar en WebAssembly, asi que es un paso (lógico) más el ofrecer Renderers para habilitar Apps Xamarin.Forms UWP en WebAssembly.

Esto permite que las aplicaciones Xamarin.Forms se ejecuten en la Web.

¿Cómo llevar una App Xamarin.Forms a la Web?

Teniendo una solución Xamarin.Forms con un proyecto UWP, abrimos una línea de comandos y navegamos a la carpeta del proyecto.

Comenzamos instalando las plantillas de Uno:

dotnet new -i Uno.ProjectTemplates.Dotnet::1.46.230-dev.2723

NOTA: Una vez instaladas las plantillas, no será necesario volver a instalarlas.

Para crear un proyecto Wasm (reusará partes del proyecto UWP), ejecutamos:

dotnet new wasmxfhead

Al refrescar Visual Studio, veremos un nuevo proyecto:

Proyecto Wasm

Si lanzamos ese proyecto:

Monkey Conf

Estamos ante una sencilla App Xamarin.Forms con el objetivo de crear la página web del evento Monkey Conf. Reutilizamos el mismo XAML y código usado para la App UWP, pero corriendo en el navegador.

Puedes encontrar el código en GitHub:

Ver GitHub

Más información

[Material] dotNetMálaga 2019: Crear interfaces de usuario atractivas con Xamarin.Forms

El evento

El pasado 28 de Septiembre tenía lugar la dotNetMálaga 2019. Un gran día repleto de sesiones técnicas de tecnologías .NET, desde Xamarin, IA, Docker, etc.

dotNetMálaga 2019

Quisiera agradecer a todos los ponentes y asistentes por hacer posible el evento. Y por supuesto, mi enhorabuena a toda la organización por hacer que todo fluyese de forma tan natural.

El material

He tenido en placer de poder participar en el evento con una sesión acerca de Xamarin.Forms y formas de crear interfaces de usuario atractivas.

Crear interfaces atractivas visualmente con Xamarin.Forms

A continuación, la presentación utilizada:

En esta sesión vimos:

  • El uso de diccionario de recursos y temas.
  • Animaciones.
  • Transiciones.
  • Uso de SkiaSharp.
  • Lottie.
  • Visual.
  • Gradientes.
  • Nuevos controles (CollectionView, RefreshView).

Puedes encontrar todos los ejemplos en GitHub:

Ver GitHub

Hasta el año próximo!

Más información

[Xamarin.Forms] Ahora podemos usar contenido Html en Labels

Introducción

Uno de los controles habituales en cualquier aplicación Xamarin.Forms es el control Label. Al fin y al cabo, necesitamos mostrar texto de diversas formas. Es por eso, que es uno de los controles que recibe mejoras de forma constante. Recientemente hemos recibido espaciado entre carácteres, padding y soporte a contenido HTML.

Html como contenido

Antes que nada, HTML es potente y permite una cantidad de contenido diverso. No, no vas a poder añadir un video de YouTube como contenido. Se soportan etiquetas básicas como negritas, cabeceras, etc.

¿Cómo utilizar HTML como contenido?

Se ha añadido la propiedad TextType al Label. Con esta propiedad podemos indicar si queremos renderizar el texto directamente, Text, o como HTML.

Label htmlLabel = new Label() { TextType = TextType.Html };

De modo que, para establecer el contenido seguimos utilizando la propiedad Text:

htmlLabel.Text = "<h1>Hello World!</h1><br/>SecondLine";

Desde XAML, para utilizar HTML como contenido tenemos dos opciones:

  • Codificar la cadena HTML.
  • Usar CDATA.

Codificar la cadena, aunque es una opción, requiere trabajo extra:

<Label TextType="Html">
    <Label.Text>
        &lt;h1&gt;Hello World!&lt;/h1&gt;&lt;br/&gt;SecondLine
    </Label.Text>
</Label>

Usando CDATA:

<Label TextType="Html">
     <Label.Text>
          <x:String>
          <![CDATA[
          <h1>Hello world!</h1><br/>SecondLine
          ]]>
          </x:String>
     </Label.Text>
</Label>

El resultado:

Label con contenido HTML

¿Qué te parece esta nueva opción?. Recuerda, puedes dejar cualquier feedback o comentario en la entrada!.

Más información

[Xamarin.Forms] Un vistazo a RefreshView

Introducción

A día de hoy, estamos a acostumbrados (y cada vez más) a utilizar gestos para realizar acciones concretas en las aplicaciones móviles. Actualizar el contenido, cambiar de sección, etc. El objetivo final es diverso pero sin duda alguna, una de las acciones con gestos más utilizadas es el Pull To Refresh.

Pull to Refresh

Pull To Refresh

En diseño para dispositivos móviles, este efecto es el gesto que se realiza para la actualización de contenidos. Es decir, el pull to refresh es el gesto que se hace deslizando (normalmente) la parte superior hacia abajo para actualizar los contenidos.

Usando RefreshView

RefreshView llega como un nuevo control en Xamarin.Forms que permite hacer pull to refresh sobre cualquier contenido scrollable (ScrollView, ListView, CollectionView, etc.). El uso es muy sencillo:

<RefreshView>
     <ScrollView>
     </ScrollView>
</RefreshView>

Ya tendríamos lo suficiente para poder hacer pull to refresh sobre el contenido del ScrollView. En este artículo, voy a utilizar una aplicación antigua del tiempo que he actualizado para usar RefreshView además de CollectionView.

El comportamiento y apariencia de RefreshView se establece con algunas propiedades básicas:

  • BackgroundColor: Color de fondo del control.
  • RefreshColor: Color del indicador de carga.
  • IsRefreshing: Propiedad de tipo bool que indica si se esta refrescando el contenido o no. Si se establece a True se desencadena un refresco.
  • Command: Por supuesto, tenemos un comando para ejecutar la lógica de refresco en el contexto (ViewModel). Además de la propiedad Command contamos con CommandParameter.

De modo que nuestro RefreshView quedaría:

<RefreshView
     BackgroundColor="{StaticResource WhiteColor}"
     RefreshColor="{StaticResource AccentColor}"
     IsRefreshing="{Binding IsBusy}"
     Command="{Binding ReloadCommand}">
     <ScrollView>
     ...
     </ScrollView>
</RefreshView>

El resultado:

 

Usando RefreshView

Puedes encontrar el código del ejemplo en GitHub:

Ver GitHub

One more thing

En UWP contamos con un Platform Specific que permite especificar la orientación del pull to refresh:

refreshView.On<Windows>().SetRefreshPullDirection(RefreshPullDirection.BottomToTop);

Permite:

  • Desde arriba.
  • Desde abajo.
  • Desde la izquierda.
  • Desde la derecha.

¿Qué te parece RefreshView?. Recuerda, cualquier comentario es bienvenido!.

Más información