Este documento presenta las novedades y mejoras recientes en Xamarin.Forms y las herramientas de Xamarin. Entre las novedades se incluyen mejoras en las herramientas como Hot Reload y Hot Restart para reducir los tiempos de iteración, la introducción de Shell para simplificar la navegación, y nuevos controles como CarouselView y CollectionView. También se discuten las mejoras planificadas como soporte para GIFs, gradientes y nuevos controles.

1. El presente y
futuro de
Xamarin.Forms

2. SPONSORS

3. Javier Suárez
¡Hola!. Trabajo en el equipo de Xamarin.Forms en
Microsoft. Me encanta participar en comunidades
técnicas y soy coordinador de los grupos
CartujaDotNet y SVQXDG en Sevilla.
Puedes poner en contacto conmigo:
•@jsuarezruiz
•javiersuarezruiz@hotmail.com
•https://javiersuarezruiz.wordpress.com

4. ¿Qué vamos a ver?
• Un repaso al año
• Comunidad
• Herramientas
• Xamarin.Forms
• ¿Qué llega próximamente?
• Herramientas
• Xamarin.Forms
• Preguntas y Respuestas

5. Un repaso al año
Novedades en Xamarin.Forms, herramientas y
estado de la comunidad

6. Comunidad
Incremento en la participación activa de la comunidad (eventos, directos o
PRs).

7. ¡GRACIAS!
A la increíble comunidad Xamarin

8. Mejoras en herramientas
• Nuevo XAML Intellisense.
• Nuevo editor C# y XAML en
VS4Mac.
• Gestión automática de SDKs de
Android.
• Mejoras en iOS Build Host
(aprovisionamiento automático,
etc).
• Soporte a Android App Bundle.
• Startup Tracing para Android.
• AndroidX migration tool.
• Xamarin Binding Tools para Swift.
•
•

9. Reducir tiempo e iteraciones
Hot Reload – Aplica cambios en el Código de la App en ejecución
manteniendo estado de UI y navegación.
• XAML
Hot Restart – Aplica cambios al Proyecto con un clic en el botón “Restart”,
relanzando la App a su punto de entrada sin requerir otra compilación
complete y despliegue.
• Aplica cambios en multiples archivos, etc.
• Añade NuGets al Proyecto.
• Añade o elimina recursos.

10. XAML Hot Reload
• Guardar el archivo XAML y ver
cambios reflejados al vuelo en
el emulador o dispostivo donde
se ha desplegado la App.
• Soporta todos los tipos de
contenido XAML válido,
incluidas páginas, Shell o
Application.
• Resistente ante typos.
• Mantiene el estado de la UI y de
la navegación.

11. Hot Restart
• XAML Hot Reload para Xamarin.Forms
permite iterar rápidamente en interfaces
de usuario XAML en tiempo de ejecución
sin tener que compilar e implementar. Sin
embargo, ¿qué pasa con otros tipos de
cambios? ¿Como agregar recursos o
ediciones de varios archivos?
• Para habilitar la iteración rápida para estos
escenarios, llega Hot Restart. Aplica los
cambios realizados a la aplicación,
incluidas las ediciones de código de
múltiples archivos, recursos y referencias.
En lugar de tener que realizar una
compilación completa e implementar
nuevamente, basta con pulsar el botón de
reinicio.

12. Novedades en Xamarin.Forms
Shell
• Flyout
• Bottom Tabs
• Top Tabs
• Navegación por URI
Visual
• Controles usando Material
para un look & feel
consistente entre plataformas
• Controles nativos

13. Shell
Android, iOS y llega a UWP (Preview)

14. Crear pestañas de forma sencilla
<TabBar>
<Tab Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</Tab>
<Tab Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</Tab>
</TabBar>

15. Flyout de forma sencilla
<FlyoutItem Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<FlyoutItem Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

16. Shell Navigation Service
Shell.Current
.GoToAsync($"detail?id={city.id}");

17. Shell Navigation Service
[QueryProperty("CityId", "id")]
public partial class CityDetailPage :
ContentPage
{
public CityDetailPage()
{
InitializeComponent();
}
public string CityId
{
set
{
// do something with the Id
}
}
}

