Xamarin.Forms ColocarXamarin.Forms Shapes

API de versión preliminar

Un Shape es un tipo de View que permite dibujar una forma en la pantalla.A Shape is a type of View that enables you to draw a shape to the screen. Shape los objetos se pueden usar dentro de las clases de diseño y la mayoría de los controles, ya que la Shape clase se deriva de la View clase.Shape objects can be used inside layout classes and most controls, because the Shape class derives from the View class.

Xamarin.Forms Las formas están disponibles en el Xamarin.Forms.Shapes espacio de nombres de iOS, Android, MacOS, el plataforma universal de Windows (UWP) y el Windows Presentation Foundation (WPF).Xamarin.Forms Shapes is available in the Xamarin.Forms.Shapes namespace on iOS, Android, macOS, the Universal Windows Platform (UWP), and the Windows Presentation Foundation (WPF).

Importante

Xamarin.Forms Las formas actualmente son experimentales y solo se pueden usar si se establece la Shapes_Experimental marca.Xamarin.Forms Shapes is currently experimental and can only be used by setting the Shapes_Experimental flag. Para más información, vea Marcas experimentales.For more information, see Experimental Flags.

Shape define las siguientes propiedades:Shape defines the following properties:

  • Aspect, de tipo Stretch , describe cómo la forma rellena su espacio asignado.Aspect, of type Stretch, describes how the shape fills its allocated space. El valor predeterminado de esta propiedad es Stretch.None.The default value of this property is Stretch.None.
  • Fill, de tipo Brush , indica el pincel utilizado para pintar el interior de la forma.Fill, of type Brush, indicates the brush used to paint the shape's interior.
  • Stroke, de tipo Brush , indica el pincel que se usa para pintar el contorno de la forma.Stroke, of type Brush, indicates the brush used to paint the shape's outline.
  • StrokeDashArray, de tipo DoubleCollection , que representa una colección de double valores que indican el modelo de guiones y espacios que se usan para esquematizar una forma.StrokeDashArray, of type DoubleCollection, which represents a collection of double values that indicate the pattern of dashes and gaps that are used to outline a shape.
  • StrokeDashOffset, de tipo double , especifica la distancia dentro del modelo de guiones donde comienza un guión.StrokeDashOffset, of type double, specifies the distance within the dash pattern where a dash begins. El valor predeterminado de esta propiedad es 0,0.The default value of this property is 0.0.
  • StrokeLineCap, de tipo PenLineCap , describe la forma al principio y al final de una línea o segmento.StrokeLineCap, of type PenLineCap, describes the shape at the start and end of a line or segment. El valor predeterminado de esta propiedad es PenLineCap.Flat.The default value of this property is PenLineCap.Flat.
  • StrokeLineJoin, de tipo PenLineJoin , especifica el tipo de combinación que se usa en los vértices de una forma.StrokeLineJoin, of type PenLineJoin, specifies the type of join that is used at the vertices of a shape. El valor predeterminado de esta propiedad es PenLineJoin.Miter.The default value of this property is PenLineJoin.Miter.
  • StrokeMiterLimit, de tipo double , especifica el límite en la proporción de la longitud del ángulo en la mitad StrokeThickness de una forma.StrokeMiterLimit, of type double, specifies the limit on the ratio of the miter length to half the StrokeThickness of a shape. El valor predeterminado de esta propiedad es 10,0.The default value of this property is 10.0.
  • StrokeThickness, de tipo double , indica el ancho del contorno de la forma.StrokeThickness, of type double, indicates the width of the shape outline. El valor predeterminado de esta propiedad es 0,0.The default value of this property is 0.0.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Xamarin.Forms define un número de objetos que derivan de la Shape clase.Xamarin.Forms defines a number of objects that derive from the Shape class. Son Ellipse ,, Line Path , Polygon , Polyline y Rectangle .These are Ellipse, Line, Path, Polygon, Polyline, and Rectangle.

Formas de dibujoPaint shapes

Brush los objetos se utilizan para pintar las formas Stroke y Fill :Brush objects are used to paint a shapes's Stroke and Fill:

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

En este ejemplo, se especifican el trazo y el relleno de un Ellipse :In this example, the stroke and fill of an Ellipse are specified:

Formas de dibujoPaint shapes

Importante

Brush los objetos usan un convertidor de tipos que permite Color especificar valores para la Stroke propiedad.Brush objects use a type converter that enables Color values to specified for the Stroke property.

