Freigeben über

Xamarin.Forms Shapes: Pfad

  • Artikel

Die Path Klasse wird von der Shape Klasse abgeleitet und kann verwendet werden, um Kurven und komplexe Formen zu zeichnen. Diese Kurven und Formen werden häufig mithilfe von Geometry-Objekten beschrieben. Informationen zu den Eigenschaften, die die Path Klasse von der Shape Klasse erbt, finden Sie unter Xamarin.Forms Shapes.

Path definiert die folgenden Eigenschaften:

  • Data, vom Typ Geometry, gibt die zu zeichnende Form an.
  • RenderTransform, vom Typ Transform, stellt die Transformation dar, die auf die Geometrie eines Pfads angewendet wird, bevor dieser gezeichnet wird.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Weitere Informationen zu Transformationen finden Sie unter Xamarin.Forms "Pfadtransformationen".

Erstellen eines Pfads

Um einen Pfad zu zeichnen, erstellen Sie ein Path-Objekt, und legen Sie dessen Data-Eigenschaft fest. Es gibt zwei Techniken zum Festlegen der Data-Eigenschaft:

  • Mit der Pfadmarkupsyntax können Sie einen Zeichenfolgenwert für Data in XAML festlegen. Bei diesem Ansatz verwendet der Path.Data-Wert ein Serialisierungsformat für Grafiken. Normalerweise bearbeiten Sie diesen Zeichenfolgenwert nach der Erstellung nicht manuell. Stattdessen verwenden Sie Designtools, um die Daten zu bearbeiten und als Zeichenfolgenfragment zu exportieren, das von der Data-Eigenschaft genutzt werden kann.
  • Sie können die Eigenschaft Data auf ein Geometry-Objekt festlegen. Dies kann ein bestimmtes Geometry-Objekt oder eine GeometryGroup sein, die als ein Container fungiert, der mehrere Geometrieobjekte zu einem einzelnen Objekt kombinieren kann.

Erstellen eines Pfads mit Pfadmarkupsyntax

Das folgende XAML-Beispiel zeigt, wie Sie ein Dreieck mithilfe der Pfadmarkupsyntax zeichnen:

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

Die Zeichenfolge Data beginnt mit dem Befehl zum Verschieben, angegeben durch M, der einen absoluten Startpunkt für den Pfad festlegt. L ist der Befehlszeilenbefehl, der eine gerade Linie vom Startpunkt zum angegebenen Endpunkt erstellt. Z ist der Befehl zum Schließen, der eine Linie erstellt, die den aktuellen Punkt mit dem Startpunkt verbindet. Das Ergebnis ist ein Dreieck:

Pfaddreieck

Weitere Informationen zur Pfadmarkupsyntax finden Sie unter Xamarin.Forms Pfadmarkierungssyntax.

Erstellen eines Pfads mit Geometry-Objekten

Kurven und Formen können mithilfe von Geometry-Objekten beschrieben werden, die zum Festlegen der Data-Eigenschaft des Path-Objekts verwendet werden. Es gibt eine Vielzahl von Geometry-Objekten, aus denen Sie auswählen können. Die Klassen EllipseGeometry, LineGeometry und RectangleGeometry beschreiben relativ einfache Formen. Verwenden Sie eine PathGeometry, um komplexere Formen oder Kurven zu erstellen.

PathGeometry-Objekte bestehen aus einem oder mehreren PathFigure-Objekten. Jedes PathFigure-Objekt stellt eine andere Form dar. Jedes PathFigure-Objekt besteht wiederum selbst aus einem oder mehreren PathSegment-Objekten, wobei jedes Objekt einen Verbindungsteil der Form repräsentiert. Die Segmenttypen umfassen die Klassen LineSegment, BezierSegment und ArcSegment.

Das folgende XAML-Beispiel zeigt, wie Sie ein Dreieck mithilfe eines PathGeometry-Objekts zeichnen:

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

In diesem Beispiel ist der Startpunkt des Dreiecks (10.100). Ein Liniensegment wird von (10.100) nach (100.100) und von (100.100) nach (100.50) gezeichnet. Dann werden das erste und das letzte Segment der Figur verbunden, da die Eigenschaft PathFigure.IsClosed auf true festgelegt ist. Das Ergebnis ist ein Dreieck:

Pfaddreieck

Weitere Informationen zu Geometrien finden Sie unter Xamarin.Forms Geometrien.