Compartir vía


Formas de Xamarin.Forms: Rectángulo

La clase Rectangle deriva de la clase Shape y se puede usar para dibujar rectángulos y cuadrados. Para obtener información sobre las propiedades que hereda la clase Rectangle de la clase Shape, consulte Xamarin.Forms Shapes.

Rectangle define las siguientes propiedades:

  • RadiusX, de tipo double, que es el radio del eje X usado para redondear las esquinas del rectángulo. El valor predeterminado de esta propiedad es 0.0.
  • RadiusY, de tipo double, que es el radio del eje Y que se usa para redondear las esquinas del rectángulo. El valor predeterminado de esta propiedad es 0.0.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

La clase Rectangle establece la propiedad Aspect, heredada de la clase Shape, en Stretch.Fill. Para obtener más información acerca de la propiedad Aspect, consulta Stretch shapes.

Creación de un rectángulo

Para dibujar un rectángulo, crea un objeto Rectangle y establece sus propiedades WidthRequest y HeightRequest. Para pintar el interior del rectángulo, establece su propiedad Fill en un objeto derivado de Brush. Para asignar al rectángulo un contorno, establece su propiedad Stroke en un objeto derivado de Brush. La propiedad StrokeThickness especifica el grosor del contorno del rectángulo. Para más información sobre los objetos de Brush, consulte Pinceles de Xamarin.Forms.

Para proporcionar esquinas redondeadas al rectángulo, especifica las propiedades RadiusX y RadiusY. Estas propiedades establecen los radios del eje X y del eje Y se usan para redondear las esquinas del rectángulo.

Para dibujar un cuadrado, haz que las propiedades WidthRequest y HeightRequest del objeto Rectangle sean iguales.

En el ejemplo XAML siguiente se muestra cómo dibujar un rectángulo rellenado:

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

En este ejemplo, se dibuja un rectángulo de color rojo con dimensiones 150x50 (unidades independientes del dispositivo):

Rectángulo rellenado

En el ejemplo XAML siguiente se muestra cómo dibujar un rectángulo relleno, con esquinas redondeadas:

<Rectangle Fill="Blue"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10"
           WidthRequest="200"
           HeightRequest="100"
           HorizontalOptions="Start" />

En este ejemplo, se dibuja un rectángulo relleno de color azul con esquinas redondeadas:

Rectángulo con esquinas redondeadas

Para obtener información sobre cómo dibujar un rectángulo discontinuo, consulta Dibujar formas discontinuas.