[Xamarin.Forms] Recortar vistas (Clip)

La llegada de Shapes a Xamarin.Forms

Con la llegada de Xamarin.Forms 4.7 nos llega la posibilidad de dibujar formas. Sin embargo, ¿sabías que además de poder dibujar una forma podemos cortar cualquier vista con una forma específica?. En este artículo, vamos a aprender cómo cortar vistas con formas.

Clip

La clase VisualElement cuenta ahora con una nueva propiedad llamada Clip de tipo Geometry que define el contorno del contenido.

La clase Geometry (y las clases que derivan de ella) permiten describir la geometría de una forma 2D.

En Xamarin.Forms contamos con geometrías simples como EllipseGeometry, LineGeometry o RectangleGeometry y geometrías más complejas como PathGeometry.

De modo que podemos recortar una imagen para tener una imagen circular de forma sencilla de la siguiente forma:

<Image 
     Source="image.png">
     <Image.Clip>
          <EllipseGeometry 
               RadiusX="100"
               RadiusY="100"
               Center="180,180" />
     </Image.Clip>
</Image>

Ejemplo:

Recortando imágenes!

Se pueden utilizar desde geometrías básicas a complejas usando un Path para definir exactamente la forma deseada.

Pero…funciona con cualquier View!

¿Recuerdas que mencionamos que la propiedad Clip estaba definido en VisualElement?. Esto se traduce en poder recortar cualquier tipo de vista en Xamarin.Forms, no solo imágenes.

Clip Views

De igual forma, recortar dinámicamente cualquier vista y también deshacer el recorte.

Clip Views dinámicamente

Añadir:

var ellipseGeometry = new EllipseGeometry
{
     Center = new Point(75, 75),
     RadiusX = 60,
     RadiusY = 60
};

Image.Clip = ellipseGeometry;

Quitar:

Image.Clip = null;

¿Qué te parece esta funcionalidad?. Recuerda, cualquier duda o comentario es bienvenido en la entrada.

Más información

Microsoft Docs: Xamarin.Forms Shapes

[Xamarin.Forms] Columnas y filas más fácil que nunca en un Grid

Creando columnas y filas en un Grid

XAML es increíble en muchas ocasiones y cumple bien su cometido, pero en ocasiones, puede llegar a ser excesivamente verboso. Un ejemplo de esto lo podemos ver al crear filas y columnas en un Grid:

<Grid>
     <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions> 
          <RowDefinition Height="24" />
          <RowDefinition Height= "64" />
          <RowDefinition Height="24" />
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
</Grid>

Esta es la forma clásica de crear filas y columnas hasta la llegada de Xamarin.Forms 4.7…

Simplificando…

Ahora podemos crear filas y columnas de una forma mucho más sencilla:

<Grid ColumnDefinitions="100, Auto, Auto, *" RowDefinitions="24, 64, 24, *, Auto"/>

Fantástico!, ¿no crees?. Esto es posible gracias a un nuevo TypeConverter añadido. Este convertidor analiza el valor que está entrando, que será una cadena y lo convierte en algo que la propiedad entiende permitiéndonos crear filas y columnas de una forma mucho más sencilla.

Más información

[Xamarin.Forms] Trucos y consejos a la hora de trabajar con Shapes

Trucos y consejos a la hora de trabajar con Shapes

Desde Xamarin.Forms 4.7 contamos en el namespace Xamarin.Forms.Shapes con soporte a dibujar formas en la pantalla en Android, iOS, macOS, UWP y WPF.
Contamos con formas sencillas pero también opciones más complejas que nos permiten dibujar practicamente lo que queramos. Pero…¿cómo dibujamos una forma específica?. En este artículo vamos a conocer trucos y consejos a la hora de conseguir dibujar formas en Xamarin.Forms.

De diseño a Shapes