Si no se especifica un Brush objeto para Stroke , o si se establece StrokeThickness en 0, no se dibuja el borde alrededor de la forma.If you don't specify a Brush object for Stroke, or if you set StrokeThickness to 0, then the border around the shape is not drawn.

Para obtener más información sobre los Brush objetos, vea Xamarin.Forms pinceles.For more information about Brush objects, see Xamarin.Forms Brushes. Para obtener más información sobre Color los valores válidos, vea colores Xamarin.Forms en .For more information about valid Color values, see Colors in Xamarin.Forms.

Formas de ajusteStretch shapes

Shape los objetos tienen una Aspect propiedad, de tipo Stretch .Shape objects have an Aspect property, of type Stretch. Esta propiedad determina cómo Shape se ajusta el contenido de un objeto para rellenar el Shape espacio de diseño del objeto.This property determines how a Shape object's contents is stretched to fill the Shape object's layout space. El Shape espacio de diseño de un objeto es la cantidad de espacio que el Shape sistema de diseño asigna a Xamarin.Forms , debido a una WidthRequest configuración explícita y a la HeightRequest HorizontalOptions configuración de y VerticalOptions .A Shape object's layout space is the amount of space the Shape is allocated by the Xamarin.Forms layout system, because of either an explicit WidthRequest and HeightRequest setting or because of its HorizontalOptions and VerticalOptions settings.

La enumeración Stretch define los miembros siguientes:The Stretch enumeration defines the following members:

  • None, que indica que el contenido conserva su tamaño original.None, which indicates that the content preserves its original size. Este es el valor predeterminado de la propiedad Shape.Aspect.This is the default value of the Shape.Aspect property.
  • Fill, que indica que el contenido cambia de tamaño para rellenar las dimensiones de destino.Fill, which indicates that the content is resized to fill the destination dimensions. No se mantiene la relación de aspecto.The aspect ratio is not preserved.
  • Uniform, que indica que se cambia el tamaño del contenido para ajustarse a las dimensiones de destino, a la vez que se conserva la relación de aspecto.Uniform, which indicates that the content is resized to fit the destination dimensions, while preserving the aspect ratio.
  • 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.UniformToFill, indicates that the content is resized to fill the destination dimensions, while preserving the aspect ratio. 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.If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

En el siguiente código XAML se muestra cómo establecer la Aspect propiedad:The following XAML shows how to set the Aspect property:

<Path Aspect="Uniform"
      Stroke="Yellow"
      StrokeThickness="1"
      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.In this example, a Path object draws a heart. Las Path WidthRequest propiedades y del objeto HeightRequest se establecen en unidades independientes del dispositivo 100 y su Aspect propiedad se establece en Uniform .The Path object's WidthRequest and HeightRequest properties are set to 100 device-independent units, and its Aspect property is set to Uniform. Como resultado, se cambia el tamaño del contenido del objeto para ajustarse a las dimensiones de destino, a la vez que se conserva la relación de aspecto:As a result, the object's contents are resized to fit the destination dimensions, while preserving the aspect ratio:

Formas de ajusteStretch shapes

Dibujar formas discontinuasDraw dashed shapes

Shape los objetos tienen una StrokeDashArray propiedad, de tipo DoubleCollection .Shape objects have a StrokeDashArray property, of type DoubleCollection. Esta propiedad representa una colección de double valores que indican el modelo de guiones y espacios que se usan para esquematizar una forma.This property represents a collection of double values that indicate the pattern of dashes and gaps that are used to outline a shape. Un DoubleCollection es ObservableCollection de double valores.A DoubleCollection is an ObservableCollection of double values. Cada double de la colección especifica la longitud de un guión o un espacio.Each double in the collection specifies the length of a dash or gap. El primer elemento de la colección, que se encuentra en el índice 0, especifica la longitud de un guión.The first item in the collection, which is located at index 0, specifies the length of a dash. El segundo elemento de la colección, que se encuentra en el índice 1, especifica la longitud de un intervalo.The second item in the collection, which is located at index 1, specifies the length of a gap. Por lo tanto, los objetos con un valor de índice par especifican guiones, mientras que los objetos con un valor de índice impar especifican huecos.Therefore, objects with an even index value specify dashes, while objects with an odd index value specify gaps.

Shape los objetos también tienen una StrokeDashOffset propiedad, de tipo double , que especifica la distancia dentro del patrón de guiones donde comienza un guión.Shape objects also have a StrokeDashOffset property , of type double, which specifies the distance within the dash pattern where a dash begins. Si no se establece esta propiedad, se producirá Shape un contorno sólido.Failure to set this property will result in the Shape having a solid outline.

