Zeichnen von Formen und Pfaden

Microsoft Expression Blend bietet einfache Vektorzeichenwerkzeuge, mit denen Sie Formen, Pfade und Masken zeichnen können wie mit jedem anderen Vektorgrafikprogramm. Fortgeschrittenere Zeichnungen und Vorlagen können Sie mit alternativen Vektorgrafikprogrammen wie Microsoft Expression Design erstellen. In Expression Design können Benutzer sogar Zeichnungen als XAML exportieren und in Expression Blend verwenden.

Weitere Informationen finden Sie unter Importieren von XAML-Code, der aus Expression Design exportiert wurde.

Was sind Vektorgrafiken?

Vektorgrafiken werden geometrisch durch Punkte, Linien, Kurven und Oberflächen definiert und nicht wie in Bitmaps durch Pixel. Da Computermonitore zunehmend höhere Auflösungen unterstützen, besteht ein Bedarf, Bitmaps zu ersetzen, die bei einer hohen Auflösung eine schlechtere Abbildungsqualität durch zu große Pixel liefern. Das Ändern der Bitmapgröße kann umständlich sein und wirkt sich in der Regel negativ auf die Qualität der Grafiken aus. Vektorgrafiken können auch bei hohen Auflösungen und stark vergrößert angezeigt werden, ohne dass Qualitätseinbußen auftreten. Aus diesem Grund können Vektorgrafiken um Inhalt herum auf einfache Art angepasst werden, denn es müssen nicht mehrere Bilder in unterschiedlichen Größen erstellt werden (beispielsweise Symboldateien, die auf der Benutzeroberfläche in unterschiedlichen Größen angezeigt werden). Vektorgrafiken bieten darüber hinaus weitere Vorteile:

  • Echte Inhaltsskalierung   In ein flexibles Layout integrierte Vektorgrafiken passen sich optimal an den Inhalt an. Wenn Sie beispielsweise einer Schaltfläche Text hinzufügen, passt sich die Größe der Schaltfläche automatisch an, ohne die Integrität der Grafik zu kompromittieren.

  • Unabhängigkeit von der Auflösung   Die Bildauflösung von Monitoren ist in den letzten Jahren nach und nach gestiegen, und es wird mit einer Fortsetzung dieses Trends gerechnet. Ohne die Möglichkeit, die Benutzeroberfläche einer Anwendung zu skalieren, wird die Benutzeroberfläche mit zunehmender Auflösung kleiner, sodass der Inhalt ab einem bestimmten Punkt unleserlich wird. Die Anwendung einer Skalierungs- oder Rotationstransformation auf diese Schnittstellen zur Anwendungsprogrammierung (Application Programming Interface, APIs) wirkt sich nur auf die Zeichnungen aus. Auf die Größe und Position der Steuerelemente im Fenster hat die Transformation keinen Einfluss. Sie können zwar Zeichnungen skalieren, doch können Sie nicht ohne Weiteres skalieren, wie der Platz eines Fensters von Steuerelementen beansprucht wird. Da Windows Presentation Foundation (WPF) alle Steuerelemente im Fenster in einer Zeichnung zusammensetzt und nicht jedes Steuerelement in einem eigenen Bereich isoliert, können Skalierungs- oder Rotationstransformationen problemlos auf die Benutzeroberfläche als Ganzes angewendet werden. Da jede WPF-Benutzeroberfläche nach oben oder unten skaliert werden kann, sind WPF-Anwendungen de facto nicht an Auflösungen gebunden. Anstatt verschwommen zu werden, wie bei einer einfachen Bitmapskalierung zu erwarten, bleiben die Bilder gestochen scharf und deutlich.

Cc295296.alert_note(DE-DE,Expression.30).gifHinweis:

Wenn Sie größenbezogene Eigenschaften in WPF-Anwendungen einstellen (beispielsweise Einstellungen, die mit Expression Blend erstellt werden), beziehen sich Pixel auf geräteunabhängige Pixel oder geräteunabhängige Einheiten, die der Größe eines Pixels auf einem Monitor entsprechen, der auf eine Bildschirmauflösung von 96 dpi eingestellt ist. Jede Einheit beträgt etwa 1/96 Zoll, unabhängig von der Bildschirmgröße oder -auflösung.