A la hora de desarrollar aplicaciones móviles, un muchas ocasiones se parte de un diseño. Hay una enorme variedad de herramientas de diseño como Figma, Adobe XD o Sketch por ejemplo. En algunos casos existen plugins para exportar a XAML aunque lo que se cuenta en todas ellas, es la posibilidad de exportar a SVG¿Sabías que podemos convertir cualquier SVG a un Shape de forma sencilla?.
Por ejemplo, tomemos un SVG relativamente complejo compuesto por diferentes paths:
<svg viewBox='0 0 104 97' xmlns='http://www.w3.org/2000/svg'>
<path d='M14,85l3,9h72c0,0,5-9,4-10c-2-2-79,0-79,1' fill='#7C4E32'/>
<path d='M19,47c0,0-9,7-13,14c-5,6,3,7,3,7l1,14c0,0,10,8,23,8c14,0,26,1,28,0c2-1,9-2,9-4c1-1,27,1,27-9c0-10,7-20-11-29c-17-9-67-1-67-1' fill='#E30000'/>
<path d='M17,32c-3,48,80,43,71-3 l-35-15' fill='#FFE1C4'/>
<path d="M17,32c9-36,61-32,71-3c-20-9-40-9-71,3" fill="#8ED8F8"/>
<path d='M54,35a10 8 60 1 1 0,0.1zM37,38a10 8 -60 1 1 0,0.1z' fill='#FFF'/>
<path d='M41,6c1-1,4-3,8-3c3-0,9-1,14,3l-1,2h-2h-2c0,0-3,1-5,0c-2-1-1-1-1-1l-3,1l-2-1h-1c0,0-1,2-3,2c0,0-2-1-2-3M17,34l0-2c0,0,35-20,71-3v2c0,0-35-17-71,3M5,62c3-2,5-2,8,0c3,2,13,6,8,11c-2,2-6,0-8,0c-1,1-4,2-6,1c-4-3-6-8-2-12M99,59c0,0-9-2-11,4l-3,5c0,1-2,3,3,3c5,0,5,2,7,2c3,0,7-1,7-4c0-4-1-11-3-10' fill='#FFF200'/>
<path d='M56,78v1M55,69v1M55,87v1' stroke='#000' stroke-linecap='round'/>
<path d='M60,36a1 1 0 1 1 0-0.1M49,36a1 1 0 1 1 0-0.1M57,55a2 3 0 1 1 0-0.1M12,94c0,0,20-4,42,0c0,0,27-4,39,0z'/>
<path d='M50,59c0,0,4,3,10,0M56,66l2,12l-2,12M25,50c0,0,10,12,23,12c13,0,24,0,35-15' fill='none' stroke='#000' stroke-width='0.5'/>
</svg>
Dibuja al personaje Cartman de South Park. Podemos transformar el código anterior a XAML de forma muy sencilla:
<Grid>
     <Path Data="M14,85l3,9h72c0,0,5-9,4-10c-2-2-79,0-79,1" Fill="#7C4E32"/>
     <Path Data="M19,47c0,0-9,7-13,14c-5,6,3,7,3,7l1,14c0,0,10,8,23,8c14,0,26,1,28,0c2-1,9-2,9-4c1-1,27,1,27-9c0-10,7-20-11-29c-17-9-67-1-67-1" Fill="#E30000"/>
     <Path Data="M17,32c-3,48,80,43,71-3 l-35-15" Fill="#FFE1C4"/>
     <Path Data="M17,32c9-36,61-32,71-3c-20-9-40-9-71,3" Fill="#8ED8F8"/>
     <Path Data="M54,35a10 8 60 1 1 0,0.1zM37,38a10 8 -60 1 1 0,0.1z" Fill="#FFF"/>
     <Path Data="M41,6c1-1,4-3,8-3c3-0,9-1,14,3l-1,2h-2h-2c0,0-3,1-5,0c-2-1-1-1-1-1l-3,1l-2-1h-1c0,0-1,2-3,2c0,0-2-1-2-3M17,34l0-2c0,0,35-20,71-3v2c0,0-35-17-71,3M5,62c3-2,5-2,8,0c3,2,13,6,8,11c-2,2-6,0-8,0c-1,1-4,2-6,1c-4-3-6-8-2-12M99,59c0,0-9-2-11,4l-3,5c0,1-2,3,3,3c5,0,5,2,7,2c3,0,7-1,7-4c0-4-1-11-3-10" Fill="#FFF200"/>
     <Path Data="M56,78v1M55,69v1M55,87v1" Stroke="#000" StrokeLineCap="Round"/>
     <Path Data="M60,36a1 1 0 1 1 0-0.1M49,36a1 1 0 1 1 0-0.1M57,55a2 3 0 1 1 0-0.1M12,94c0,0,20-4,42,0c0,0,27-4,39,0z" Stroke="#000"/>
     <Path Data="M50,59c0,0,4,3,10,0M56,66l2,12l-2,12M25,50c0,0,10,12,23,12c13,0,24,0,35-15" Stroke="#000" StrokeThickness="0.5"/>
</Grid>
El resultado:

Dibujando usando SVG

Cada Path dibuja un elemento del personaje de modo que podemos aplicar transformaciones, animaciones, etc. a cada pequeña parte que compone el dibujo. Ah, recuerda que XAML Hot Reload funciona con Shapes:

Usando Hot Reload

Dibujando con herramientas

Una herramienta perfecta para crear Shapes es Blend. Entre el conjunto de Assets puedes directamente arrastrar y soltar cualquier tipo de Shape, y luego hacer cualquier transformación como rotar, escalar, etc.

Shapes

Dibujando Shapes con Blend

Otra herramienta clásica pero que nos permite dibujar y exportar directamente código XAML que podremos utilizar en nuestra aplicación Xamarin.Forms es Inkscape. Herramienta de dibujado disponible para Windows, macOS y Linux nos permite una gran variedad de opciones (que podemos extender usando plugins) para dibujar:

Inkscape

Y exportar el código directamente a XAML:
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is NOT compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg8" Width="210" Height="297">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: sodipodi:namedview-->
<!--Unknown tag: metadata-->
<Canvas Name="layer1">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path10" StrokeThickness="0.264583" Stroke="#FF000000">
<Path.Data>
<PathGeometry Figures="m 130.77975 114.90475 c -1.28867 2.76686 -4.36546 -0.37204 -4.5987 -2.14187 -0.63208 -4.79613 4.79124 -7.58089 8.88244 -7.05555 7.31819 0.93971 11.05326 8.94515 9.51239 15.62302 -2.26128 9.80005 -13.14527 14.60051 -22.36359 11.96923 -12.28658 -3.50708 -18.17801 -17.36047 -14.42608 -29.10417 4.72141 -14.778243 21.58254 -21.770781 35.84475 -16.882919 17.27344 5.919857 25.37235 25.808419 19.33976 42.585329 -7.1092 19.771 -30.03665 28.97944 -49.3259 21.7966 C 91.374607 143.40155 81.054615 117.42797 89.391371 95.627942 98.864123 70.857366 127.88874 59.424405 152.19843 68.917654 c 27.27179 10.649991 39.81874 42.729096 29.16713 69.547636 -11.82531 29.77366 -46.96143 43.43535 -76.28821 31.62397" FillRule="EvenOdd"/
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
De modo que, podemos utilizar el resultado en nuestras aplicaciones:
<Path
     StrokeThickness="0.264583"
     Stroke="#FF000000">
     <Path.Data>
          <PathGeometry
               Figures="m 130.77975 114.90475 c -1.28867 2.76686 -4.36546 -0.37204 -4.5987 -2.14187 -0.63208 -4.79613 4.79124 -7.58089 8.88244 -7.05555 7.31819 0.93971 11.05326 8.94515 9.51239 15.62302 -2.26128 9.80005 -13.14527 14.60051 -22.36359 11.96923 -12.28658 -3.50708 -18.17801 -17.36047 -14.42608 -29.10417 4.72141 -14.778243 21.58254 -21.770781 35.84475 -16.882919 17.27344 5.919857 25.37235 25.808419 19.33976 42.585329 -7.1092 19.771 -30.03665 28.97944 -49.3259 21.7966 C 91.374607 143.40155 81.054615 117.42797 89.391371 95.627942 98.864123 70.857366 127.88874 59.424405 152.19843 68.917654 c 27.27179 10.649991 39.81874 42.729096 29.16713 69.547636 -11.82531 29.77366 -46.96143 43.43535 -76.28821 31.62397" FillRule="EvenOdd"/>
     </Path.Data>
</Path>

El resultado

Otras herramientas

