Share via



Abril de 2019

Volumen 34, número 4

[Xamarin]

Novedades de Xamarin.Forms 4.0

Por Alessandro Del Del

Durante la conferencia Connect(); de noviembre de 2018, Microsoft dio a conocer la primera versión preliminar pública de Xamarin.Forms 4.0, la versión más reciente de la conocida tecnología de desarrollo que simplifica el proceso de crear interfaces de usuario compartidas entre distintos sistemas operativos, como Windows 10, iOS y Android. Después, han llegado las versiones preliminares actualizadas, que ofrecen a los desarrolladores una visión más detallada del progreso de esta versión principal. Las nuevas características más importantes que hacen que Xamarin.Forms 4.0 sea increíble se pueden resumir de la manera siguiente.

El shell es un contenedor para aplicaciones que proporciona la mayor parte de las características comunes que necesita la interfaz de usuario. Representa un único lugar para describir la estructura visual de una aplicación e incluye una interfaz de usuario común para la navegación de página; un servicio de navegación con vinculación en profundidad; y un controlador de búsqueda integrado. Por ahora, el shell solo estará disponible para iOS y Android.

CollectionView es un control completamente nuevo creado para trabajar con listas de datos de una forma más eficiente y eficaz. También es la base de la versión actualizada del control CarouselView.

Visual es el nombre de una nueva propiedad que algunas vistas pueden usar para representar controles a partir de un diseño determinado, lo que facilita la creación de UI coherentes entre plataformas.

Encontrará un análisis detallado de la característica de shell en el número especial de Connect(); (msdn.com/magazine/mt848639), por lo que no lo incluiré aquí. En su lugar, me centraré en CollectionView, CarouselView, Visual y otras mejoras variadas de la base de código existente. También echaremos un vistazo rápido a algunas características nuevas que se incluyen en Visual Studio 2019 Preview 2 para Xamarin.Forms. Tenga en cuenta que las partes que se describen en este artículo aún están en versión preliminar y pueden estar sujetas a cambios.

Creación y configuración de un proyecto

Para trabajar con la versión preliminar actual de Xamarin.Forms 4.0, antes debe crear un proyecto de aplicación móvil (Xamarin.Forms) en Visual Studio 2017, como lo haría normalmente. Seleccione las plataformas iOS y Android y la estrategia de uso compartido de código de .NET Standard. Cuando el nuevo proyecto esté listo, con el administrador de paquetes NuGet, asegúrese de actualizar la biblioteca Xamarin.Forms a la versión preliminar más reciente disponible (mientras redactaba este artículo, se denominaba 4.0.0.94569-pre3). Cuando se instale esta versión preliminar, NuGet también agregará el paquete Xamarin.iOS.MaterialComponents al proyecto de plataforma iOS, como explicaré más adelante al hablar de la propiedad Visual.

El último paso consiste en habilitar todas las características experimentales en la versión preliminar de Xamarin.Forms 4.0 dentro del archivo MainActivity.cs para Android y el archivo AppDelegate.cs para iOS. En ambos archivos, agregue la siguiente línea de código antes de la invocación del método Xamarin.Forms.Forms.Init:

global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental",
  "CollectionView_Experimental");

Si quiere experimentar con la característica de shell, debe agregar la marca Shell_Experimental. En caso contrario, es opcional para los temas siguientes.

Trabajo con datos: el control CollectionView

Xamarin.Forms 4.0 presenta un nuevo control denominado CollectionView, que puede usar para mostrar y editar listas de datos. Desde un punto de vista arquitectónico, CollectionView tiene algunas ventajas importantes. En primer lugar, a diferencia de ListView, las plantillas de datos ya no dependen de las vistas de celda, lo que simplifica el árbol visual. Como consecuencia, y como segunda ventaja, los objetos CollectionView se programan con el mismo enfoque familiar basado en XAML, pero con un código mucho más sencillo. Además, el control CollectionView hace que sea más sencillo administrar el diseño de las listas, ya que admite presentaciones horizontales y vistas de cuadrícula. Para empezar, creemos algunos de los datos de muestra que aparecerán en un control CollectionView. En el proyecto de .NET Standard, agregue la clase que se muestra en la figura 1, que representa la definición simplificada de un producto.