18. Una forma sencilla de usar renderers que
tienen como objetivo conseguir el mismo
look and feel entre plataformas.
Disponible en:
• Xamarin.Forms 3.6 y nuevas versiones
• Android e iOS
Visual

19. Es un sistema de diseño de Google que indica
buenas practices para la UI de Desarrollo web
y móvil.
• Promueve la usablididad.
• Tema incluido en Android.
• Librería disponible con controles para iOS.
Material
Design

20. Usando Visual
1. Instala el NuGet Xamarin.Forms.Visual.Material en Android e iOS
2. Inicializa en MainActivity.cs y AppDelegate.cs
3. Visual="Material"
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/material-visual

21. CollectionView: Xamarin.Forms 4.3
EmptyView
Nuevos Layouts
• LinearItemsLayout: Horizontal, Vertical
• GridItemsLayout
• CustomLayout
Incremental Loading
• RemainingItemsThreshold
• RemainingItemsThresholdReachedCommand
• RemainingItemsThresholdReachedCommandParameter

22. CollectionView: Xamarin.Forms 4.3
Grouping
• Header
• Footer
Item Snapping
Item Spacing
A diferencia del ListView: No se necesita ViewCells en favor del
rendimiento

23. Modos de selección
Opciones disponible:
• None
• Single
• Multiple
La selección identifica un element en la colección. Puedes usar la
selección para realizar tareas como la navegación, etc.

24. Pull To Refresh
RefreshView – contenedor que permite hacer pull to refresh sobre
cualquier contenido scrollable.
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<ScrollView>
<FlexLayout Direction="Row"
Wrap="Wrap"
AlignItems="Center"
AlignContent="Center"
BindableLayout.ItemsSource="{Binding Items}"
BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}" />
</ScrollView>
</RefreshView>

25. RefreshView
Tener Pull to Refresh para cubrir casi cualquier
necesidad de forma sencilla.
<RefreshView
BackgroundColor="{StaticResource WhiteColor}"
RefreshColor="{StaticResource AccentColor}"
IsRefreshing="{Binding IsBusy}"
Command="{Binding ReloadCommand}">
<ScrollView>
</ScrollView>
</RefreshView>

26. CarouselView
Llega control de tipo Carousel cargado de
opciones. Posibilidad de personalizar margenes,
espaciados, elementos visibles, etc.
<CarouselView
ItemTemplate="{StaticResource DrinkTemplate}"
ItemsSource="{Binding Drinks}">
<CarouselView.ItemsLayout>
<ListItemsLayout
Orientation="Horizontal"
SnapPointsAlignment="Center"
SnapPointsType="MandatorySingle" />
</CarouselView.ItemsLayout>
</CarouselView>

27. CarouselView
LinearItemsLayout: Horizontal, Vertical
Elementos visibles
• NumberOfSideItems
• PeekAreaInsets
Item Spacing
Hereda opciones del CollectionView. Ej: Incremental Loading

28. Otras novedades del año
• Mapas (bindable ItemsSource,
custom pins, poder dibujar
figuras, ItemTemplateSelecor, más
eventos, etc.).
• Mejoras en Label (soporte a
HTML, espacio de texto, padding,
etc.).
• Mejoras en Switch (ThumbColor,
etc.).
• Checkbox.
• RelativeSource.
•
•
•
•
•

29. DEMO
Veamos CarouselView, CollectionView,
RefreshView y todo lo posible!

30. Mirando hacia el
futuro
Novedades en Xamarin.Forms y herramientas

31. Herramientas: Reducir tiempos e iteraciones
Hot Reload – Continuará mejorando con:
• Incremental reloading.
• Reloading simultáneo (multiples emuladores y/o dispositivos).
• Soporte a CSS.
Hot Restart – igualmente, continuará mejorando:
• Soporte a iOS en Visual Studio para macOS.
• Soporte a Android.