Hay una enorme variedad de herramientas y posibilidades para trabajar con Shapes. Sin embargo, me gustaría también recomendar Metro Studio. Es una herramienta gratuita de SyncFusion que cuenta con más de 7000 iconos y formas diferentes que exportar a código XAML. Podemos aprovechar este código XAML para crear iconos usando Shapes y dibujar diferentes figuras.

Metro Studio

Snippets de código

Para facilitar la creación de Shapes puedes encontrar un listado de snippets para Visual Studio en este enlace.

Más información

[Xamarin.Forms] Tips and tricks working with Shapes

Tips and tricks working with Shapes

In Xamarin.Forms 4.7 we have in the Xamarin.Forms.Shapes namespace support to draw shapes on the screen in Android, iOS, macOS, UWP and WPF.
We have from simple shapes to more complex options that allow us to practically draw whatever we want. But … how do we draw a specific shape?. In this article we are going to learn tips and tricks to draw shapes in Xamarin.Forms.

From Design to Shapes

When developing mobile applications, some times sometimes we replicate a design. There is a huge variety of design tools such as Figma, Adobe XD or Sketch for example. In some cases there are plugins to export to XAML although what is available in all of them is the possibility of export to SVG format. Do you know that we can convert any SVG to a Xamarin.Forms Shape in a simple way?.
For example, let’s take a relatively complex SVG created with a composition of paths:
<svg viewBox='0 0 104 97' xmlns='http://www.w3.org/2000/svg'>
<path d='M14,85l3,9h72c0,0,5-9,4-10c-2-2-79,0-79,1' fill='#7C4E32'/>
<path d='M19,47c0,0-9,7-13,14c-5,6,3,7,3,7l1,14c0,0,10,8,23,8c14,0,26,1,28,0c2-1,9-2,9-4c1-1,27,1,27-9c0-10,7-20-11-29c-17-9-67-1-67-1' fill='#E30000'/>
<path d='M17,32c-3,48,80,43,71-3 l-35-15' fill='#FFE1C4'/>
<path d="M17,32c9-36,61-32,71-3c-20-9-40-9-71,3" fill="#8ED8F8"/>
<path d='M54,35a10 8 60 1 1 0,0.1zM37,38a10 8 -60 1 1 0,0.1z' fill='#FFF'/>
<path d='M41,6c1-1,4-3,8-3c3-0,9-1,14,3l-1,2h-2h-2c0,0-3,1-5,0c-2-1-1-1-1-1l-3,1l-2-1h-1c0,0-1,2-3,2c0,0-2-1-2-3M17,34l0-2c0,0,35-20,71-3v2c0,0-35-17-71,3M5,62c3-2,5-2,8,0c3,2,13,6,8,11c-2,2-6,0-8,0c-1,1-4,2-6,1c-4-3-6-8-2-12M99,59c0,0-9-2-11,4l-3,5c0,1-2,3,3,3c5,0,5,2,7,2c3,0,7-1,7-4c0-4-1-11-3-10' fill='#FFF200'/>
<path d='M56,78v1M55,69v1M55,87v1' stroke='#000' stroke-linecap='round'/>
<path d='M60,36a1 1 0 1 1 0-0.1M49,36a1 1 0 1 1 0-0.1M57,55a2 3 0 1 1 0-0.1M12,94c0,0,20-4,42,0c0,0,27-4,39,0z'/>
<path d='M50,59c0,0,4,3,10,0M56,66l2,12l-2,12M25,50c0,0,10,12,23,12c13,0,24,0,35-15' fill='none' stroke='#000' stroke-width='0.5'/>
</svg>
Draw the Cartman character from South Park. We can transform the previous code to XAML in a very simple way:
<Grid>
     <Path Data="M14,85l3,9h72c0,0,5-9,4-10c-2-2-79,0-79,1" Fill="#7C4E32"/>
     <Path Data="M19,47c0,0-9,7-13,14c-5,6,3,7,3,7l1,14c0,0,10,8,23,8c14,0,26,1,28,0c2-1,9-2,9-4c1-1,27,1,27-9c0-10,7-20-11-29c-17-9-67-1-67-1" Fill="#E30000"/>
     <Path Data="M17,32c-3,48,80,43,71-3 l-35-15" Fill="#FFE1C4"/>
     <Path Data="M17,32c9-36,61-32,71-3c-20-9-40-9-71,3" Fill="#8ED8F8"/>
     <Path Data="M54,35a10 8 60 1 1 0,0.1zM37,38a10 8 -60 1 1 0,0.1z" Fill="#FFF"/>
     <Path Data="M41,6c1-1,4-3,8-3c3-0,9-1,14,3l-1,2h-2h-2c0,0-3,1-5,0c-2-1-1-1-1-1l-3,1l-2-1h-1c0,0-1,2-3,2c0,0-2-1-2-3M17,34l0-2c0,0,35-20,71-3v2c0,0-35-17-71,3M5,62c3-2,5-2,8,0c3,2,13,6,8,11c-2,2-6,0-8,0c-1,1-4,2-6,1c-4-3-6-8-2-12M99,59c0,0-9-2-11,4l-3,5c0,1-2,3,3,3c5,0,5,2,7,2c3,0,7-1,7-4c0-4-1-11-3-10" Fill="#FFF200"/>
     <Path Data="M56,78v1M55,69v1M55,87v1" Stroke="#000" StrokeLineCap="Round"/>
     <Path Data="M60,36a1 1 0 1 1 0-0.1M49,36a1 1 0 1 1 0-0.1M57,55a2 3 0 1 1 0-0.1M12,94c0,0,20-4,42,0c0,0,27-4,39,0z" Stroke="#000"/>
     <Path Data="M50,59c0,0,4,3,10,0M56,66l2,12l-2,12M25,50c0,0,10,12,23,12c13,0,24,0,35-15" Stroke="#000" StrokeThickness="0.5"/>
</Grid>
The result:

Dibujando usando SVG

Each Path draws an element of the character so we can apply transformations, animations, etc. to each small part that makes up the drawing. Ah, remember that XAML Hot Reload works with Shapes:

Usando Hot Reload

Drawing with tools

A nice tool for creating Shapes is Blend. Among the set of Assets you can directly drag and drop any type of Shape, and then do any transformation like rotate, scale, etc.