In Expression Blend kann ein Vektorobjekt eine einfache Linie oder Form oder ein komplexer Pfad bzw. ein komplexes Steuerelement sein. Objekte lassen sich auf vielfältige Weise bearbeiten. Sie können sie beispielsweise mithilfe von objektgebundenen Steuerpunkten vergrößern/verkleinern, verschieben, drehen, spiegeln oder neigen, oder Sie können im Eigenschaftenpanel genaue Werte für Größe, Position und Drehung eingeben. Im Grunde liegt jedes Objekt, das Sie auf der Zeichenfläche entwerfen, im Vektorformat vor. Die einzige Ausnahme bilden diejenigen Elemente, die Sie Ihrem Projekt hinzugefügt haben, ohne dass sie ursprünglich als Vektorobjekte formatiert waren, z. B. Bilder und 3D-Strukturen. Zu den Vektorobjekten in Expression Blend gehören:

  • Zeichenobjekte wie Ellipsen und Rechtecke

  • Pfadobjekte wie Linien und Kurven

  • Text

  • 3D-Objekte

  • Steuerelemente

Zeichenwerkzeuge

Im Werkzeugpanel finden Sie häufig verwendete Vektorwerkzeuge zum Erstellen von Formen und Pfadelementen und zum Bearbeiten von Objekten.

Beispiele zur Verwendung dieser Werkzeuge finden Sie in folgenden Themen:

Werkzeug

Name

Verwendungszweck

Cc295296.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(DE-DE,Expression.30).png

Rechteck

Zeichnen von Rechtecken und Quadraten, die auch mit abgerundeten Ecken erstellt werden können

Cc295296.8938cfdf-9b75-4a33-bc88-b0636e114a0d(DE-DE,Expression.30).png

Ellipse

Zeichnen von Ellipsen und Kreisen.

Cc295296.eb618397-5283-48be-8396-3449be7b6fbf(DE-DE,Expression.30).png

Linie

Zeichnen einer geraden Linie zwischen zwei Punkten.

Cc295296.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(DE-DE,Expression.30).png

Stift

Zeichnen und Ändern von Pfaden mit der Möglichkeit, jeden Knoten einzeln zu definieren. Mit dem Stiftwerkzeug können Sie Knoten im Pfad hinzufügen, entfernen und ändern.

Cc295296.509dc167-734f-46c9-b012-987ee63450cd(DE-DE,Expression.30).png

Zeichenstift

Zeichnen von Freihandformpfaden.

Cc295296.2ff91340-477e-4efa-a0f7-af20851e4daa(DE-DE,Expression.30).png

Auswahl

Auswählen von Formen, Pfaden und Objekten auf der Zeichenfläche, die Sie ändern möchten.

Weitere Informationen zur Verwendung des Auswahlwerkzeugs finden Sie unter Auswählen von Objekten oder Aufheben der Auswahl von Objekten.

Cc295296.6dd6571f-c116-451d-8dd2-1f88b8406362(DE-DE,Expression.30).png

Direktauswahl

Auswählen einzelner Knoten in einem Pfad, nachdem sie gezeichnet wurden. Mit dem Direktauswahlwerkzeug können Sie auch untergeordnete Objekte direkt auswählen, die innerhalb eines übergeordneten Objekts auf der Zeichenfläche, z. B. innerhalb eines Layoutpanels, geschachtelt sind.

Weitere Informationen zur Verwendung des Direktauswahlwerkzeugs finden Sie unter Auswählen von Objekten oder Aufheben der Auswahl von Objekten.

Formen und Pfade

Formen wie Rechtecke und Ellipsen sind Vektorobjekte. Sie zeichnen Formen mit dem Rechteckwerkzeug Cc295296.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(DE-DE,Expression.30).png oder dem Ellipsenwerkzeug Cc295296.8938cfdf-9b75-4a33-bc88-b0636e114a0d(DE-DE,Expression.30).png.

Pfade, die ebenfalls Vektorobjekte sind, sind wohl die flexibelsten Vektorobjekte in Expression Blend. Pfade bestehen aus einer Reihe von miteinander verbundenen Linien und Kurven. Nachdem Sie Pfade auf der Zeichenfläche gezeichnet haben, können Sie sie neu formen, miteinander vereinen oder auf andere Weise bearbeiten, um eine beliebige Vektorform zu erstellen. Sie können Polygone (geschlossene Formen aus geraden, miteinander verbundenen Linien) und Polylinien (offene Pfade aus geraden, miteinander verbundenen Linien) zeichnen. Sie können mit den Werkzeugen StiftCc295296.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(DE-DE,Expression.30).png, ZeichenstiftCc295296.509dc167-734f-46c9-b012-987ee63450cd(DE-DE,Expression.30).png und LinieCc295296.eb618397-5283-48be-8396-3449be7b6fbf(DE-DE,Expression.30).png Pfade zeichnen. Anschließend können Sie die Pfade mit dem Auswahlwerkzeug Cc295296.2ff91340-477e-4efa-a0f7-af20851e4daa(DE-DE,Expression.30).png und dem DirektauswahlwerkzeugCc295296.6dd6571f-c116-451d-8dd2-1f88b8406362(DE-DE,Expression.30).png bearbeiten.

Weitere Informationen zum Ändern von Pfaden finden Sie unter folgenden Themen:

Konvertieren von Formen in Pfade

Formobjekte können nicht wie Pfadobjekte bearbeitet werden, es sei denn, Sie konvertieren das Formobjekt mit dem Befehl In Pfad konvertieren in ein Pfadobjekt (klicken Sie im Menü Objekt auf Pfad und anschließend auf In Pfad konvertieren).

Ein Beispiel finden Sie unter Konvertieren von Formen in Pfade.

Cc295296.alert_note(DE-DE,Expression.30).gifHinweis:

Eigenschaften, die für eine Form spezifisch sind (z. B. der Eckradius eines Rechtecks), können nicht mehr bearbeitet werden, nachdem Sie die Form in einen Pfad konvertiert haben. Wenn zudem vor der Konvertierung ein Stil auf die Form angewendet war, werden die Eigenschaften des konvertierten Pfads auf die Standardwerte für einen Pfad zurückgesetzt (kein Füllpinsel und ein schwarzer Strich).

Ändern des Eckradius

Sie können den Eckradius eines Rechtecks bearbeiten, indem Sie das Rechteck auswählen und dann die Steuerpunkte des Eckradius in der linken oberen Ecke ziehen. Die Steuerpunkte werden angezeigt, wenn Sie den Mauszeiger auf eines der Enden der gepunkteten Linien bewegen, die von der linken oberen Ecke des Rechtecks herausragen.

Cc295296.b120ec92-5a55-4f25-89a4-da4f63572e47(DE-DE,Expression.30).png

Wenn Sie beim Ziehen eines Eckradius-Steuerpunkts die UMSCHALTTASTE gedrückt halten, können Sie die X- und Y-Eckradien einzeln bearbeiten.

Ein Beispiel finden Sie unter Abrunden der Ecken eines Rechtecks.

Vereinen von Pfaden

Durch das Vereinen von Pfaden (oder Formen) können Sie folgende Ergebnisse erzielen:

Cc295296.2df17a5d-a338-4ef4-96c5-dae51cc1ca8a(DE-DE,Expression.30).png

Cc295296.25182a96-9a69-478a-9cfe-5b360e6a9bea(DE-DE,Expression.30).png

Zwei Formen vor dem Vereinen

Cc295296.eb6fad93-f17e-4f62-a926-8c8651862891(DE-DE,Expression.30).png

Überschneiden

Cc295296.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(DE-DE,Expression.30).png

Vereinigen

Cc295296.a5d608f2-bba2-48c5-8b15-2c115db86acc(DE-DE,Expression.30).png

Überlappung ausschließen

Cc295296.f0c1ff71-7814-42ba-806b-7ea92d616e69(DE-DE,Expression.30).png

Trennen

Cc295296.15de085f-48f5-41dd-a286-e3dcb4cfd18b(DE-DE,Expression.30).png

Subtrahieren

Sie können zwei oder mehr Objekte (Pfade oder Formen) zu einem Pfadobjekt vereinen. Das resultierende Pfadobjekt ersetzt das letzte vor dem Vereinen ausgewählte Objekt und übernimmt dessen Eigenschaften. Das Ergebnis ist häufig ein zusammengesetzter Pfad.

Ein Beispiel finden Sie unter Vereinen von Formen oder Pfaden.

Weitere Informationen zum Bearbeiten von Pfaden finden Sie unter Direktauswahlwerkzeug-Zusatztasten und Stiftzusatztasten.

Cc295296.alert_note(DE-DE,Expression.30).gifHinweis:

