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