Shapes

Dibujando Shapes con Blend

Another classic tool but that allows us to directly draw and export XAML code that we can use in our Xamarin.Forms application is Inkscape. Drawing tool available for Windows, macOS and Linux allows us a great variety of options (that we can extend using plugins) to draw:

Inkscape

And export the code directly to XAML:
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is NOT compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg8" Width="210" Height="297">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: sodipodi:namedview-->
<!--Unknown tag: metadata-->
<Canvas Name="layer1">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path10" StrokeThickness="0.264583" Stroke="#FF000000">
<Path.Data>
<PathGeometry Figures="m 130.77975 114.90475 c -1.28867 2.76686 -4.36546 -0.37204 -4.5987 -2.14187 -0.63208 -4.79613 4.79124 -7.58089 8.88244 -7.05555 7.31819 0.93971 11.05326 8.94515 9.51239 15.62302 -2.26128 9.80005 -13.14527 14.60051 -22.36359 11.96923 -12.28658 -3.50708 -18.17801 -17.36047 -14.42608 -29.10417 4.72141 -14.778243 21.58254 -21.770781 35.84475 -16.882919 17.27344 5.919857 25.37235 25.808419 19.33976 42.585329 -7.1092 19.771 -30.03665 28.97944 -49.3259 21.7966 C 91.374607 143.40155 81.054615 117.42797 89.391371 95.627942 98.864123 70.857366 127.88874 59.424405 152.19843 68.917654 c 27.27179 10.649991 39.81874 42.729096 29.16713 69.547636 -11.82531 29.77366 -46.96143 43.43535 -76.28821 31.62397" FillRule="EvenOdd"/
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
So, we can use the result in our applications:
<Path
     StrokeThickness="0.264583"
     Stroke="#FF000000">
     <Path.Data>
          <PathGeometry
               Figures="m 130.77975 114.90475 c -1.28867 2.76686 -4.36546 -0.37204 -4.5987 -2.14187 -0.63208 -4.79613 4.79124 -7.58089 8.88244 -7.05555 7.31819 0.93971 11.05326 8.94515 9.51239 15.62302 -2.26128 9.80005 -13.14527 14.60051 -22.36359 11.96923 -12.28658 -3.50708 -18.17801 -17.36047 -14.42608 -29.10417 4.72141 -14.778243 21.58254 -21.770781 35.84475 -16.882919 17.27344 5.919857 25.37235 25.808419 19.33976 42.585329 -7.1092 19.771 -30.03665 28.97944 -49.3259 21.7966 C 91.374607 143.40155 81.054615 117.42797 89.391371 95.627942 98.864123 70.857366 127.88874 59.424405 152.19843 68.917654 c 27.27179 10.649991 39.81874 42.729096 29.16713 69.547636 -11.82531 29.77366 -46.96143 43.43535 -76.28821 31.62397" FillRule="EvenOdd"/>
     </Path.Data>
</Path>

El resultado

Other tools

There are a huge variety of tools and possibilities for working with Shapes. However, I would also like to recommend Metro Studio. It is a free SyncFusion tool that has more than 7000 different icons and shapes to export to XAML code. We can take advantage of this XAML code to create icons using Shapes and draw different shapes.

Metro Studio

Snippets

To facilitate the Shapes creation I created some snippets for Visual Studio. If you need guidance on how to implement snippets in Visual Studio 2019, head on over to the documentation guide.

More information

[Xamarin.Forms] Shapes

Shapes

Con la evolución de Xamarin.Forms las posibilidades creando interfaces de usuario o controles personalizados ha ido incrementando. Sin embargo, no tenemos aún la posibilidad de dibujar formas básicas (rectángulo, línea o círculo). Llegan Shapes a Xamarin.Forms!.

Un Shape es una vista que permite dibujar una forma en la pantalla. Los Shapes están disponibles en el namespace Xamarin.Forms.Shapes permitiendo dibujar formas en Android, iOS, macOS, UWP y WPF.

NOTA: Los Shapes actualmente están en fase experimental y para poder usarlos necesitas usar el flag Shapes_Experimental.

Todas las Shapes comparten una serie de propiedades comunes:

  • Aspect: Define cómo el Shape ocupa el espacio asignado.
  • Fill: Color de fondo de la figura.
  • Stroke: Color del borde de la figura.

Junto a otras propiedades como StrokeThickness, StrokeDashArray, etc.

Xamarin.Forms cuenta con diferentes objetos que derivan de la clase Shape como:

  • Rectangle
  • Ellipse
  • Line
  • Polyline
  • Polygon
  • Path

Rectangle

Es una forma con cuatro lados cuyos lados opuestos son iguales. Para crear un rectángulo básico, se debe especificar las propiedades WidthRequest, HeightRequest y Fill.

<Rectangle 
     Fill="Red"
     WidthRequest="150"
     HeightRequest="50"
     HorizontalOptions="Start" />

Rectangle cuenta con las propiedades:

  • RadiusX: Es el radio del eje x que se usa para redondear las esquinas del rectángulo.
  • RadiusY: Es el radio del eje y que se usa para redondear las esquinas del rectángulo.

Rectangle

Ellipse

Una elipse es una forma con un perímetro curvo. Para crear una elipse básica, hay que especificar el WidthRequest, HeightRequest y Fill.

<Ellipse 
     Fill="Red"
     WidthRequest="150"
     HeightRequest="50"
     HorizontalOptions="Start" />

Ellipse

Line

Permite dibujar una línea entre dos puntos. La línea se define con las siguientes propiedades:

  • X1: La coordenada X del punto inicial.
  • Y1: La coordenada Y del punto inicial.
  • X2: La coordenada X del punto final.
  • Y2: La coordenada Y del punto final.
<Line 
     X1="40"
     Y1="0"
     X2="0"
     Y2="120"
     Stroke="Red" />

Line

Polyline

Es similar a un polígono ya que el límite de la forma está definido por un conjunto de puntos, pero hay que tener en cuenta que el último punto de la polilínea no está conectado al primero.

  • Points: Es una colección de puntos que describen los puntos de vértice de la polilínea.
  • FillRule: Especifica cómo se combinan las áreas de intersección de la polilínea.
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30"
Stroke="Red" />

