Formas de Xamarin.Forms

  • Artículo

Un Shape es un tipo de View que le permite dibujar una forma en la pantalla. Shape Los objetos se pueden usar dentro de las clases de diseño y en la mayoría de los controles, ya que la clase Shape deriva de la clase View.

Xamarin.Forms Shapes está disponible en el espacio de nombres Xamarin.Forms.Shapes en iOS, Android, macOS, la Plataforma universal de Windows (UWP) y Windows Presentation Foundation (WPF).

Shape define las siguientes propiedades:

  • Aspect, de tipo Stretch, describe cómo la forma rellena su espacio asignado. El valor predeterminado de esta propiedad es Stretch.None.
  • Fill, de tipo Brush, indica el pincel usado para pintar el interior de la forma.
  • Stroke, de tipo Brush, indica el pincel usado para pintar el contorno de la forma.
  • StrokeDashArray, de tipo DoubleCollection, que representa una colección de valores double que indican el patrón de guiones y espacios que se usan para describir una forma.
  • StrokeDashOffset, de tipo double, especifica la distancia dentro del patrón de guión donde empieza un guión. El valor predeterminado de esta propiedad es 0.0.
  • StrokeLineCap, de tipo PenLineCap, describe la forma del final de una línea o un segmento. El valor predeterminado de esta propiedad es PenLineCap.Flat.
  • StrokeLineJoin, de tipo PenLineJoin, especifica el tipo de combinación que se usa en los vértices de una forma. El valor predeterminado de esta propiedad es PenLineJoin.Miter.
  • StrokeMiterLimit, de tipo double, especifica el límite en la relación de la longitud angular a la mitad de StrokeThickness de una forma. El valor predeterminado de esta propiedad es 10.0.
  • StrokeThickness, de tipo double, indica el ancho del contorno de la forma. El valor predeterminado de esta propiedad es 1.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.

Xamarin.Forms define una serie de objetos que derivan de la clase Shape. Son Ellipse, Line, Path, Polygon, Polyline y Rectangle.

Pintar formas

Los objetos Brush se usan para pintar los elementos Stroke y Fill de formas.

<Ellipse Fill="DarkBlue"
         Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Start" />

En el ejemplo siguiente se especifican el trazo y el relleno de un elemento Ellipse.

Paint shapes

Importante

Brush los objetos usan un convertidor de tipos que permite que se especifiquen valores Color para la propiedad Stroke.

Si no especificas un objeto Brush para Stroke, o si estableces StrokeThickness en 0, el borde alrededor de la forma no se dibuja.

Para más información sobre los objetos de Brush, consulte Pinceles de Xamarin.Forms. Para más información sobre los valores de Color válidos, consulte Colores en Xamarin.Forms.

Extender formas

Los objetos Shape tienen una propiedad Aspect, de tipo Stretch. Esta propiedad determina cómo se extiende el contenido de un objeto Shape para rellenar el espacio de diseño del objeto Shape. El espacio de diseño de un objeto Shape es la cantidad de espacio que el Shape tiene asignado por el sistema de diseño de Xamarin.Forms, ya sea por una configuración explícita de WidthRequest y HeightRequest o por sus configuraciones de HorizontalOptions y VerticalOptions.

La enumeración Stretch define los miembros siguientes:

  • None, que indica que el contenido conserva su tamaño original. Se trata del valor predeterminado de la propiedad Shape.Aspect.
  • Fill que indica que el contenido cambia de tamaño para rellenar las dimensiones de destino. No se mantiene la relación de aspecto.
  • Uniform, que indica que el contenido cambia de tamaño para ajustarse a las dimensiones de destino, a la vez que conserva la relación de aspecto.
  • UniformToFill que indica que el contenido cambia de tamaño para rellenar las dimensiones de destino, conservando a la vez la relación de aspecto. Si la relación de aspecto del rectángulo de destino no coincide con el de origen, el contenido de origen se recorta para ajustarse a las dimensiones de destino.

El ejemplo de XAML siguiente muestra cómo establecer la propiedad Aspect:

<Path Aspect="Uniform"
      Stroke="Yellow"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>

