[Xamarin.Forms] Novedades de la versión 3.2 pre1 (Preview)

Introducción

Recientemente se ha liberado la primera Preview de la versión 3.2 de Xamarin.Forms. Una nueva versión repleta de novedades que vamos a revisar en este artículo.

Las mejoras principales

A continuación, vamos a revisar las novedades principales (no son todas).

Control de la posición del caret

Comenzamos revisando una novedad sencilla pero muy interesante, controlar la posición del Caret. Ahora contamos con una nueva propiedad de tipo entero llamada CursorPosition.

<Entry 
     CursorPosition="4"
     Text="CursorPosition"/>

También tenemos un Platform Specific en el caso de iOS para poder controlar el color del cursor Entry<iOS>.CursorColor.

Commandable Span regions

Ya contábamos con la propiedad FormattedText para poder crear texto con formato utilizando Spans. Ahora nos llega la posibilidad de añadir Gesture Recognizers a cada elemento.

<Label>
     <Label.FormattedText>
          <FormattedString>
               <Span Text="{Binding Span1}" />
               <Span 
                    Text="{Binding Span2}" 
                    TextColor="Blue">
                    <Span.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding TapCommand}" />
                    </Span.GestureRecognizers>
               </Span>
               <Span Text="{Binding Span3}"/>
          </FormattedString>
     </Label.FormattedText>
</Label>

El resultado:

Commandable Spans

Abre muchas posibilidades a crear enlaces, abrir otras Apps (enviar correo, etc.).

Bordes redondeados en BoxView

Vamos con otra novedad bastante requerida, bordes redondeandos en el control BoxView.

<BoxView 
     CornerRadius="24, 0, 24, 24"
     BackgroundColor="Red"
     Color="Red"
     HeightRequest="100"
     Margin="12, 0"/>

Contamos con la propiedad CornerRadius que permite establecer el valor del borde de cada esquina.

Bordes redondeados en BoxView

Paddings en botones

Añadida opción para controlar el Padding en botones:

<Button 
     Text="With Padding"
     Padding="6, 12, 48, 0"/>

La nueva propiedad Padding es de tipo Thickness.

Page TitleView

Estoy seguro que la siguiente novedad va a ahorrar más de un Custom Renderer. Estamos ante una propiedad adjunta llamada TitleView, como TitleIcon de la NavigationPage.

<NavigationPage.TitleView>
     <StackLayout>
          <Label 
               Text="TitleView"
               TextColor="White"
               FontSize="28"/>
          <Label 
               Text="I can be a subtitle"
               TextColor="White"/>
          <SearchBar 
               Placeholder="This is a SearchBar"
               PlaceholderColor="Black"
               BackgroundColor="White"
               HorizontalOptions="FillAndExpand"/>
     </StackLayout>
</NavigationPage.TitleView>

Podemos establecer el valor de TitleView en cada Page para personalinar el valor.

El resultado:

TitleView

Es posible establecer también el valor desde C#:

NavigationPage.SetTitleView(this, MyTitleView());

Nuevas propiedades Placeholder y PlaceholderColor en el Editor

Añadidas propiedades Placeholder y PlaceholderTextColor:

<Editor 
     Placeholder="This is the Placeholder"
     PlaceholderColor="Orange"/>

El resultado:

Placeholder en Editor

OnPlatform/OnIdiom markup extensions

Llega nueva extensión de marcado para simplificar la gestión de valores utilizados con OnPlatform u OnIdiom desde XAML.

¿El cambio?

Podemos pasar de:

<Label Text="This is nice!">
     <Label.FontSize>
          <OnPlatform x:TypeArguments="x:Double">
               <On Platform="iOS" Value="20" />
               <On Platform="Android" Value="24" />
               <On Platform="UWP" Value="28" />
          </OnPlatform>
     </Label.FontSize>
</Label>

A:

<Label 
     Text="This is nice!"
     FontSize="{OnPlatform Android=24, iOS=20, UWP=28}" />

SwipeGestureRecognizer

Dentro del conjunto de gestos disponibles en Xamarin.Forms, había uno que se echaba de menos, Swipe.