Polyline

Polygon

Es una forma con un límite definida por un número de puntos arbitrario. El límite se crea conectando una línea desde un punto al siguiente, con el último punto conectado al primero.

  • Points: Es una colección de puntos que describen los puntos de vértice del polígono.
  • FillRule: Especifica cómo se combinan las áreas de intersección del polígono.
<Polygon 
     Points="40,10 70,80 10,50"
     Fill="AliceBlue"
     Stroke="Green"
     StrokeThickness="5" />

Polygon

Path

Es la figura más versátil, ya que se puede usar para definir una geometría arbitraria.

<Path
     Stroke="Black" 
     Fill="Gray"
     Data="M 10,100 C 10,300 300,-200 300,100" />

Path

Geometrías

La clase Geometry (y las clases que derivan de ella) permiten describir la geometría de una forma 2D.

En Xamarin.Forms contamos con geometrías simples como EllipseGeometry, LineGeometry o RectangleGeometry y geometrías más complejas como PathGeometry.

<Path 
     Fill="Blue"
     Stroke="Red"
     StrokeThickness="1">
     <Path.Data>
     <EllipseGeometry 
          Center="50,50"
          RadiusX="50"
          RadiusY="50" />
     </Path.Data>
</Path>

Más información

[Xamarin.Forms] MultiBinding

MultiBinding

En Xamarin.Forms 4.7 se añade soporte a MultiBinding!. Pero… ¿qué es esto?.

MultiBinding describe una colección de objetos Binding asociados a una sola propiedad de destino de enlace. Permite enlazar una propiedad del destino de enlace a una lista de propiedades de origen y, a continuación, aplicar la lógica para generar un valor con las entradas indicadas.

Por ejemplo:

<Label>
     <Label.Text>
          <MultiBinding Converter="{StaticResource NameConverter}">
               <Binding Path="Name"/>
               <Binding Path="Surname"/>
          </MultiBinding>
     </Label.Text>
</Label>

Podemos componer un nuevo valor (en este caso es una cadena) en base los valores de diferentes enlace a datos. Es un ejemplo muy sencillo, pero veamos el resultado:

MultiBinding

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

¿Qué te parece la llegada de MultiBinding en Xamarin.Forms?, ¿qué te gustaría ver añadido en XAML?. Recuerda, puedes dejar cualquier duda o comentario en la entrada!.

Más información

Probar versiones previas y bug fixes de Xamarin.Forms

Introducción

Xamarin.Forms es un proyecto Open Source donde tú como desarrollador y como parte de la comunidad, puedes participar. Pero…¿sabes que el sistema de Builds también es público?. De esta forma, sí estas esperando una PR concreta o has enviado una PR con funcionalidad o con un corrección, puedes descargar los paquetes NuGet con los cambios y probarlos.

Xamarin.Forms no es una excepción cuenta con procesos automáticos de compilación y pruebas automatizadas. En este artículo, vamos a conocer como acceder a las Nightly Builds así como a la Build de una PR concreta.

Probar versiones previas

Todas las noches se realiza la compilación de la rama master y se publica un paquete NuGet en las Nightly Builds. Puedes acceder a las Nightly en este enlace:

https://aka.ms/xf-ci/index.json

Veamos como usarlo:

Visual Studio para Windows

  1. Abre las opciones de configuración navegando por Tools > NuGet Package Manager > Package Manager Settings.
  2. Selecciona la página de Package Sources.
  3. Haz click en el botón añadir.
  4. Añade un nombre personalizado y sobretodo, la URL de las Nightly Builds.
  5. Pulsa Ok.
  6. A la hora de usar NuGet Package Manager, elige tu fuente personalizada, y voila, podrás ver los paquetes disponibles en la Nightly.

Visual Studio para macOS

  1. Abe NuGet Package Manager navegando por el menu Project > Add NuGet Packages…
  2. Selecciona Configure Sources…
  3. Haz clic en el botón para añadir una nueva fuente.
  4. Introduce el nombre y la URL de la Nightly.
  5. Haz clic en  Add Source y luego en OK.

Probar bug fixes

Para cada PR, lo primero que se hace es una compilación para ver si todo compila correctamente. Cada vez que se lanza una compilación, se registran ver los pasos y se registra todo en el apartado de estado de Github.

Información de la Build en GitHub

La información de la Build la tienes disponible en xamarin-forms-ci, que es la compilación de CI de Azure DevOps.

Como parte de la compilación de CI, también se crean artefactos que son los paquetes NuGet que contienen el nuevo código. Para acceder a los artefactos comenzamos pulsando el enlace Details de xamarin-forms-ci.

Azure DevOps CI

Navegamos a Azure DevOps donde podemos ver los detalles de la Build, pruebas que han pasado, etc. Entre la información disponible, verás que hay 3 artefactos publicados. Haciendo clic sobre los artefactos navegamos a:

Los artefactos

Los detalles de artefactos generados. Tenemos cada paquete NuGet generado donde podremos encontrar desde el paquete de Xamarin.Forms como otros paquetes asociados como mapas, etc. Para descargar un paquete concreto, pulsamos los tres puntos suspensivos y elegimos la opción Download artifacts (Fíjate que también puedes obtener la URL hacia el artefacto).

Descargar artefacto

¿Y cómo lo usamos?. De una forma muy similar a la anterior. Creamos una origen de paquetes nuevo sencillamente usando una carpeta que contenga los artefactos descargados en lugar de usar una URL.

A tener en cuenta

Recuerda, puedes descargar el paquete NuGet de una PR en cuanto pasa el proceso de CI, es decir, todo compila y pasan las pruebas. Sin embargo, aún faltarían las revisiones de código y otras validaciones. Es decir, recuerda que están usando algo que puede cambiar o esta en fase Preview a falta de más validaciones.

Más información

[Xamarin.Forms] C# Markup Extensions

Introducción

En Xamarin.Forms 4.6 han llegado las extensiones de marcado de C#. Se trata de un conjunto (opcional) de métodos de extensión y clases auxiliares para simplificar la creación de interfaces de usuario en Xamarin.Forms usando C#. En este artículo, vamos a crear la misma interfaz usando XAML, C# y las nuevas extensiones de marcado de C# para conocer las posibilidades de las extensiones añadidas.