Figura 1 Implementación simplificada de una clase de producto

public class Product : INotifyPropertyChanged
{
  public event PropertyChangedEventHandler PropertyChanged;
  private void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    PropertyChanged?.Invoke(this,
      new PropertyChangedEventArgs(propertyName));
  }
  private int _productQuantity;
  private string _productName;
  private string _productImage;
  public int ProductQuantity
  {
    get
    {
      return _productQuantity;
    }
    set
    {
      _productQuantity = value;
      OnPropertyChanged();
    }
  }
  public string ProductName
  {
    get
    {
      return _productName;
    }
    set
    {
      _productName = value;
      OnPropertyChanged();
    }
  }
  public string ProductImage
  {
    get
    {
      return _productImage;
    }
    set
    {
      _productImage = value;
      OnPropertyChanged();
    }
  }
}

Observe cómo la clase de producto implementa la interfaz INotifyPropertyChanged para admitir la notificación de cambios si decide crear una instancia de producto editable. El siguiente paso es definir un modelo de vista que expone la información del producto, que estará enlazada mediante datos con la interfaz de usuario. Esto se muestra en la figura 2.

Figura 2 La clase ProductViewModel expone información de datos en la interfaz de usuario

public class ProductViewModel
{
  public ObservableCollection<Product> Products { get; set; }
  public ProductViewModel()
  {
    // Sample products
    this.Products = new ObservableCollection<Product>();
    this.Products.Add(new Product { ProductQuantity = 50, ProductName = "Cheese",
                                    ProductImage = "Cheese.png" });
    this.Products.Add(new Product { ProductQuantity = 10, ProductName = "Water",
                                    ProductImage = "Water.png" });
    this.Products.Add(new Product { ProductQuantity = 6, ProductName = "Bread",
                                    ProductImage = "Bread.png" });
    this.Products.Add(new Product { ProductQuantity = 40, ProductName = "Tomatoes",
                                    ProductImage = "Tomato.png" });
  }
}

En un escenario real, los datos podrían proceder de una base de datos o de un servicio web, pero, en este caso, creo algunos productos directamente en el código para fines de demostración. Los archivos de imagen que se usan en la figura 2 se pueden encontrar en el código complementario del artículo. A continuación, en el archivo MainPage.xaml del proyecto, puede declarar un control CollectionView para mostrar los datos. Los puntos clave asignan a la propiedad ItemsSource la colección que quiere mostrar y definen una plantilla de datos para cada elemento de la lista. En la Figura 3 se muestra un ejemplo.

Figura 3 Declarar un elemento CollectionView para mostrar datos

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF4_WhatsNew"
             x:Class="XF4_WhatsNew.MainPage">
  <StackLayout>
    <CollectionView x:Name="ProductList" ItemsSource="{Binding Products}">
      <CollectionView.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="24"/>
              <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding ProductImage}" HeightRequest="22" />
            <StackLayout Grid.Column="1" Orientation="Vertical" Spacing="5">
              <Label Text="{Binding ProductName}" FontSize="Medium"
                TextColor="Blue"/>
              <Label Text="{Binding ProductQuantity}" FontSize="Small"
                TextColor="Black"/>
            </StackLayout>
          </Grid>
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
  </StackLayout>
</ContentPage>

Declarar CollectionView y asignar su propiedad ItemTemplate con un objeto DataTemplate en XAML funciona igual que con el control ListView, con la diferencia importante de que ya no tiene que tratar con las vistas de celda. A continuación, cree una instancia de la clase ProductViewModel y asígnela a la propiedad BindingContext de la página para que pueda funcionar el enlace de datos, como en el código siguiente que se escribe en el archivo MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
  private ProductViewModel ViewModel { get; set; }
  public MainPage()
  {
    InitializeComponent();
    this.ViewModel = new ProductViewModel();
    this.BindingContext = this.ViewModel;
  }
}

Si ejecuta este código, verá un resultado similar en la figura 4.

Mostrar listas de datos con CollectionView
Figura 4 Mostrar listas de datos con CollectionView