En este ejemplo, un objeto Path dibuja un corazón. Las propiedades Path y HeightRequest del objeto WidthRequest se establecen en 100 unidades independientes del dispositivo y su propiedad Aspect se establece en Uniform. Como resultado, el contenido del objeto se cambia de tamaño para ajustarse a las dimensiones de destino, a la vez que se conserva la relación de aspecto:

Stretch shapes

Dibujar formas discontinuas

Shape los objetos tienen una propiedad StrokeDashArray, de tipo DoubleCollection. Esta propiedad representa una colección de valores double que indican el patrón de guiones y espacios que se usan para describir una forma. Una colección DoubleCollection es una colección ObservableCollection de valores double. Cada double en la colección especifica la longitud de un guión o un espacio. El primer elemento de la colección, que se encuentra en el índice 0, especifica la longitud de un guión. El segundo elemento de la colección, que se encuentra en el índice 1, especifica la longitud de un espacio. Por lo tanto, los objetos con un valor de índice par especifican guiones, mientras que los objetos con un valor de índice impar especifican espacios.

Los objetos Shape también tienen una propiedad StrokeDashOffset, de tipo double, que especifica la distancia dentro del patrón de guión donde empieza un guión. Si no se establece esta propiedad, Shape tendrá un contorno sólido.

Las formas discontinuas se pueden dibujar estableciendo las propiedades StrokeDashArray y StrokeDashOffset. La propiedad StrokeDashArray debe establecerse en uno o varios valores double, con cada par delimitado por una sola coma o uno o varios espacios. Por ejemplo, "0.5 1.0" y "0.5,1.0" son válidos.

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

<Rectangle Fill="DarkBlue"
           Stroke="Red"
           StrokeThickness="4"
           StrokeDashArray="1,1"
           StrokeDashOffset="6"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

En este ejemplo, se dibuja un rectángulo relleno con un trazo discontinuo:

Dashed rectangle

Control de finales de línea

Una línea tiene tres partes: extremo inicial, cuerpo de línea y extremo final. Los extremos inicial y final describen la forma al principio y al final de una línea o segmento.

Los objetos Shape tienen una propiedad StrokeLineCap, de tipo PenLineCap, que describe la forma al principio y al final de una línea o segmento. La enumeración PenLineCap define los miembros siguientes:

  • Flat, representa un extremo que no se extiende más allá del último punto de la línea. Esto es comparable a ningún extremo de línea y es el valor predeterminado de la propiedad StrokeLineCap.
  • Square, que representa un rectángulo que tiene ua altura igual al grosor de la línea y una longitud igual a la mitad del grosor de la línea.
  • Round, que representa un semicírculo que tiene un diámetro igual al grosor de la línea.

Importante

La propiedad StrokeLineCap no tiene ningún efecto si se establece en una forma que no tiene puntos iniciales o finales. Por ejemplo, esta propiedad no tiene ningún efecto si la estableces en Ellipse o Rectangle.

El ejemplo de XAML siguiente muestra cómo establecer la propiedad StrokeLineCap:

<Line X1="0"
      Y1="20"
      X2="300"
      Y2="20"
      StrokeLineCap="Round"
      Stroke="Red"
      StrokeThickness="12" />

En este ejemplo, la línea roja se redondea al principio y al final de la línea:

Line caps

Control de combinaciones de línea

Los objetos Shape tienen una propiedad StrokeLineJoin, de tipo PenLineJoin, que especifica el tipo de combinación que se usa en los vértices de la forma. La enumeración PenLineJoin define los miembros siguientes:

  • Miter, que representa vértices angulares normales. Se trata del valor predeterminado de la propiedad StrokeLineJoin.
  • Bevel, que representa vértices biselados.
  • Round, que representa vértices redondeados.

Nota:

Cuando la propiedad StrokeLineJoin se establece en Miter, la propiedad StrokeMiterLimit se puede establecer en double para limitar la longitud angular de las uniones de línea en la forma.

El ejemplo de XAML siguiente muestra cómo establecer la propiedad StrokeLineJoin:

<Polyline Points="20 20,250 50,20 120"
          Stroke="DarkBlue"
          StrokeThickness="20"
          StrokeLineJoin="Round" />

En este ejemplo, la polilínea azul oscura tiene combinaciones redondeadas en sus vértices:

Line joins