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.
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:
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:
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.
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:
- El color del Slider.
- Establecer el color del Switch.
- Añadido soporte de AccessKey en UWP.
- Añadido SelectionMode en ListView.
- Etc.
Puedes encontrar el ejemplo en GitHub:
Más información
- Blog de Xamarin: Xamarin.Forms 3.1: Improving the Little Things
- Xamarin Releases: Xamarin.Forms 3.1.0
- Docs: Invoking JavaScript