Xamarin.Forms Formas: ruta de acceso

  • Artículo

Download SampleDescargar el ejemplo

La clase Path deriva de la clase Shape, y se puede usar para dibujar curvas y formas complejas. Estas curvas y formas suelen describirse mediante los objetos Geometry. Para obtener información sobre las propiedades que hereda la clase Path de la clase Shape, consulte Xamarin.Forms Shapes.

Path define las siguientes propiedades:

  • Data, de tipo Geometry, que especifica la forma que se va a dibujar.
  • RenderTransform, de tipo Transform, que representa la transformación que se aplica a la geometría de un trazado antes de dibujarlo.

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.

Para obtener más información sobre las transformaciones, consulte Xamarin.Forms Transformaciones de ruta de acceso.

Crear un trazado

Para dibujar un trazado, crea un objeto Path y establece su propiedad Data. Hay dos técnicas para establecer la propiedad Data:

  • Puedes establecer un valor de cadena para Data en XAML usando la sintaxis de marcado de trazados. Con este enfoque, el valor Path.Data consume un formato de serialización para gráficos. Normalmente, este valor de cadena no se edita manualmente después de crearse. En su lugar, se usan herramientas de diseño para manipular los datos y exportarlos como un fragmento de cadena que la propiedad Data consuma.
  • Puedes establecer la propiedad Data en un objeto Geometry. Puede tratarse de un objeto Geometry específico o de un GeometryGroup que actúa como un contenedor que puede combinar varios objetos geométricos en un solo objeto.

Crear un trazado con sintaxis de marcado de trazados

En el siguiente ejemplo de XAML se muestra cómo dibujar un triángulo usando la sintaxis de marcado de trazados:

<Path Data="M 10,100 L 100,100 100,50Z"
      Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start" />

La cadena Data empieza con el comando de movimiento, indicado por M, que establece un punto de inicio absoluto para el trazado. L es el comando de línea, que crea una línea recta desde el punto inicial hasta el punto final especificado. Z es el comando de cierre, que crea una línea que conecta el punto actual con el punto inicial. El resultado es un triángulo:

Path triangle

Para obtener más información sobre la sintaxis de marcado de ruta de acceso, consulte Xamarin.FormsSintaxis de marcado de ruta de acceso.

Crear un trazado con objetos Geometry

Las curvas y formas se pueden describir mediante objetos Geometry, que se usan para establecer la propiedad Data del objeto Path. Hay una variedad de objetos Geometry entre los que puede elegir. Las clases EllipseGeometry, LineGeometry y RectangleGeometry describen formas relativamente sencillas. Para crear formas más complejas o crear curvas, use un PathGeometry.

PathGeometry los objetos se componen de uno o varios objetos PathFigure. Cada objeto PathFigure representa una forma diferente. Cada objeto PathFigure consta, él mismo, de uno o más objetos PathSegment, cada uno de los cuales representa una porción conectada de la forma. En los tipos de segmentos se incluyen las siguientes clases LineSegment, BezierSegment y ArcSegment.

En el siguiente ejemplo de XAML se muestra cómo dibujar un triángulo mediante un objeto PathGeometry.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True"
                                StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="100,100" />
                                <LineSegment Point="100,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

En este ejemplo, el punto inicial del triángulo es (10,100). Un segmento de línea se dibuja desde (10,100) hasta (100,100) y desde (100,100) hasta (100,50). Después, el primer y último segmento de la figura se conectan, ya que la propiedad PathFigure.IsClosed está establecida en true. El resultado es un triángulo:

Path triangle

Para obtener más información sobre las geometrías, consulte Xamarin.FormsGeometrías.