Como verá, CollectionView proporciona otras propiedades interesantes para implementar diferentes diseños y controlar la selección de elementos.

Orientación y diseño. Si tiene experiencia con el control ListView en Xamarin.Forms, sabe que no hay ninguna opción integrada para establecer la orientación como horizontal. Sin duda, esto se logra mediante representadores personalizados, pero aumenta la complejidad del código. De forma similar, no hay ninguna opción integrada para cambiar el diseño de una vista de lista a una vista de cuadrícula. Sin embargo, el control CollectionView hace que establecer diferentes opciones de diseño sea extremadamente sencillo mediante la propiedad ItemsLayout, que se puede asignar con propiedades de la clase ListItemsLayout, como VerticalList y HorizontalList. De forma predeterminada, se asigna la propiedad ItemsLayout con ListItemsLayout.VerticalList, por lo que no necesita asignarla explícitamente para un diseño vertical. Pero, para implementar una orientación horizontal, agregue el siguiente fragmento de código al XAML:

<CollectionView ItemsSource="{Binding Products}"
  It­emsLayout="{x:Static ListItemsLayout.HorizontalList}">
  ...
</CollectionView>

En realidad, la propiedad ItemsLayout también permite definir una vista de cuadrícula. En este caso, use la clase GridItemsLayout, en lugar de ListItemsLayout, como se muestra en el ejemplo siguiente de creación de una vista de cuadrícula horizontal:

<CollectionView x:Name="ProductList" ItemsSource="{Binding Products}" >
  <CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Horizontal" Span="3" />
  </CollectionView.ItemsLayout>
    ...
</CollectionView>

De forma predeterminada, GridItemsLayout muestra elementos en una sola fila con el diseño horizontal, por lo que puede establecer la propiedad Span para decidir cuántas filas contendrá la cuadrícula. A medida que se agregan elementos a la lista enlazada con datos, la vista de cuadrícula crece horizontalmente. Puede obtener una vista de cuadrícula vertical con el código siguiente:

<CollectionView x:Name="ProductList" ItemsSource="{Binding Products}" >
  <CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Vertical" Span="2" />
  </CollectionView.ItemsLayout>
    ...
</CollectionView>

De forma similar, una cuadrícula vertical mostrará elementos en una sola columna de forma predeterminada, por lo que puede cambiar las propiedades Span y especificar el número de columnas de la cuadrícula.

Administración de selección de elementos. El control CollectionView permite seleccionar uno o varios elementos y deshabilitar la selección. Se pueden asignar a la propiedad SelectionMode valores de la enumeración Xamarin.Forms.SelectionMode: None, Single y Multiple. None permite deshabilitar la selección de elementos muy fácilmente. La propiedad SelectedItem, de tipo object, representa uno o más elementos seleccionados en la lista. A continuación, se genera el evento SelectionChanged cuando el usuario selecciona un elemento en CollectionView. Este evento solo funcionará si se ha asignado SelectionMode con el valor Single (que es el valor predeterminado si no se especifica SelectionMode) o Multiple. Por lo tanto, en el XAML, podría tener las siguientes asignaciones:

<CollectionView x:Name="ProductList" ItemsSource="{Binding Products}"
  SelectionMode="Single" SelectionChanged="ProductList_SelectionChanged">
...
</CollectionView>

A continuación, el controlador de eventos SelectionChanged le permite administrar la selección de elementos a través de un parámetro de tipo Xamarin.Forms.SelectionChangedEventArgs. Este objeto expone dos propiedades útiles: CurrentSelection y PreviousSelection. Tal como indican los nombres, la primera propiedad devuelve los objetos seleccionados actualmente, mientras que la segunda devuelve objetos que se habían seleccionado previamente. Esto es muy útil, ya que, en algunas situaciones, es posible que necesite saber qué instancias de objeto se han seleccionado antes de la nueva selección. Ambas propiedades son de tipo IReadOnlyList<object> y exponen la lista de elementos seleccionados. Si SelectionMode se define como Single, puede recuperar la instancia del elemento seleccionado como se indica a continuación:

private void ProductList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
  var selectedProduct = this.ProductList.SelectedItem as Product;
  var singleProduct = e.CurrentSelection.FirstOrDefault() as Product;
}

Tanto si usa la propiedad CollectionView.SelectedItem como el primer elemento de la colección, debe convertir el objeto resultante en el tipo esperado; en este caso, Product. Si SelectionMode se define como Multiple, primero debe convertir la colección de solo lectura de los elementos seleccionados en una lista de objetos del tipo esperado, como en el ejemplo siguiente:

private void ProductList_SelectionChanged(object sender,
  SelectionChangedEventArgs e)
{
  var selectedItems = e.CurrentSelection.Cast<Product>();
  foreach(var product in selectedItems)
  {
    // Handle your object properties here...
  }
}

El mismo enfoque podría funcionar para la propiedad SelectionChangedEventArgs.PreviousSelection tanto para una selección de artículos Single como Multiple. Como vista moderna, CollectionView también admite el patrón Modelo-Vista-Modelo de vista (MVVM) a la hora de controlar la selección de elementos, de modo que puede usar la propiedad SelectionChangedCommand, que se puede enlazar a una instancia de la clase Command en el modelo de vista, y el elemento SelectionChangedCommandParameter, que permite pasar un parámetro al comando. Por ejemplo, vamos a ampliar la clase ProductViewModel con el fin de agregar una propiedad SelectedProduct que estará enlazada mediante datos a la propiedad SelectedItem de CollectionView y con un nuevo comando para el control de selección. Por motivos de simplicidad, la propiedad de tipo Command no usará la implementación genérica ni el parámetro de comando. En la figura 5 se muestra el aspecto del modelo de vista.

Figura 5 Ampliación del modelo de vista con compatibilidad con MVVM

public class ProductViewModel: INotifyPropertyChanged
{
  public ObservableCollection<Product> Products { get; set; }
  private Product _selectedProduct;
  public Product SelectedProduct
  {
    get
    {
      return _selectedProduct;
    }
    set
    {
      _selectedProduct = value;
      OnPropertyChanged();
    }
  }
  private Command _productSelectedCommand;
  public Command ProductSelectedCommand
  {
    get
    {
      return _productSelectedCommand;
    }
      set
      {
        _productSelectedCommand = value;
        OnPropertyChanged();
      }
    }
  public ProductViewModel()
  {
    // Sample products
    this.Products = new ObservableCollection<Product>();
    this.Products.Add(new Product { ProductQuantity = 50,
      ProductName = "Cheese", ProductImage = "Cheese.png" });
    this.Products.Add(new Product { ProductQuantity = 10,
      ProductName = "Water", ProductImage = "Water.png" });
    this.Products.Add(new Product { ProductQuantity = 6,
      ProductName = "Bread", ProductImage = "Bread.png" });
    this.Products.Add(new Product { ProductQuantity = 40,
      ProductName = "Tomatoes", ProductImage = "Tomato.png" });
    this.ProductSelectedCommand =
      new Command(ExecuteProductSelectedCommand,
        CanExecuteProductSelectedCommand);
  }
  private bool CanExecuteProductSelectedCommand(object arg)
  {
    return this.SelectedProduct != null;
  }
  private void ExecuteProductSelectedCommand(object obj)
  {
    // Handle your object here....
    var currentProduct = this.SelectedProduct;
  }
  public event PropertyChangedEventHandler PropertyChanged;
  private void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    PropertyChanged?.Invoke(this,
      new PropertyChangedEventArgs(propertyName));
  }
}

A continuación, en el XAML, asigne las propiedades de selección como se indica a continuación:

<CollectionView x:Name="ProductList" ItemsSource="{Binding Products}"
                SelectedItem="{Binding SelectedProduct, Mode=TwoWay}"
                SelectionChangedCommand="{Binding ProductSelectionCommand}"
                SelectionMode="Single">
</CollectionView>

Con este enfoque, puede trabajar con los objetos seleccionados en el modelo de vista, que es el lugar donde se implementa la lógica de negocios y, al mismo tiempo, mantener el trabajo de los datos separado de las vistas.