Crear UI con XAML

Comenzamos creando una pantalla de Login usando XAML:

<Grid
    Padding="12">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Image
        Grid.Row="0"
        BackgroundColor="Gray"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        HeightRequest="100"
        WidthRequest="100"/>
    <Entry
        Grid.Row="1"
        Text="{Binding Username, Mode=TwoWay}"
        Placeholder="Username"/>
    <Entry
        Grid.Row="2"
        Text="{Binding Password, Mode=TwoWay}"
        IsPassword="True"
        Placeholder="Password"/>
    <Label
        Grid.Row="3"
        Text="Forgot Password?"
        FontSize="Micro"
        TextDecorations="Underline"
        HorizontalOptions="End"/>
    <Grid
        Grid.Row="4">
        <Button
            BackgroundColor="White"
            CornerRadius="24"
            Text="LOGIN"
            HeightRequest="60"
            VerticalOptions="Center"
            Command="{Binding SignInCommand}"
            Margin="24, 12"/>
    </Grid>
</Grid>

Crear UI con C#

Vamos a crear lo mismo usando C#:

public class LoginCSharpView : ContentPage
{
    public LoginCSharpView()
    {
        BindingContext = new LoginViewModel();
        BackgroundColor = Color.LightGray;

        var grid = new Grid
        {
            Padding = 12
        };

        grid.RowDefinitions.Add(new RowDefinition());
        grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
        grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
        grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
        grid.RowDefinitions.Add(new RowDefinition());

        var logo = new Image
        {
            BackgroundColor = Color.Gray,
            HeightRequest = 100,
            WidthRequest = 100,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };

        grid.Children.Add(logo);
        Grid.SetRow(logo, 0);

        var usernameEntry = new Entry
        {
            Placeholder = "Username"
        };
        usernameEntry.SetBinding(Entry.TextProperty, "Username");
        grid.Children.Add(usernameEntry);
        Grid.SetRow(usernameEntry, 1);

        var passwordEntry = new Entry
        {
            IsPassword = true,
            Placeholder = "Password"
        };
        passwordEntry.SetBinding(Entry.TextProperty, "Password");
        grid.Children.Add(passwordEntry);
        Grid.SetRow(passwordEntry, 2);

        var forgotPassword = new Label
        {
            FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)),
            Text = "Forgot Password?",
            TextDecorations = TextDecorations.Underline,
            HorizontalOptions = LayoutOptions.End
        };
        grid.Children.Add(forgotPassword);
        Grid.SetRow(forgotPassword, 3);

        var signInGrid = new Grid();

        var signInButton = new Button
        {
            BackgroundColor = Color.White,
            CornerRadius = 24,
            HeightRequest = 60,
            Margin = new Thickness(24, 12),
            VerticalOptions = LayoutOptions.Center,
            Text = "LOGIN"
        };
        signInGrid.Children.Add(signInButton);

        grid.Children.Add(signInGrid);
        Grid.SetRow(signInGrid, 4);

        Content = grid;
    }
}

C# Markup Extensions

Pasamos a ver las novedades aportadas por las extensiones añadidas:

public class LoginCSharpMarkupView : ContentPage
{
    enum Row { Logo, Username, Password, Forgot, SignIn };

    public LoginCSharpMarkupView()
    {
        var vm = new LoginViewModel();
        BindingContext = vm;
        BackgroundColor = Color.LightGray;

        Content = new Grid
        {
            Padding = 12,
            RowDefinitions = Rows.Define(
                (Row.Logo, GridLength.Star),
                (Row.Username, GridLength.Auto),
                (Row.Password, GridLength.Auto),
                (Row.Forgot, GridLength.Auto),
                (Row.SignIn, GridLength.Star)),
            Children =
            {
                new Image
                {
                    BackgroundColor = Color.Gray,
                    HeightRequest = 100,
                    WidthRequest = 100,
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center
                }.Row(Row.Logo),
                new Entry
                {
                    Placeholder = "Username"
                }.Row(Row.Username).Bind(nameof(vm.Username)),
                new Entry
                {
                    IsPassword = true,
                    Placeholder = "Password"
                }.Row(Row.Password).Bind(nameof(vm.Password)),
                new Label
                {
                    FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)),
                    Text = "Forgot Password?",
                    TextDecorations = TextDecorations.Underline,
                    HorizontalOptions = LayoutOptions.End
                }.Row(Row.Forgot),
                new Button
                {
                    BackgroundColor = Color.White,
                    CornerRadius = 24,
                    HeightRequest = 60,
                    Margin = new Thickness(24, 12),
                    VerticalOptions = LayoutOptions.Center,
                    Text = "LOGIN"
                }.Row(Row.SignIn).Bind(nameof(vm.SignInCommand))
            }
        };
    }
}

Antes de profundizar en detalles, las extensiones de marcado C# añadidas en Xamarin.Forms 4.6 se encuentran en fase experimental:

Device.SetFlags(new string[]{ "Markup_Experimental" });

Las extensiones para crear la interfaz de usuario usando C# de forma  fluida se encuentran en el espacio de nombres Xamarin.Forms.Markup.

Enlace a datos

Contamos con el método de extension Bind que cuenta con varias sobrecargas para crear un enlace de datos entre la propiedad de una vista y una propiedad especificada.

var password = new Entry { IsPassword = true, Placeholder = "Password" }.Bind(nameof(vm.Password));

Layouts

Al usar un Grid, podemos usar una enumeración para definir filas y columnas, en lugar de usar directamente números. Es necesario utilizar el namespace:

using static Xamarin.Forms.Markup.GridRowsColumns;

Veamos el uso:

var grid = new Grid { 
     RowDefinitions = 
          Rows.Define( (Row.Logo, GridLength.Star), (Row.Username, GridLength.Auto), (Row.Password, GridLength.Auto), (Row.Forgot, GridLength.Auto), (Row.SignIn, GridLength.Star))
};

Además, se puede definir de forma sencilla filas y columnas usando la enumeración:

var password = new Entry { IsPassword = true, Placeholder = "Password" }.Row(Row.Password);

Estilos

Los estilos implícitos se pueden utilizar cargándolos en el diccionario de recursos de la aplicación:

public App()
{
     Resources = Styles.Implicit;
     ...
}