var swipe = new SwipeGestureRecognizer
{
     Direction = SwipeDirection.Left
};

swipe.Swiped += (sender, args) => 
{

};

Podemos detectar el gesto Swipe a izquierda, derecha, arriba y abajo.

Swipe!

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Principales novedades de la versión 3.1

Introducción

Contamos con nueva versión de Xamarin.Forms, la 3.1. Una versión que tiene una variedad de novedades centradas en reducir la cantidad de controles personalizados y código específico en nuestras aplicaciones. En este artículo, vamos a hacer un rápido repaso sobre las novedades principales.

Novedades

Entre el conjunto de novedades principales encontramos:

Pestañas en la parte inferior

Google añadió BottomNavigationView en Android Support Library 25, y gracias a ello, ha sido posible añadirlo en Xamarin.Forms de forma sencilla utilizando Platform Specific.

<TabbedPage
     xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
     BarBackgroundColor="LightBlue"
     android:TabbedPage.ToolbarPlacement="Bottom"
     android:TabbedPage.BarItemColor="Gray"
     android:TabbedPage.BarSelectedItemColor="Black"
     Title="Bottom Tabs">
     <TabbedPage.Children>
          <ContentPage 
               Title="First"
               Icon="first">
               <Grid />
          </ContentPage>
          <ContentPage
               Title="Second"
               Icon="second">
               <Grid />
          </ContentPage>
          <ContentPage
               Title="Third"
               Icon="third">
               <Grid />
          </ContentPage>
     </TabbedPage.Children>
</TabbedPage>

Se puede establecer la posición de las pestañas con la propiedad ToolbarPlacement. También se cuentan con propiedades destinadas a personalizar el estilo de las pestañas:

  • BarItemColor: Color del icono y texto de cada pestaña.
  • BarSelectedItemColor: Color del icono y texto de la pestaña seleccionada.
Pestañas en la parte inferior

Auto-Resize Editor

Otra pequeña novedad bastante requerida. Según se va escribiendo en un control de tipo Editor, el control va creciendo automáticamente. Lo podemos conseguir gracias a la propiedad AutoSize que permite los siguientes valores:

  • Disabled: Valor por defecto. El control no crecerá.
  • TextChanges: El control crece automáticamente para permitir mostrar el contenido.
<Editor
     Text="AutoResize"
     AutoSize="TextChanges"/>

El resultado:

Autoresize Editor

Return key para Entry

Con la nueva propiedad ReturnType del Entry podemos modificar la apariencia del botón para completar la acción en el teclado virtual.

<Entry 
     ReturnType="Send"/>

Los valores posibles para ReturnType son:

  • Default
  • Done
  • Go
  • Next
  • Search
  • Send

El resultado:

Return Key

AutoCapitalization keyboard para el Entry

A veces en ciertos formularios no deseamos que el teclado automáticamente establezca la primera letra en mayúsculas. Por ejemplo, al introducir un correo electrónico. Ahora podemos controlar el comportamiento del teclado con KeyboardFlags:

<Entry 
     Placeholder="Insert text">
     <Entry.Keyboard>
          <Keyboard x:FactoryMethod="Create">
               <x:Arguments>
                    <KeyboardFlags>CapitalizeNone</KeyboardFlags>
               </x:Arguments>
          </Keyboard>
     </Entry.Keyboard>
</Entry>

Puedes consultar los valores posibles de KeyboardFlags en el siguiente enlace.

Auto Capitalization

Opciones de scrollbar Vertical y Horizontal

Se han añadido propiedades para controlar la visibilidad de las barras de scroll del ScrollView, tanto horizontal como vertical.

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

Bindable Span

Otra novedad bastante interesante. Ahora podemos usar enlace a datos en Spans además de poder personalizar el color de cada Span:

<Label>
     <Label.FormattedText>
          <FormattedString>
               <FormattedString.Spans>
                    <Span Text="Test" />
                   <Span Text="{Binding Info}"
                         TextColor="Red" />
               </FormattedString.Spans>
          </FormattedString>
     </Label.FormattedText>
</Label>

Invocar JavaScript desde WebView

