[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

Anuncio publicitario