Administración de listas vacías. Una de las características más importantes que ofrece CollectionView y, sin duda, una de mis favoritas, es la opción integrada para mostrar una vista diferente, si la lista enlazada mediante datos está vacía, sin costo alguno. Esto es posible mediante la propiedad EmptyView, que permite especificar la vista que se mostrará en caso de datos vacíos. Funciona de este modo:

<CollectionView>
...           
  <CollectionView.EmptyView>
     <Label Text="No data is available" TextColor="Red"
       FontSize="Medium"/>
  </CollectionView.EmptyView>
</CollectionView>

Este código produce el resultado que se muestra en la figura 6. Con este enfoque, no es necesario crear ninguna plantilla de datos para los estados vacíos ni implementar selectores de plantillas de datos.

Proporcionar una vista para estados vacíos
Figura 6 Proporcionar una vista para estados vacíos

Como alternativa, puede usar la propiedad EmptyViewTemplate para implementar una vista personalizada. Por ejemplo, en el código siguiente se muestra cómo mostrar una imagen y un mensaje de texto con listas vacías:

<CollectionView.EmptyViewTemplate>
  <DataTemplate>
    <StackLayout Orientation="Vertical" Spacing="20">
      <Image Source="EmptyList.png" Aspect="Fill"/>
      <Label Text="No data is available" TextColor="Red"/>
    </StackLayout>
  </DataTemplate>
</CollectionView.EmptyViewTemplate>

ScrollingCollectionView también expone el método ScrollTo, que puede usar para desplazarse mediante programación en la lista hasta un elemento especificado. El código siguiente se desplaza hasta el tercer elemento de la lista:

 

ProductList.ScrollTo(2);

Superficie de API más sencilla. El control CollectionView expone una superficie de API más sencilla que ListView. Por ejemplo, CollectionView no tiene propiedades para trabajar con separadores (como SeparatorVisibility y SeparatorColor), por lo que puede implementar sus propios separadores con vistas como BoxView en la plantilla de datos. CollectionView no implementa ninguna propiedad como ListView.RowHeight, ya que ahora se determina la altura de un elemento mediante el primer elemento de la lista. La propiedad HasUnevenRows de ListView tiene un homólogo en CollectionView llamado ItemSizingStrategy. Respecto a las técnicas de deslizar para actualizar, las propiedades como IsPullToRefreshEnabled, IsRefreshing y RefreshCommand, que expone ListView, no están disponibles en el control CollectionView. Sin embargo, Microsoft está trabajando en la implementación de propiedades que admiten vistas para los estados de actualización. El documento de especificación de Xamarin.Forms.CollectionView de GitHub (bit.ly/2N6iw8a) proporciona una explicación detallada acerca de las opciones de actualización y también acerca de otras implementaciones de API, incluidas las decisiones arquitectónicas.

Presentación de CarouselView

El control CarouselView no es nuevo en Xamarin.Forms 4.0. Sin embargo, se ha rediseñado totalmente según la estructura y el rendimiento de CollectionView.

Con CarouselView, puede mostrar un objeto en la lista a la vez, en formato de tarjeta. En la figura 7, tomada del blog oficial de Xamarin (bit.ly/2BwWMNV), se muestra cómo CarouselView proporciona una manera de pasar el dedo entre distintos elementos.

CarouselView muestra los elementos en forma de tarjetas, con el gesto de pasar el dedo habilitado
Figura 7 CarouselView muestra los elementos en forma de tarjetas, con el gesto de pasar el dedo habilitado

En relación con el código de ejemplo descrito anteriormente, puede utilizar CarouselView para mostrar la lista de productos como tarjetas, tal como se muestra en la figura 8.

Figura 8 Mostrar elementos como tarjetas con CarouselView