32. IndicatorView
Indicator de posición específica dentro de una colección de
elementos.
Estará disponible en Xamarin.Forms 4.4-pre3.
var indicatorView = new IndicatorView
{
HorizontalOptions = LayoutOptions.Center,
Margin = new Thickness(12, 6, 12, 24),
IndicatorColor = Color.Gray,
SelectedIndicatorColor = Color.Black,
IndicatorsShape = IndicatorShape.Square
};
indicatorView.SetItemsSourceBy(carouselView);

33. SwipeView
Opciones contextuales haciendo Swipe!.
<SwipeView>
<SwipeView.LeftItems>
<SwipeItems Mode="Reveal">
<SwipeItem Text="Favorite" Command="{Binding Favorite}">
<SwipeItem.Icon>
<FontIconSource Glyph="&#xE734;"/>
</SwipeItem.Icon>
</SwipeItem>
<SwipeItem Text="Share" Command="{Binding Share}">
<SwipeItem.Icon>
<FontIconSource Glyph="&#xE27D;"/>
</SwipeItem.Icon>
</SwipeItem>
</SwipeItems>
</SwipeView.LeftItems>
<SwipeView.RightItems>
<SwipeItems Mode="Execute">
<SwipeItem Text="Delete" Command="{Binding Delete}">
<SwipeItem.Icon>
<FontIconSource Glyph="&#xE74D;"/>
</SwipeItem.Icon>
</SwipeItem>
</SwipeItems>
</SwipeView.LeftItems>
<Frame>
<Label Text="Foo" />
</Frame>
</SwipeView>

34. Gradientes Everywhere!Tendremos propiedad Background que permitirá usar Brushes (SolidColorBrush, LinearGradientBrush,
RadialGradientBrush).
BackgroundColor pasará ser deprecado. Se podrá seguir usando pero aparecerá warning en el Proyecto.
<SolidColorBrush
x:Key="SolidColor"
Color="Red"/>
<LinearGradientBrush
x:Key="LinearGradient"
StartPoint="0, 0"
EndPoint="1, 0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.2" />
<GradientStop Color="Orange" Offset="0.4" />
<GradientStop Color="Red" Offset="0.8" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush
x:Key="RadialGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.2" />
<GradientStop Color="Orange" Offset="0.4" />
<GradientStop Color="Red" Offset="0.8" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>

35. Soporte a Gifs
Todo control que soporta imagenes pasara a soportar gif como un nuevo
formato.
En realidad, apenas hay cambios en API o “cosas nuevas a aprender” salvo la
inclusion de la propiedad IsAnimationPlaying.
Estará disponible en Xamarin.Forms 4.4-pre3.
<Image Source="world.gif" />

36. Shell
Continuará mejorando cubriendo:
• Facilitar la navegación entre diferentes escenarios (LayoutScenario).
• Templates.
• TitleView.
• Etc.
<LayoutScenario Route="Anonymous">
<!-- When the user is on this Login Page they won't see a flyout menu-->
<TabBar Route="LoginPage">
<local:LoginPage/>
</TabBar>
</LayoutScenario>
<LayoutScenario Route="Employee">
<!-- When the user is here they won't be able to get back to the Login Page-->
<FlyoutItem Route="LoggedIn">
<UserPages/>
</FlyoutItem>
<FlyoutItem>
<UserPages/>
</FlyoutItem>
</LayoutScenario>

37. Visual
Tener una forma sencilla de tener consistencia en la UI entre
plataformas es importante. Continuarán las mejoras en Visual.
La opción más destacada, la llegada de Fabric.

38. Roadmap (Xamarin.Forms 4.4 – 4.5)
• Nueva librería oficial con
controles como MediaPlayer o
CameraView.
• RadioButton.
• FloatingActionButton.
• NavBar Transparente.
• Storyboards y mejoras en
animaciones.
• Transiciones.
• Mejoras en el ciclo de vida.
• Fixes!

39. Roadmap (Xamarin.Forms 4.4 – 4.5)

40. Preguntas &
Respuestas

41. Gracias!
Gracias a nuestros Sponsors.
Sin ellos el evento no sería posible.