Schnellstart: Zeichnen von Formen (Windows Store-Apps mit C#/VB/C++ und XAML)

Erfahren Sie, wie Sie Formen wie Ellipsen, Rechtecke, Polygone und Pfade zeichnen. Die Path-Klasse ist die Methode zum Visualisieren einer recht komplexen vektorbasierten Zeichensprache in einer XAML-Benutzeroberfläche. Beispielsweise können Sie damit Bézierkurven zeichnen.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Siehe:

Einführung

Zwei Sätze von Klassen definieren einen Bereich in der XAML-Benutzeroberfläche: Shape-Klassen und Geometry-Klassen. Der Hauptunterschied zwischen diesen Klassen besteht darin, dass einer Shape ein Pinsel zugeordnet ist und diese auf dem Bildschirm dargestellt werden kann, während eine Geometry einfach einen Bereich definiert und selbst nur dargestellt wird, wenn sie Informationen zu einer anderen UI-Eigenschaft beiträgt. Sie können sich eine Shape als ein UIElement vorstellen, dessen Umrandung durch eine Geometry definiert ist. In diesem Thema werden hauptsächlich die Shape-Klassen behandelt.

Die Shape-Klassen sind Line, Ellipse, Rectangle, Polygon, Polyline und Path. Path ist interessant, da Sie damit beliebige Geometrien definieren können, und die Geometry-Klasse stellt eine Möglichkeit zum Definieren der Teile eines Path dar.

Szenarien für Formen

Das gängigste Szenario für die Verwendung einer Form ist die XAML-Definition von Elementen der Benutzeroberfläche mit einer Vorlage für ein UI-Element. Insbesondere die Rectangle wird häufig in Steuerelementvorlagen verwendet, da sie zum Anzeigen einer sichtbaren Fokusanzeige für fokussierbare Steuerelemente dient, wenn sich das Steuerelement in einem "fokussierten" Ansichtszustand befindet.

Das zweithäufigste Szenario für eine Form dient zum Darstellen einer Vektorgrafik, die in einem anderen Formt erstellt wurde und als Vektordefinitions- und serialisierungsformat exportiert wurde, das in XAML verarbeitet werden kann. Dieses Format wird zum Wert der Path.Data-Eigenschaft. Das Path-Element kann dann in einer XAML-UI platziert werden, und die Vektorgrafik kann genau wie Steuerelemente, Panels und andere Elemente im Layout verwendet werden.

Füllungen und Striche für Formen

Damit eine Shape auf der App-Canvas gerendert wird, müssen Sie ihr einen Brush zuweisen. Legen Sie die Fill-Eigenschaft der Shape auf den gewünschten Brush fest. Weitere Informationen zu Pinseln finden Sie unter Schnellstart: Verwenden von Pinseln.

Eine Shape kann auch einen Stroke aufweisen. Dies ist eine Linie, die um den Rand der Form gezeichnet wird. Ein Stroke erfordert auch einen Brush. Dieser definiert die Darstellung und sollten einen Wert ungleich 0 für StrokeThickness aufweisen. StrokeThickness ist eine Eigenschaft, die die Stärke des Rands um die Form definiert. Falls Sie keinen Brush-Wert für Stroke angeben oder StrokeThickness auf 0 festlegen, wird kein Rahmen um die Form gezeichnet.

Ellipse

Eine Ellipse ist eine Form mit einem kurvenförmigen Rand. Zum Erstellen einer einfachen Ellipse geben Sie Width, Height und einen Brush für Fill an.

Das nächste Beispiel erstellt eine Ellipse mit einer Width von 200 und einer Height von 200. Sie verwendet einen SolidColorBrush mit der Farbe SteelBlue als Fill.


<Ellipse Fill="SteelBlue" Height="200" Width="200" />

Hier ist die gerenderte Ellipse.

Eine gerenderte Ellipse

In diesem Fall ist die Ellipse das, was die meisten als einen Kreis bezeichnen würden. So werden auch Kreisformen in XAML definiert: Verwenden Sie einfach eine Ellipse mit gleicher Width und Height.

Wenn eine Ellipse in einem UI-Layout positioniert wird, wird davon ausgegangen, dass ihre Größe einem Rechteck dieser Width und Height entspricht. Der Bereich außerhalb des Rands weist kein Rendering auf, sondern gehört noch zur Größe des Layoutschlitzes.

Eine Gruppe von sechs Ellipse-Elementen ist Teil der Steuerelementvorlage für das ProgressRing-Steuerelement, und zwei konzentrische Ellipse-Elemente sind Teil einer RadioButton.

Rechteck

Ein Rectangle ist eine vierseitige Form, bei der die gegenüberliegenden Seiten gleich sind. Zum Erstellen eines einfachen Rectangle geben Sie eine Width, eine Height und einen Wert für Fill an.

Sie können auch die Ecken eines Rectangle abrunden. Zum Erstellen abgerundeter Ecken, geben Sie einen Wert für die RadiusX-Eigenschaft und die RadiusY-Eigenschaft an. Diese Eigenschaften geben die x-Achse und die y-Achse einer Ellipse an, die die Kurven der Ecken angibt. Der zugelassene Maximalwert für RadiusX ist die Width geteilt durch zwei und für RadiusY die Height geteilt durch zwei.

Das nächste Beispiel erstellt ein Rectangle mit einer Width von 200 und einer Height von 100. Dabei werden ein Blue-Wert von SolidColorBrush als Fill und ein Black-Wert von SolidColorBrush für den Stroke verwendet. Wir legen die StrokeThickness auf 3 fest. Die RadiusX-Eigenschaft legen wir auf 50 und die RadiusY-Eigenschaft auf 10 fest. Damit erhält das Rectangle abgerundete Ecken.


<Rectangle Fill="Blue"
           Width="200"
           Height="100"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10" />

Hier ist das gerenderte Rectangle.

Ein gerendertes Rechteck

Tipp  In einigen UI-Szenarien ist die Verwendung eines Rectangle anstelle eines Border möglicherweise angemessener. Wenn Sie eine rechteckige Form um anderen Inhalt zeichnen möchten, ist Border besser geeignet. Rahmen können andere Elemente enthalten, und ihre Größe passt sich automatisch an den Inhalt an. Dagegen sind die Breite und Höhe von Rectangle-Elementen auf bestimmte Werte festgelegt. Die Ecken eines Border können durch Festlegen der CornerRadius-Eigenschaft ebenfalls abgerundet werden.

Andererseits ist ein Rectangle wahrscheinlich eine bessere Wahl für die Steuerelementzusammensetzung. Eine Rectangle-Form wird in vielen Steuerelementvorlagen verwendet, da sie als "FocusVisual"-Teil für fokussierbare Steuerelemente verwendet wird. Befindet sich das Steuerelement in einem "fokussierten" Ansichtszustand, wird dieses Rechteck sichtbar gemacht; in anderen Zuständen ist es ausgeblendet.

Polygon

Ein Polygon ist eine Form, deren Grenze durch eine beliebige Anzahl von Punkten angegeben wird. Die Grenze wir erstellt, indem eine Linie von einem Punkt zum nächsten gezeichnet wird, bis der letzte Punkt wieder mit dem ersten abschließt. Die Points-Eigenschaft definiert die Auflistung von Punkten, die zusammen die Grenze ergeben. In XAML definieren Sie die Punkte mit einer durch Kommas getrennten Liste. Verwenden Sie im CodeBehind eine PointCollection, um die Punkte zu definieren, und fügen Sie der Auflistung jeden einzelnen Punkt als Point-Wert hinzu.

Die einzelnen Punkte müssen nicht explizit so deklariert werden, dass der Anfangs- und der Endpunkt im gleichen Point-Wert angegeben werden. Die Renderinglogik für ein Polygon geht davon aus, dass Sie eine geschlossene Form definieren und verbindet den Anfangspunkt implizit mit dem Endpunkt.

Das nächste Beispiel erstellt ein Polygon mit 4 Punkten bei (10,200), (60,140), (130,140) und (180,200). Es verwendet einen LightBlue-Wert von SolidColorBrush für die Fill; ein Stroke-Wert ist nicht vorhanden, sodass keine Umrandung erstellt wird.


<Polygon Fill="LightBlue"
         Points="10,200,60,140,130,140,180,200" />

Hier ist das gerenderte Polygon.

Ein gerendertes Polygon

Ein Point-Wert wird in XAML übrigens oft als Typ für andere Szenarien als das Deklarieren der Vertizes von Formen verwendet. Ein Point ist beispielsweise Teil der Ereignisdaten für Fingereingabeereignisse, damit Sie ermitteln können, wo genau in Koordinatenbereich die Fingereingabeaktion stattgefunden hat. Weitere Informationen zu Point und zur Verwendung in XAML oder Code finden Sie im API reference topic for Point.

Linie

Eine Line ist eine einfache Verbindung zweier Punkte in einem Koordinatenbereich. Eine Line ignoriert alle Fill-Werte, da sie keinen Innenbereich hat. Geben Sie bei einer Line Werte für die Eigenschaften Stroke und StrokeThickness an, da die Line andernfalls nicht gerendert werden kann.

Um eine Line-Form anzugeben, werden keine Point-Werte verwendet. Stattdessen werden einzelne Double-Werte für X1, Y1, X2 und Y2 verwendet. Dadurch wird das Markup für horizontale oder vertikale Linien minimiert. Beispielsweise definiert <Line Stroke="Red" X2="400"/> eine horizontale Linie mit einer Länge von 400 Pixeln. Die anderen X,Y-Eigenschaften sind standardmäßig 0. Mit diesem XAML wird daher in Punkten eine Linie von (0,0) bis (400,0) gezeichnet. Anschließend können Sie eine TranslateTransform zum Verschieben der gesamten Line verwenden, wenn sie an einem Punkt als (0,0) beginnen soll.

Polyline

Eine Polyline ähnelt einem Polygon, da bei beiden die Grenze der Form durch eine Reihe von Punkten definiert wird. Bei einer Polyline wird jedoch der letzte Punkt nicht mit dem ersten verbunden.

Hinweis   Sie können zwar explizit in Points einen identischen Anfangs- und Endpunkt für Polyline festlegen. In diesem Fall wäre jedoch wahrscheinlich die Verwendung eines Polygon angebracht.

Wenn Sie die Fill einer Polyline angegeben, füllt Fill den Innenraum der Form. Dies gilt auch, wenn der Anfangs- und der Endpunkt der für die Polyline festgelegten Points keine Überschneidungen aufweisen. Wenn Sie keine Fill angeben, ähnelt die Polyline dem Rendering für mehrere einzelne Line-Elemente, bei denen sich die Anfangs- und Endpunkte aufeinander folgender Linien schneiden.

Wie bei einem Polygon definiert die Points-Eigenschaft die Auflistung von Punkten, die zusammen die Grenze ergeben. In XAML definieren Sie die Punkte mit einer durch Kommas getrennten Liste. Verwenden Sie im CodeBehind eine PointCollection, um die Punkte zu definieren, und fügen Sie der Auflistung jeden einzelnen Punkt als eine Point-Struktur hinzu.

Das nächste Beispiel erstellt eine Polyline mit 4 Punkten bei (10,200), (60,140), (130,140) und (180,200). Ein Stroke ist definiert, eine Fill jedoch nicht.


<Polyline Stroke="Black"
        StrokeThickness="4"
        Points="10,200,60,140,130,140,180,200" />

Hier ist die gerenderte Polyline. Beachten Sie, dass der letzte und der erste Punkt nicht wie bei einem Polygon durch die Stroke-Umrandung miteinander verbunden sind.

Eine gerenderte Polylinie

Pfad

Ein Path ist die vielseitigste Shape, da Sie damit beliebige Geometrien definieren können. Aber die Vielseitigkeit führt auch zu einer hohen Komplexität. Sehen wir uns an, wie ein einfacher Path in XAML erstellt wird.

Sie definieren die Geometrie des Pfads mit der Data-Eigenschaft. Es gibt zwei Techniken zum Festlegen von Data:

  • Sie können einen Zeichenfolgenwert für Data in XAML festlegen. In diesem Format verwendet der Path.Data-Wert ein Serialisierungsformat für Grafiken. Nachdem er einmal festgelegt wurde, wird dieser Wert normalerweise nicht mehr als Zeichenfolge bearbeitet. Stattdessen arbeiten Sie mit Entwicklungstools in einer Entwurfs- oder Zeichnungsmetapher auf einer Oberfläche. Anschließend speichern oder exportieren Sie die Ausgabe und erhalten eine XAML-Datei oder ein XAML-Zeichenfolgenfragment mit Path.Data-Informationen.
  • Sie können die Data-Eigenschaft für ein einzelnes Geometry-Objekt festlegen. Die kann im Code oder in XAML erfolgen. Die einzelne Geometry ist in typischerweise eine GeometryGroup, die als Container fungiert und mehrere Geometriedefinitionen für das Objektmodell in einem Objekt zusammenfassen kann. In aller Regel wird diese Vorgehensweise gewählt, um eine oder mehrere der Kurven und komplexen Formen, die als Segments-Werte definiert werden können, für ein PathFigure zu verwenden, beispielsweise BezierSegment.

Der Path in diesem Beispiel kann dadurch entstanden sein, dass einige Vektorformen mit Blend für Visual Studio erzeugt und das Ergebnis als XAML gespeichert wurde. Der vollständige Path besteht aus einem Segment einer Bézierkurve und einem Liniensegment. Dieses Beispiel soll in erster Linie die Elemente im Path.Data-Serialisierungsformat veranschaulichen und verstehen helfen, wofür die Zahlen stehen.

Die Data beginnen mit dem move-Befehl, der durch "M" gekennzeichnet ist und einen Anfangspunkt für den Pfad erstellt.

Das erste Segment ist eine kubische Bézierkurve, die bei (100,200) beginnt und bei (400,175) endet. Sie wird mit zwei Kontrollpunkten bei (100,25) und (400,350) gezeichnet. Dieses Segment wird durch den "C"-Befehl in der Zeichenfolge des Data-Attributs gekennzeichnet.

Das zweite Segment beginnt mit einem "H"-Befehl für eine absolute horizontale Linie. Dieser gibt an, dass eine Linie vom bisherigen Endpunkt des Pfads (400,175) zum neuen Endpunkt (280,175) eine Linie gezeichnet werden soll. Da es sich um einen Befehl für eine horizontale Linie handelt, ist der angegebene Wert eine x-Koordinate.


<Path Stroke="DarkGoldenRod" 
      StrokeThickness="3"
      Data="M 100,200 C 100,25 400,350 400,175 H 280" />

Hier ist der gerenderte Path.

Eine gerenderter Pfad

Das nächste Beispiel zeigt die Verwendung der anderen vorgestellten Technik: eine GeometryGroup mit einer PathGeometry. Dieses Beispiel zeigt einige der beitragenden Geometrietypen, die als Teil einer PathGeometry verwendet werden können: PathFigure und die verschiedenen Elemente, bei denen es sich um ein Segment in PathFigure.Segments handeln kann.


          <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
            <Path.Data>
              <GeometryGroup>
                  <RectangleGeometry Rect="50,5 100,10" />
                  <RectangleGeometry Rect="5,5 95,180" />
                  <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
                  <RectangleGeometry Rect="50,175 100,10" />
                  <PathGeometry>
                    <PathGeometry.Figures>
                      <PathFigureCollection>
                        <PathFigure IsClosed="true" StartPoint="50,50">
                          <PathFigure.Segments>
                            <PathSegmentCollection>
                              <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                              <BezierSegment Point1="125,300" Point2="75,100"  Point3="50,50"/>
                            </PathSegmentCollection>
                          </PathFigure.Segments>
                        </PathFigure>
                      </PathFigureCollection>
                    </PathGeometry.Figures>
                  </PathGeometry>               
              </GeometryGroup>
            </Path.Data>
          </Path>

Ein Grund für die Verwendung von PathGeometry mit den verschiedenen Teilen besteht darin, dass jeder Teil Double- und Point-Eigenschaften umfasst, auf die Sie potenziell für eine UI-Animation zielen können. In der Serialisierungsform von Path.Data ist dies nicht möglich. Weitere Informationen finden Sie unter Storyboardanimationen.

Beispiele für Formen

Weitere Beispiele zur Verwendung von Bildern und Formen in Apps finden Sie unter:

Verwandte Themen

Roadmap für Windows Store-Apps mit C# oder Visual Basic
Roadmap für Windows Store-Apps mit C++
Schnellstart: Verwenden von Pinseln

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.