<CarouselView x:Name="ProductList" ItemsSource="{Binding Products}">
  <CarouselView.ItemsLayout>
    <GridItemsLayout Orientation="Horizontal"
                     SnapPointsAlignment="Center"
                     SnapPointsType="Mandatory"/>
  </CarouselView.ItemsLayout>
  <CarouselView.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="24"/>
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding ProductImage}" HeightRequest="22" />
        <StackLayout Grid.Column="1" Orientation="Vertical"
                     Spacing="5">
          <Label Text="{Binding ProductName}" FontSize="Medium"
                 TextColor="Blue"/>
          <Label Text="{Binding ProductQuantity}" FontSize="Small"
                 TextColor="Black"/>
        </StackLayout>
      </Grid>
    </DataTemplate>
  </CarouselView.ItemTemplate>
  <CarouselView.EmptyView>
    <Label Text="No data is available" TextColor="Red"
           FontSize="Medium"/>
  </CarouselView.EmptyView>
</CarouselView>

Vamos a centrarnos en los puntos clave del código.

Declaración de CarouselView. Declarar CarouselView en XAML es muy similar a declarar CollectionView. También necesita enlazar la propiedad ItemsSource con la colección de datos que quiere mostrar. Tenga en cuenta que también puede proporcionar vistas para estados vacíos, exactamente como lo hacía con CollectionView.

Orientación. CarouselView es compatible tanto con la orientación horizontal como con la vertical. Se asigna la propiedad ItemsLayout con una instancia de GridItemsLayout y se pasa Horizontal o Vertical a la propiedad Orientation.

Adición de puntos de acoplamiento. Con las propiedades SnapPointsAlignment y SnapPointsType en ItemsLayout, puede configurar el comportamiento de la tarjeta. Por ejemplo, en la figura 8, las propiedades SnapPointsType y SnapPointsAlignment garantizan que la tarjeta se muestre centrada. Sin las asignaciones, la tarjeta se detendría a medio camino entre el resto de tarjetas. Los valores permitidos para SnapPointsAlignment son Center, End y Start. Los valores permitidos para SnapPointsType son Mandatory, MandatorySingle y None.

Al igual que con CollectionView, tenga en cuenta que las partes finales podrían proporcionar una implementación de API distinta. Con la versión preliminar actual, también puede experimentar una excepción InvalidCastException cuando la aplicación representa la vista. Se trata de una compilación inestable, por lo que cabe esperar que se produzcan estos problemas.

Creación de interfaces de usuario coherentes con la propiedad Visual

Xamarin.Forms 4.0 presenta una nueva forma de que los desarrolladores creen interfaces de usuario prácticamente idénticas en iOS y Android casi sin esfuerzo. La clave es una nueva propiedad denominada Visual que la clase VisualElement expone. La propiedad Visual comprueba que se usen nuevos representadores adicionales para dibujar elementos visuales, en lugar del representador predeterminado. En su estado actual de versión preliminar, Xamarin.Forms 4.0 incluye un mecanismo de representación experimental basado en el diseño de materiales que, actualmente, está disponible para las siguientes vistas: Button, Entry, Frame y ProgressBar. Puede habilitar la nueva representación visual como se indica a continuación:

 

<Entry Visual="Material" />

En la figura 9, tomada de las notas de la versión de Microsoft para Xamarin.Forms 4.0 (bit.ly/2BB4MxA), se muestra un ejemplo de una interfaz de usuario coherente en Android y iOS creada con Visual.

Interfaz de usuario coherente con la propiedad Visual
Figura 9 Interfaz de usuario coherente con la propiedad Visual

También puede asignar la propiedad Visual en el nivel de ContentPage para asegurarse de que cualquiera de las vistas admitidas del código use el diseño especificado. Para poder usar Visual, el proyecto debe cumplir algunos requisitos:

  • En el proyecto de iOS, debe instalarse el paquete de NuGet Xamarin.iOS.MaterialComponents. Sin embargo, se instala automáticamente al actualizar el paquete Xamarin.Forms a 4.0.
  • Para Android, el proyecto debe basarse en API 29 y las bibliotecas complementarias deben usar la versión 28. Además, el tema de la aplicación debe heredar de uno de los temas del paquete de componentes materiales.

Es importante destacar que el desarrollo de Visual acaba de empezar, así que es razonable que los desarrolladores esperen muchas actualizaciones. En general, es una adición muy útil que le ahorrará mucho tiempo cuando necesite crear UI idénticas entre plataformas.

Mejoras varias