Las formas de guiones se pueden dibujar mediante el establecimiento de las StrokeDashArray StrokeDashOffset propiedades y.Dashed shapes can be drawn by setting both the StrokeDashArray and StrokeDashOffset properties. La StrokeDashArray propiedad se debe establecer en uno o más double valores, donde cada par está delimitado por una sola coma y/o uno o varios espacios.The StrokeDashArray property should be set to one or more double values, with each pair delimited by a single comma and/or one or more spaces. Por ejemplo, "0,5 1,0" y "0.5, 1.0" son válidos.For example, "0.5 1.0" and "0.5,1.0" are both valid.

En el siguiente ejemplo de XAML se muestra cómo dibujar un rectángulo discontinuo:The following XAML example shows how to draw a dashed rectangle:

<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:In this example, a filled rectangle with a dashed stroke is drawn:

Rectángulo discontinuoDashed rectangle

Extremos de la línea de controlControl line ends

Una línea tiene tres partes: el extremo inicial, el cuerpo de la línea y el extremo final.A line has three parts: start cap, line body, and end cap. Los extremos inicial y final describen la forma al principio y al final de una línea, o segmento.The start and end caps describe the shape at the start and end of a line, or segment.

Shape los objetos tienen una StrokeLineCap propiedad, de tipo PenLineCap , que describe la forma en el principio y el final de una línea, o segmento.Shape objects have a StrokeLineCap property, of type PenLineCap, that describes the shape at the start and end of a line, or segment. La enumeración PenLineCap define los miembros siguientes:The PenLineCap enumeration defines the following members:

  • Flat, que representa un extremo que no se extiende más allá del último punto de la línea.Flat, which represents a cap that doesn't extend past the last point of the line. Esto es comparable a ningún extremo de línea y es el valor predeterminado de la StrokeLineCap propiedad.This is comparable to no line cap, and is the default value of the StrokeLineCap property.
  • Square, que representa un rectángulo que tiene un alto igual al grosor de la línea y una longitud igual a la mitad del grosor de la línea.Square, which represents a rectangle that has a height equal to the line thickness and a length equal to half the line thickness.
  • Round, que representa un semicírculo que tiene un diámetro igual al grosor de la línea.Round, which represents a semicircle that has a diameter equal to the line thickness.

Importante

La StrokeLineCap propiedad no tiene ningún efecto si se establece en una forma que no tiene ningún punto inicial o final.The StrokeLineCap property has no effect if you set it on a shape that has no start or end points. Por ejemplo, esta propiedad no tiene ningún efecto si se establece en Ellipse , o Rectangle .For example, this property has no effect if you set it on an Ellipse, or Rectangle.

En el siguiente código XAML se muestra cómo establecer la StrokeLineCap propiedad:The following XAML shows how to set the StrokeLineCap property:

<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:In this example, the red line is rounded at the start and end of the line:

Extremos de líneaLine caps

Combinaciones de línea de controlControl line joins

Shape los objetos tienen una StrokeLineJoin propiedad, de tipo PenLineJoin , que especifica el tipo de combinación que se usa en los vértices de la forma.Shape objects have a StrokeLineJoin property, of type PenLineJoin, that specifies the type of join that is used at the vertices of the shape. La enumeración PenLineJoin define los miembros siguientes:The PenLineJoin enumeration defines the following members:

  • Miter, que representa los vértices angulares normales.Miter, which represents regular angular vertices. Este es el valor predeterminado de la propiedad StrokeLineJoin.This is the default value of the StrokeLineJoin property.
  • Bevel, que representa los vértices biselados.Bevel, which represents beveled vertices.
  • Round, que representa los vértices redondeados.Round, which represents rounded vertices.

Nota

Cuando la StrokeLineJoin propiedad está establecida en Miter , la StrokeMiterLimit propiedad se puede establecer en un double para limitar la longitud del inglete de las combinaciones de líneas de la forma.When the StrokeLineJoin property is set to Miter, the StrokeMiterLimit property can be set to a double to limit the miter length of line joins in the shape.

En el siguiente código XAML se muestra cómo establecer la StrokeLineJoin propiedad:The following XAML shows how to set the StrokeLineJoin property:

<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:In this example, the dark blue polyline has rounded joins at its vertices:

Combinaciones de líneasLine joins