Ahora podemos invocar de forma sencilla código JavaScript desde el control WebView, utilizando una cadena con la posibilidad de obtener el valor de retorno.

string result = await EvaluateJsWebView.EvaluateJavaScriptAsync(
"var test = function(){ return 'This string came from Javascript'; }; test();");

Lo conseguimos con el nuevo método EvaluateJavaScriptAsync que evalua el código pasado como parámetro y retorno un valor siempre en formato de cadena.

Otros

Hay muchos más pequeños cambios como:

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Addins y extensiones para Visual Studio macOS y Windows

Introducción

Visual Studio para macOS y Windows cuentan con modelos de extensión diferentes, modelos para crear interfaces de usuario diferentes y habitualmente trasladar un addin de macOS a una extension en Windows o viceversa, es costoso. ¿Podemos simplificar el proceso?, ¿podemos lograr compartir más elementos?.

En este artículo, vamos a ver como crear addins para Visual Studio macOS así como extensiones para Visual Studio Windows utilizando Xamarin.Forms para lograr compartir la UI.

Utilizaremos Measurer4000, herramienta diseñada para obtener métricas de código compartido en proyectos Xamarin. Nuestro objetivo será añadir la herramienta dentro de Visual Studio.

Add-ins para Visual Studio macOS

La arquitectura de Visual Studio para macOS es extensible. La forma de extender se basa en rutas de extensión que permiten que terceros extiendan el comportamiento. Por ejemplo: para extender la zona de edición de código, se expone /MonoDevelop/SourceEditor2/ContextMenu/Editor permitiendo añadir nuevos comandos en el menu contextual al hacer clic derecho.

AddIn Maker es un proyecto Open Source creado por Mikayla Hutchinson que permite el desarrollo y la depuración de add-ins para Visual Studio macOS desde Visual Studio macOS.

Para la gestión de la interfaz de usuario se utiliza GTK# o XWT.

Extensiones para Visual Studio Windows

En Windows tenemos la posibilidad de extender practicamente cualquier parte: menús, barras de herramientas, ventanas, etc.

Para crear extensiones se deben instalar las opciones de Desarrollo de extensiones de Visual Studio.

Extensiones en Windows

Para crear extensiones contamos con una plantilla de proyecto VSIX vacía que puede usar junto con las nuevas plantillas de elemento que crean extensiones de editor, ventanas de herramientas y comandos de menú.

Para la definición de la UI, utilizamos WPF.

Xamarin.Forms

Con la llegada de Xamarin.Forms 3.0 encontramos soporte a Linux gracias a un nuevo backend basado en GTK# además de un backend WPF.

Por lo que si usamos GTK# y WPF, ¿podríamos usar XAML y Xamarin.Forms para definir la UI de add-ins para Visual Studio tanto para macOS como para Windows?, ¿podría ser compartida?.

El proyecto en macOS

Comenzamos creando un proyecto de tipo IDE Extension:

IDE Extension

Este proyecto ya cuenta con la referencia a MonoDevelop.Addins. Continuamos añadiendo el paquete NuGet de Xamarin.Forms y Xamarin.Forms.Platform.GTK.

Para trabajar con Xamarin.Forms, debemos realizar la inicialización. La mejor opción para realizar esta tarea es realizarla nada más se abra el IDE. Para ello, vamos a crear un comando:

public class InitXamarinFormsCommand : CommandHandler
{
     protected override void Run()
     {
          Forms.Init();
     }
}

Y modificaremos el archivo Manifiest.addin.xml para añadir nuestro comando como punto de extensión en el arranque del IDE.

<Extension path="/MonoDevelop/Ide/StartupHandlers">
     <Class class="Measurer4000.Addin.Mac.Commands.InitXamarinFormsCommand"/>
</Extension>

Llega la hora de extender.

Añadimos otro punto de extensión:

<Extension path = "/MonoDevelop/Ide/MainMenu/Tools">
     <CommandItem id="Measurer4000.Addin.Mac.Commands.MeasurerCommand"/>
</Extension>

Fíjate que en esta ocasión, añadiremos un nuevo comando en el menu principal, opción herramientas.