Mientras que los estilos explícitos se pueden usar utilizando el método de extensión Style.

var password = new Entry { IsPassword = true, Placeholder = "Password" }.Style (PasswordStyle);

Otros

Aunque no lo hemos visto en el ejemplo de Login, tenemos bastantes mas extensiones para trabajar con fuentes, efectos, gestos, etc.

Para trabajar con gestos podemos usar el método de extensión BindTapGesture:

var tapLabel = new Label { Text = "Tap Me" } .BindTapGesture (nameof(vm.TapCommand));

Podemos adjuntar efectos usando el método de extensión Effects:

var effectButton = new Button { Text = "Tap Me" }.Effects (new ButtonBordeless());

Para ver más ejemplos y detalles relacionados con las extensiones de marcado, puedes leer la documentación oficial.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

¿Qué te parecen las extensiones de marcado C#?, ¿creas la interfaz de usuario en Xamarin.Forms usando XAML o C#). Recuerda, puedes dejar cualquier duda o comentario en la entrada!.

Más información

Novedades en Xamarin.Forms presentadas en el Build 2020

El //Build 2020

En estos días, del 19 al 21 de Mayo se está celebrando el Build 2020, el mayor evento de Microsoft centrado en el desarrollo del año.

//Build 2020

Y se han presentado una gran variedad de novedades relacionadas con Xamarin.Forms.

Novedades anunciadas para Xamarin.Forms

Shell 2.0

Shell llegó en Xamarin.Forms con el objetivo de simplificar la creación de la estructura de la aplicación. Tener un Flyout, pestañas, etc.

Shell hacía muchas cosas bien, como simplificar la creación de estructuras, simplificar la navegación o la gestión de la barra de búsqueda. Sin embargo, sabemos que también hay cosas que se debían mejorar. Por poner algunos ejemplos: la abstracción de nombres hacía que aprender Shell fuese más complejo de lo necesario, había escenarios no cubiertos, etc. Con la llegada de Shell 2.0 se busca mejorar todas estas opciones.

<App>
    <App.Routes>
        <Route = "Foo">
            <TabBar Location="Bottom"  IsNavigationRoot="true">
                <TabBar Location="Top" Name="Your Library">
                    <TabBar Location="Top" Name="Music" Route = "Music">
                        <Tab Name="PlayLists" Route="Login">
                        <Tab Name="Artists">
                        <Tab Name="Albums">
                        <NavigationButton Route="Foo">
                    </TabBar>
                    <TabBar Location="Top" Name="Podcasts" Route = "Podcasts">
                        <Tab Name="Episodes">
                        <Tab Name="Downloads">
                        <Tab Name="Shows">
                    </TabBar>
                </TabBar>
                <Tab Name="Home" />
                <Tab Name="Search" />
            </TabBar>
        </Route>
        <Route="Login">
            <MyLoginPage />
        </Route>
    </App.Routes>
    <FlyoutNavigation />
</App>

Shapes

Con la evolución de Xamarin.Forms las posibilidades creando interfaces de usuario o controles personalizados ha ido incrementando. Sin embargo, no tenemos aún la posibilidad de dibujar formas básicas (rectángulo, línea o círculo). Llegan Shapes a Xamarin.Forms.

  • Rectangle: Es una forma con cuatro lados cuyos lados opuestos son iguales. Para crear un rectángulo básico, se debe especificar las propiedades WidthRequest, HeightRequest y Fill.
  • Ellipse: Una elipse es una forma con un perímetro curvo. Para crear una elipse básica, hay que especificar el WidthRequest, HeightRequest y Fill.
  • Line: Permite dibujar una línea entre dos puntos.
  • Polyline: es similar a un polígono ya que el límite de la forma está definido por un conjunto de puntos, pero hay que tener en cuenta que el último punto de la polilínea no está conectado al primero.
  • Polygon: es una forma con un límite definida por un número de puntos arbitrario. El límite se crea conectando una línea desde un punto al siguiente, con el último punto conectado al primero.
  • Path: es ña figura más versátil, ya que se puede usar para definir una geometría arbitraria.

Ejemplo:

<Path
     HeightRequest="100"
     WidthRequest="100"
     Fill="Red"
     Stroke="Red"
     StrokeThickness="3">
     <Path.Data>
          <GeometryGroup>
               <RectangleGeometry
                    Rect="480, 96, 192, 192" />
               <RectangleGeometry
                    Rect="576, 192, 192, 192" />
          </GeometryGroup>
     </Path.Data>
</Path>

Brushes

Un gradiente es la mezcla gradual de un color a otro. En diseño móvil, es un recurso habitual por lo que contar con soporte en Xamarin.Forms era necesario.

En Xamarin.Forms, todas las Views (esto incluye páginas, layouts y vistas) tendrán soporte a Brushes.

Tendremos tres tipos de Brushes:

  • SolidColorBrush: Pinta un colo sólido.
  • LinearGradientBrush: Pinta un degradado que se define a lo largo de una línea. Esta línea se llama eje de gradiente. Puede especificar los colores del degradado y sus ubicaciones a lo largo del eje del degradado utilizando objetos GradientStop.
  • RadialGradientBrush: Pinta un área con un degradado radial que tiene un círculo, junto con un punto focal, para definir el comportamiento del degradado. El punto focal define el centro del gradiente y tiene el valor predeterminado 0.0.

Veamos un ejemplo usando XAML:

<Grid>
    <Grid.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </Grid.Background>
<Grid>

También se podrá utilizar CSS para definir gradientes:

#RootContainer{
    background: linear-gradient(45deg, rgba(218, 64, 244, 0.26) 0%, rgba(218, 64, 244, 0.26) 3%,rgba(184, 81, 207, 0.26) 3%, rgba(184, 81, 207, 0.26) 26%,rgba(149, 97, 169, 0.26) 26%, rgba(149, 97, 169, 0.26) 27%,rgba(115, 114, 132, 0.26) 27%, rgba(115, 114, 132, 0.26) 46%,rgba(80, 130, 94, 0.26) 46%, rgba(80, 130, 94, 0.26) 87%,rgba(46, 147, 57, 0.26) 87%, rgba(46, 147, 57, 0.26) 100%),linear-gradient(0deg, rgba(247, 80, 105, 0.26) 0%, rgba(247, 80, 105, 0.26) 1%,rgba(223, 84, 119, 0.26) 1%, rgba(223, 84, 119, 0.26) 11%,rgba(199, 88, 133, 0.26) 11%, rgba(199, 88, 133, 0.26) 46%,rgba(174, 91, 147, 0.26) 46%, rgba(174, 91, 147, 0.26) 54%,rgba(150, 95, 161, 0.26) 54%, rgba(150, 95, 161, 0.26) 73%,rgba(126, 99, 175, 0.26) 73%, rgba(126, 99, 175, 0.26) 100%),linear-gradient(90deg, rgb(74, 13, 231) 0%, rgb(74, 13, 231) 18%,rgb(96, 13, 230) 18%, rgb(96, 13, 230) 21%,rgb(119, 13, 229) 21%, rgb(119, 13, 229) 26%,rgb(141, 13, 228) 26%, rgb(141, 13, 228) 32%,rgb(163, 12, 226) 32%, rgb(163, 12, 226) 44%,rgb(185, 12, 225) 44%, rgb(185, 12, 225) 56%,rgb(208, 12, 224) 56%, rgb(208, 12, 224) 64%,rgb(230, 12, 223) 64%, rgb(230, 12, 223) 100%)
}

Usando Brushes

TabView

Podemos tener pestañas usando Shell. Sin embargo, ¿qué sucede si queremos tener pestañas anidadas dentro de una sección específica (Ejemplo: dentro de un Grid)?, ¿qué pasa si queremos personalizar completamente cada pestaña?. En estos casos, necesitaríamos un Custom Renderer, hasta ahora …

TabView es una forma de mostrar un conjunto de pestañas, útil para mostrar varios contenidos al tiempo que ofrece al usuario la capacidad de personalizar todo.

Las características principales de este nuevo control son:

  • Posibilidad de personalizar cada pestaña, el tabstrip y el contenido.
  • Poder personalizar transiciones entre pestañas, etc.
  • Pestañas cíclicas.
  • Lazy loading.
  • Soporte a Badge.
  • Etc.

Veamos algunos ejemplos.

Pestañas básicas

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

Pestañas básicas

Usando TabItemsSource

Se pueden tener Tabs desde una fuente de información directamente:

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

TabItemsSource

Pestañas personalizadas

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

Personalizar pestañas

Pestañas cíclicas

<TabView
    IsCyclical="True">
    ...
</TabView>

Pestañas cíclicas

Se pueden personalizar transiciones, animaciones, estados visuales, etc.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

Personaliza animaciones, transiciones, etc

AppBar

Una AppBar consiste en una barra de navegación y potencialmente otras vistas además de poder exponer una o más acciones.

El principal beneficio de usar AppBar son las opciones de personalización como:

  • Altura de barra personalizada.
  • Incluir cualquier contenido sin restricciones ni limitaciones (márgenes, tamaño, etc.).
  • Barra transparente.
  • Etc.

Veamos un ejemplo:

<AppBar 
     BarHeight="120"
     BarBackgroundColor="Transparent">
     <AppBar.TitleView>
     ...
     </AppBar.TitleView>
</AppBar>

Personalizar la barra de navegación

Roadmap

Se continuarán lanzando nuevas releases cada 6 semanas (como hasta ahora). De modo que:

  • Xamarin.Forms 4.7 llegará en Junio 2020
  • Xamarin.Forms 4.8 llegará en Agosto de 2020
  • Xamarin.Forms 4.9 llegará en Septiembre 2020

[Xamarin.Forms] App Themes

Temas

Los dispositivos móviles incluyen la opción de usar un tema claro u oscuro a nivel de sistema operativo. Las aplicaciones pueden detectar y responder al cambio del tema del sistema.

NOTA: El tema del sistema puede cambiar por diversos motivos dependiendo de la la configuración del dispositivo. Además de la elección explícita por parte del usuario, puede cambiar en base a factores ambientales como un nivel bajo de luz.

En Xamarin.Forms 4.6 se añade AppTheme. Ahora las aplicaciones de Xamarin. Forms pueden responder a los cambios de tema usado por el sistema y en este artículo vamos a ver como hacerlo.

Definir y utilizar recursos por tema

Utilizando AppThemeColor podemos definir un color para los temas del sistema Light y Dark.

<AppThemeColor x:Key="ThemeColor" Light="DarkRed" Dark="LightPink" />

Podemos usar el color como hemos estado haciendo hasta ahora:

<Label 
     Text="AppTheme Color"
     TextColor="{DynamicResource ThemeColor}"/>

De forma automática se aplicará el color rojo oscuro usando el tema claro, y rosa claro al usar el oscuro. También podemos definir un AppThemeColor usando estilos utilizando la extensión de marcado OnAppTheme:

<Style x:Key="OSThemeStyle" TargetType="Label" >
     <Setter Property="TextColor" Value="{OnAppTheme Black, Light=DarkRed, Dark=LightPink}" />
</Style>

Aplicamos el estilo:

<Label 
     Text="Using Style"
     Style="{DynamicResource OSThemeStyle}"/>

Detectar el tema actual usado por el sistema

Podemos saber el tema usado por el sistema utilizando la propiedad Application.RequestedTheme:

OSAppTheme currentTheme = Application.Current.RequestedTheme;

Obtenemos un valor de tipo enumeración OSAppTheme. La enumeración puede tener uno de los siguientes valores:

  • Unspecified, que indica que el dispositivo está utilizando un tema no especificado.
  • Light, que indica que el dispositivo está usando el tema claro.
  • Dark, que indica que el dispositivo está usando el tema oscuro.

Reaccionar al cambio de tema

El tema usado por el puede cambiar y desde nuestra aplicación, podemos detectar el cambio. Para detectar el cambio de tema podemos usar el evento Application.RequestedThemeChanged:

Application.Current.RequestedThemeChanged += (s, a) =>
{
     AppTheme requestedTheme = a.RequestedTheme;
};

Puedes encontrar un ejemplo de AppTheme en GitHub:

Ver GitHub

¿Qué te parece esta nueva API?. Recuerda, puedes dejar un comentario con cualquier pregunta o duda!.

Más información