[Xamarin.Forms] EmptyView llega a BindableLayouts

Introducción

En Xamarin.Forms tenemos un tipo especial de View llamada Layout. Un Layout es un contenedor para otros elementos permitiendo ayudar a posicionar y gestionar el tamaño de los elementos que contiene. En Xamarin.Forms contamos con una gran variedad de Layouts:

Layouts

Los más utilizados son el StackLayout y el Grid, y suele ser habitual hacer una composición de varios así como utilizarlos para crear controles, etc. Por ejemplo, en ocasiones se utiliza la combinación de ScrollView y StackLayout junto con ContentViews para crear un pequeño listado de elementos horizontal.

Bindable Layouts

Con la llegada de Xamarin.Forms 3.5 nos llegó Bindable Layout. En toda clase derivada de Layout<T>, contamos con las siguientes propiedades:

ItemsSource: De tipo IEnumerable, soporta el enlace de una colección de datos.
ItemTemplate: De tipo DataTemplate, permitirá definir la apariencia visual de cada elemento.
ItemTemplateSelector: De tipo ItemTemplateSelector, permite poder elegir entre diferentes templates para cada elemento en base a ciertas condiciones.

Las propiedades resultan familiares conociendo otros controles en Xamarin.Forms como el ListView o CollectionView.

Utilizando Bindable Layout

Vamos a hacer uso de Bindable Layout con un FlexLayout para crear una galería de imágenes y así evitar definir N imágenes dentro del Layout.

<FlexLayout
     BindableLayout.ItemsSource="{Binding Profile.Gallery}"
     BindableLayout.ItemTemplateSelector="{StaticResource GalleryItemTemplateSelector}"
     Style="{StaticResource GalleryStyle}" />

Al contar con la necesidad de tener imágenes de diferente tamaño en la galería, vamos a utilizar la propiedad ItemTemplateSelector para utilizar diferentes plantillas:

<styles:GalleryItemTemplateSelector x:Key="GalleryItemTemplateSelector">
     <styles:GalleryItemTemplateSelector.MediumGalleryItemTemplate>
          <DataTemplate>
               <Image 
                    Source="{Binding Picture}"
                    Aspect="AspectFill"
                    StyleClass="photo, medium"/>
          </DataTemplate>
     </styles:GalleryItemTemplateSelector.MediumGalleryItemTemplate>
     <styles:GalleryItemTemplateSelector.BigGalleryItemTemplate>
          <DataTemplate>
               <Image 
                    Source="{Binding Picture}"
                    Aspect="AspectFill"
                    StyleClass="photo, big"/>
          </DataTemplate>
     </styles:GalleryItemTemplateSelector.BigGalleryItemTemplate>
     <styles:GalleryItemTemplateSelector.GalleryItemTemplate>
          <DataTemplate>
               <Image 
                    Source="{Binding Picture}" 
                    Aspect="AspectFill"
                    StyleClass="photo"/>
          </DataTemplate>
     </styles:GalleryItemTemplateSelector.GalleryItemTemplate>
</styles:GalleryItemTemplateSelector>

Veamos el resultado completo:

El resultado

EmptyView

Lo visto hasta aquí de BindableLayout resuelve una gran variedad de situaciones de forma sencilla pero…¿qué ocurre si no hay datos?. Aquí entran en juego los Converters, enlace a propiedades de tipo bool para ocultar y mostrar elementos visuales, etc.

Esto era necesario… hasta ahora. Con Xamarin.Forms 4.6-pre4 nos llega el soporte a EmptyView en BindableLayouts. BindableLayouts (al igual que previamente lo hicieron CollectionView o CarouselView) define las siguientes propiedades que se pueden usar para proporcionar contenido visual cuando no hay datos para mostrar:

EmptyView, de tipo object, cadena, enlace o vista que se mostrarán cuando la propiedad ItemsSource sea nula o esta vacía.
EmptyViewTemplate, de tipo DataTemplate, plantilla que se va a utilizar para dar formato al EmptyView.

Siguiendo nuestro ejemplo anterior, vamos a definir EmptyView:

<BindableLayout.EmptyView>
     <Grid>
          <Label
               Text="No images"
               HorizontalOptions="Center"/>
     </Grid>
</BindableLayout.EmptyView>

De modo que, cuando no fotos en la galería: