[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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s