Eigenschaften, die für eine Form spezifisch sind (z. B. der Eckradius eines Rechtecks), können nach dem Vereinen dieser Form mit einem anderen Objekt nicht mehr geändert werden. Wenn zudem vor der Konvertierung ein Stil auf das zuletzt ausgewählte Objekt angewendet war, werden die Eigenschaften des vereinten Pfads auf die Standardwerte für einen Pfad zurückgesetzt (kein Füllpinsel und ein schwarzer Strich).

Zusammengesetzte Pfade

Wenn Sie einen zusammengesetzten Pfad erstellen, werden sich überschneidende Pfadsegmente vom Ergebnis subtrahiert. Der resultierende Pfad übernimmt die visuellen Eigenschaften des untersten Pfads.

Zwei Pfade, die in einen zusammengesetzten Pfad konvertiert wurden

Cc295296.2157a8aa-d9a7-4de4-8de5-b10d28f08a84(DE-DE,Expression.30).png

Formen müssen in Pfade konvertiert werden, bevor sie in einen zusammengesetzten Pfad aufgenommen werden können. Klicken Sie im Menü Objekt unter Pfad auf In Pfad konvertieren. Sie können zwei oder mehr Pfade zu einem zusammengesetzten Pfad verbinden. Der resultierende Pfad ersetzt den vor dem Zusammensetzen ausgewählten untersten Pfad (in der Z-Reihenfolge) und übernimmt dessen Eigenschaften. Sie können einen zusammengesetzten Pfad nach seiner Erstellung jederzeit wieder trennen. Die ursprünglichen Eigenschaften werden jedoch nicht wiederhergestellt.

Ein Beispiel finden Sie unter Erstellen oder Freigeben eines zusammengesetzten Pfads.

Freistellungspfade

Freistellungspfade sind Pfade oder Formen, die auf ein anderes Objekt angewendet werden. Die Teile des maskierten Objekts, die außerhalb des Freistellungspfads liegen, werden ausgeblendet.

Bildobjekt mit angewendetem Freistellungspfad

Cc295296.22471e98-a841-4f39-a3ef-36090cf5a625(DE-DE,Expression.30).png

In Expression Blend können Sie Freistellungspfade auf der Zeichenfläche nach ihrer Erstellung ändern. Sie können einen Freistellungspfad freigeben, ohne das ursprüngliche Pfadobjekt zu verlieren. Ein Beispiel finden Sie unter Anwenden, Ändern oder Entfernen von Freistellungspfaden.

Sie können auch die einzelnen Scheitelpunkte des Freistellungspfads animieren (um beispielsweise das maskierte Objekt allmählich einzublenden). Ein Beispiel finden Sie unter Animieren von Punkten auf Pfaden oder Freistellungspfaden.

Deckkraftmasken

Eine Deckkraftmaske kann ein Pfad oder eine Form sein, der bzw. die auf ein anderes Objekt angewendet wird. Die transparenten Teile des Pfads stehen für die Bereiche, an denen das maskierte Objekt ausgeblendet wird. Die deckendeTeile der Maske geben hingegen an, an welchen Stellen das maskierte Objekt durchscheinen kann. Für jedes Objekt kann im Eigenschaftenpanel im Abschnitt Darstellung eine Deckkraftmaske definiert werden.

Eine Deckkraftmaske kann ein einfacher Farbverlaufspinsel sein, der Teile eines Objekts basierend auf der Transparenz anzeigt oder ausblendet. Im folgenden Beispiel wurde auf das Bild auf der linken Seite keine Deckkraftmaske angewendet. Es gibt zwei Möglichkeiten, das Bild auf der rechten Seite zu erstellen:

  • Die OpacityMask-Eigenschaft (Deckkraftmaske) des Image-Objekts wurde auf einen radialen Farbverlaufspinsel festgelegt. Dabei wurde die Alpha-Eigenschaft des rechten Farbverlaufstopps auf den Wert 0 eingestellt.

  • Vor dem Image-Objekt wurde ein Rectangle-Objekt erstellt. Die OpacityMask-Eigenschaft (Deckkraftmaske) des Rectangle-Objekts wurde auf einen radialen Farbverlaufspinsel festgelegt. Dabei wurde die Alpha-Eigenschaft des linken Farbverlaufstopps auf den Wert 0 eingestellt.

Bild ohne Maske (links) im Vergleich zu Bild mit angewandter Deckkraftmaske (rechts)

Cc295296.2bcb0f7e-9e47-4314-8f64-23fdc711510f(DE-DE,Expression.30).png

Ein Beispiel finden Sie unter Erstellen einer Deckkraftmaske.