Xamarin.Forms Formas

  • Artículo
  • 6 minutos para leer

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

Xamarin.FormsLas formas están disponibles en el espacio de nombres en Xamarin.Forms.Shapes iOS, Android, macOS, universal Windows Platform (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 utilizado para pintar el interior de la forma.
  • Stroke, de tipo Brush , indica el pincel utilizado para pintar el contorno de la forma.
  • StrokeDashArray, de tipo , que representa una colección de valores que indican el patrón de guiones y espacios que DoubleCollection se usan para describir una double forma.
  • StrokeDashOffset, de tipo double , especifica la distancia dentro del patrón de guion donde comienza un guión. El valor predeterminado de esta propiedad es 0,0.
  • StrokeLineCap, de tipo PenLineCap , describe la forma al principio y al final de una línea o 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 , especifica el límite en la proporción de la longitud del double mitro a la mitad StrokeThickness de la 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 con estilo.

Xamarin.Forms define un número de objetos que derivan de la Shape clase . Estos son Ellipse , , , , y LinePathPolygonPolylineRectangle .

Paint formas

Brush Los objetos se usan para pintar las formas Stroke y Fill :

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

En este ejemplo, se especifican el trazo y el Ellipse relleno de :

Paint formas Paint

Importante

Brush Los objetos usan un convertidor de tipos que Color permite especificar valores para la propiedad Stroke .

Si no especifica un objeto para o si establece en 0, no se dibuja el borde alrededor BrushStroke de la StrokeThickness forma.

Para obtener más información sobre Brush los objetos , vea Xamarin.Forms Brushes . Para obtener más información sobre los valores Color válidos, vea Colors in Xamarin.Forms .

Formas elásticas

Shape Los objetos tienen Aspect una propiedad de tipo Stretch . Esta propiedad determina cómo se extiende el contenido de un objeto Shape para rellenar el espacio de diseño del Shape objeto. El espacio de diseño de un objeto es la cantidad de espacio que asigna el sistema de diseño, ya sea por una configuración explícita y o por su ShapeShape configuración y Xamarin.FormsWidthRequestHeightRequestHorizontalOptionsVerticalOptions .

La enumeración Stretch define los miembros siguientes:

  • None, que indica que el contenido conserva su tamaño original. Este es el valor predeterminado de la propiedad Shape.Aspect.
  • Fill, que indica que se cambia el tamaño del contenido para rellenar las dimensiones de destino. No se mantiene la relación de aspecto.
  • Uniform, que indica que se cambia el tamaño del contenido para ajustarse a las dimensiones de destino, conservando al mismo tiempo la relación de aspecto.
  • UniformToFill, indica que se cambia el tamaño del contenido para rellenar las dimensiones de destino, a la vez que se conserva 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 código XAML siguiente muestra cómo establecer la Aspect propiedad :

<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 Path objeto dibuja un corazón. Las Path propiedades y del objeto se establecen en WidthRequestHeightRequest 100 unidades Aspect independientes del dispositivo y su propiedad se establece en Uniform . Como resultado, se cambia el tamaño del contenido del objeto para ajustarse a las dimensiones de destino, conservando al mismo tiempo la relación de aspecto:

Formas elásticas

Dibujar formas discontinuas

Shape Los objetos tienen StrokeDashArray una propiedad de tipo DoubleCollection . Esta propiedad representa una colección de valores que indican el patrón de guiones y espacios double que se usan para describir una forma. un DoubleCollection es un de ObservableCollectiondouble valores. Cada double de la colección especifica la longitud de un guion o un intervalo. El primer elemento de la colección, que se encuentra en el índice 0, especifica la longitud de un guion. El segundo elemento de la colección, que se encuentra en el índice 1, especifica la longitud de un intervalo. 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.

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

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

En el ejemplo 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:

Línea discontinua del rectángulo

Finales de línea de control

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

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

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

Importante

La StrokeLineCap propiedad no tiene ningún efecto si se establece en una forma que no tiene ningún punto inicial o final. Por ejemplo, esta propiedad no tiene ningún efecto si se establece en Ellipse , o Rectangle .

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

<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:

Límites de línea Límites

Combinaciones de línea de control

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

  • Miter, que representa los vértices angulares normales. Este es el valor predeterminado de la propiedad StrokeLineJoin.
  • Bevel, que representa los vértices biselados.
  • Round, que representa los vértices redondeados.

Nota:

Cuando la propiedad se establece en , la propiedad se puede establecer en para limitar la longitud de los StrokeLineJoinMiterStrokeMiterLimit ingletes de las combinaciones de línea double en la forma.

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

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

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

Combinaciones de línea