Veamos la definición del comando:

public class MeasurerCommand : CommandHandler
{
     protected override void Update(CommandInfo info)
     {
          info.Visible = true;

          var projects = IdeApp.Workspace.GetAllProjects();

          if (projects.Any())
               info.Enabled = true;
          else
               info.Enabled = false;
     }

     protected override void Run()
     {
          new MeasurerWindow().Show();
     }
}

Comenzamos utilizando IdeApp. La clase estática MonoDevelop.Ide.IdeApp es su punto de entrada de extension de Visual Studio. Expone Workbench, Workspace, múltiples servicios  así como métodos relacionados con el ciclo de vida del IDE.

Habitualmente, la clase IdeApp se utiliza para acceder a Workbench o a Workspace. IdeApp.Wortkspace se usa para acceder al estado general del Ide durante una sesión de usuario. Podemos abrir nuevos proyectos y documentos, detectar archivos abiertos y mucho más.

En nuestro caso, lo utilizamos para detectar si el usuario tiene abierto al menos un proyecto.

En caso de abrir un proyecto, habilitamos la opción.

Al ejecutar el comando lanzamos una ventana llamada MeasurerWindow.

public class MeasurerWindow: Gtk.Window
{
     public MeasurerWindow()
     : base(Gtk.WindowType.Toplevel)
     {
          Title = "Measurer4000";
          WindowPosition = Gtk.WindowPosition.Center;

          var page = new MeasurerView();

          Add(page.CreateContainer());

          SetSizeRequest(800, 480);
     }
}

Es una ventana realizada con Gtk cuyo contenido utilizará una ContentPage de Xamarin.Forms. La clave para utilizar Xamarin.Forms es embeber el contenido. Tenemos disponible el método de extensión CreateContainer de Xamarin.Forms en el backend GTK para obtener la ContentPage como contenido nativo.

El proyecto en Windows

Comenzamos el proyecto en Windows añadiendo un comando.

Nuevo comando

Los menús y las barras de herramientas son la forma en que los usuarios acceden a los comandos en el VSPackage. Los comandos son funciones que realizan tareas, como mostrar una ventana o crear un nuevo archivo. Los menús y barras de herramientas son formas gráficas convenientes para presentar los comandos a los usuarios.

En este comando realizamos la inicializacion de Xamarin.Forms:

public static void Initialize(Package package)
{
     Instance = new MeasurerCommand(package);

     Forms.Init();
}

Al ejecutar el comando:

private void MenuItemCallback(object sender, EventArgs e)
{
     var measurerWindow = new MeasurerWindow();

     var measurerContent = new MeasurerView().ToFrameworkElement();
     measurerWindow.Content = measurerContent;

     measurerWindow.Show();
}

Lanzamos una ventana llamada MeasurerWindow (al igual que ya hacíamos en macOS), ventana WPF cuyo contenido es una ContentPage de Xamarin.Forms. La clave para utilizar Xamarin.Forms es de nuevo embeber el contenido. Tenemos disponible el método de extensión ToFrameworkElement de Xamarin.Forms en el backend WPF para obtener la ContentPage como contenido nativo.

La ventana:

<Window 
     x:Class="Measurer4000.Addin.Windows.Windows.MeasurerWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     WindowStartupLocation="CenterScreen"
     Title="Measurer 4000">
     <Grid>

     </Grid>
</Window>

UI XAML compartida

Tanto en macOS como en Windows utilizamos una ContentPage para definir la interfaz de usuario. Hablamos de una interfaz definida en XAML que puede ser compartida en macOS y Windows, donde en cada plataforma, se utilizará un backend diferente para renderizar la UI con GTK# en el caso de macOS y con WPF en el caso de Windows.