En Xamarin.Forms 4.0, ahora puede especificar un color para el indicador giratorio cuando la característica de deslizar para actualizar esté habilitada. Esto se logra asignando la propiedad RefreshControlColor como se indica a continuación:

<ListView RefreshControlColor="Green"/>

Además, en ListView, es posible ocultar las barras de desplazamiento sin necesidad de escribir representadores personalizados, simplemente, asignando las propiedades HorizontalScrollBarVisibility y VerticalScrollBarVisibility:

<ListView HorizontalScrollBarVisibility="Always"
  VerticalScrollBarVisibility="Never"/>

Los valores posibles son Always (siempre está visible), Never (nunca está visible) y Default (basado en el valor predeterminado de la plataforma).  Además, el control de edición ahora incluye compatibilidad con la predicción de texto, como se muestra en el control de entrada. Simplemente, puede asignar a la propiedad IsTextPredictionEnabled el valor "True" o "False", como se indica a continuación:

<Editor IsTextPredictionEnabled="True" />

Con Xamarin.Forms 4.0, la vista SwitchCell recibe la propiedad OnColor, como lo hacía la vista Switch en las anteriores versiones principales. Por lo tanto, ahora puede establecer un color diferente para el estado activo al utilizar SwitchCell en las plantillas de datos:

<SwitchCell OnColor="Red"/>

Estas son las mejoras más interesantes desde un punto de vista práctico, pero está disponible en la página de notas de la versión la lista completa de las actualizaciones y los problemas solucionados. Esta lista se actualizará cuando Xamarin.Forms 4.0 se publique para producción.

Un vistazo rápido a Xamarin.Forms en Visual Studio 2019

Recientemente, Microsoft publicó Visual Studio 2019 Preview 3 (bit.ly/2QcOK6z), que proporciona una vista previa de las novedades de la próxima versión principal de Visual Studio, incluida la compatibilidad con Xamarin.Forms 4.0. Por ejemplo, ahora, en el cuadro de diálogo New Cross Platform App (Nueva aplicación multiplataforma), se incluye una nueva plantilla de proyecto denominada Shell (consulte la figura 10). Esta plantilla genera un nuevo proyecto basado en la característica Shell con varias vistas a las que se hace referencia en el objeto Shell en el código XAML de la página principal.

Nueva plantilla de proyecto basada en Shell
Figura 10 Nueva plantilla de proyecto basada en Shell

Visual Studio 2019 también aporta a Xamarin.Forms un nuevo panel Propiedades, como se muestra en la figura 11, que ya estaba disponible para otras plataformas de desarrollo. Muestra los valores de propiedad en cuanto hace clic en el código XAML o el controlador de vista previa de Xamarin.Forms.

El nuevo panel Propiedades
Figura 11 El nuevo panel Propiedades

Si cambia los valores de propiedad a través del panel Propiedades, el código XAML se actualiza automáticamente para reflejar los cambios. Observe que determinado editores están disponibles para algunos tipos, como el editor de colores para las propiedades de tipo Xamarin.Forms.Color.

Resumen

Como sucede con las versiones principales anteriores, Xamarin.Forms 4.0 demuestra la enorme inversión que está haciendo Microsoft para mejorar la experiencia de desarrollo no solo con características nuevas, sino también haciendo que las herramientas existentes y la base de código sean más y más confiables, que es lo que los desarrolladores necesitan en sus proyectos reales. Será interesante ver qué otras noticias se presentan en la próxima conferencia Microsoft Build, que tendrá lugar en Seattle del 6 al 8 de mayo.


Alessandro Del Soleha sido MVP de Microsoft desde el año 2008 y es desarrollador certificado de Xamarin. Es el autor de numerosos libros, libros electrónicos, vídeos didácticos y artículos sobre desarrollo .NET con Visual Studio. Del Sole trabaja para Fresenius Medical Care como ingeniero de software y su trabajo se centra en la creación de aplicaciones móviles y de .NET con Xamarin en el mercado de sanidad. Puede seguirlo en Twitter: @progalex.

Gracias al siguiente experto técnico de Microsoft por revisar este artículo: Paul DiPietro