<Grid>
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid Grid.Row="0"
          Margin="24">
          <Grid.ColumnDefinitions>
               <ColumnDefinition />
               <ColumnDefinition />
               <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <StackLayout Grid.Column="0">
          <StackLayout Orientation="Vertical"
               HorizontalOptions="Center"
               Margin="0, 24, 0, 0">
               <Label Text="iOS Specific Code" />
               <Label Text="{Binding Stats.iOSSpecificCode}"
                    FontSize="30" />
          </StackLayout>
          <StackLayout Orientation="Vertical"
               HorizontalOptions="Center"
               Margin="0, 24, 0, 0">
               <Label Text="Share code in iOS" />
               <Label Text="{Binding Stats.ShareCodeIniOS}"
                    FontSize="30" />
          </StackLayout>
     </StackLayout>
     ...

En la interfaz utilizaremos algunos Labels donde msotrar información con cantidad de líneas así como porcentajes de código compartido y código específico. Por otro lado, utilizamos Oxyplot para mostrar gráficos de tipo tarta.

public MeasurerView()
{
     InitializeComponent();

     BindingContext = new CustomMainViewModel();
}

Toda la lógica del addin, modelos, ViewModels, etc. es la ya existente en la herramienta. Utilizaremos MVVM de exactamente la misma forma utilizada para crear Apps, en nuestro addin. En la ViewModel es necesario pasar la ruta de la solución para que pueda analizar y obtener toda la información.

En macOS tenemos en IdeApp.Workspace lo necesario para obtener la información necesaria de la solución con la que trabaja el usuario. Podemos obtener el listado de soluciones con el metodo GetAllSolutions.

var solutionPath = Path.Combine(Directory.GetCurrentDirectory(), solution.FileName);
_viewModel.MeasureSolutionByPath(solutionPath);

En el caso de Windows, obtenemos la instancia del objeto DTE (Development Tools Environment). DTE representa el entorno de desarrollo integrado (IDE) de Visual Studio y es el objeto de máximo nivel en la jerarquía. Nos otorga acceso a una gran variedad de propiedad y métodos para obtener información de la solución, propiedades, ventanas, etc.

var solution = ((DTE)ServiceProvider.GlobalProvider.GetService(typeof(DTE))).Solution;
var solutionPath = solution.FullName;
_viewModel.MeasureSolutionByPath(solutionPath);

Accedemos a la solución, y extraemos la ruta a la misma.

El resultado en macOS:

Addin en macOS

Y en Windows:

Addin en Windows

¿Qué te parece?. Quizás en un futuro sea una opción a la hora de extender Visual Studio. Ahora que tenemos el IDE en más de un sistema operativo, es hora de pensar en contar con una opción para crear extensiones que compartan la mayor cantidad de código posible.

Más información

Renovado como Microsoft MVP 2018!

Microsoft MVP 2018

Abres el correo y…

Hola Javier Suarez,

Una vez más, nos complace entregarle el Premio Microsoft Most Valuable Professional (MVP)…

Van cinco y tras otro año, volver a recibirlo hace la misma e incluso más ilusión!. Un gran honor formar parte de un grupo de desarrolladores tan talentosos y apasionados además de grandes personas.

Microsoft MVP

Agradecimientos

Llegados a este punto, siempre apetece agradecer a muchas partes que han ayudado en el camino. Comienzo por vosotros, si, si hablo de ti querido lector. Gracias por leer estos artículos técnicos y ayudarme a aprender intercambiando opiniones día a día, gracias a mis compañeros MVPs, a los grupos de usuario SVQXDG y CartujaDotNet donde colaboro y me permiten aprender más y más cada día con fantásticos compañeros y a Cristina González, MVP lead, por su increíble labor siempre pendiente de todos nosotros además de a los chicos de Microsoft España. Podría continuar nombrando a muchos amigos y compañeros, pero me temo que me extendería en exceso y al final y al cabo sabéis quienes sois.

Por último, en esta ocasión me gustaría dar todo mi apoyo a amigos que dejan el programa. Estoy seguro que estarán de vuelta pronto además de por supuesto, seguir aportando a toda la comunidad.

Y ahora que?

Ahora, a continuar aprendiendo y disfrutando compartiendo todo lo posible en blogs, comunidades técnicas y proyectos Open Source con más ganas y más ilusión si cabe.

Felicidades

También me gustaría felicitar a todos los MVPs veteranos que han sido renovados asi como aquellos que entran a formar parte desde este momento. Enhorabuena!