Erstellen eines Anwendungsflusses

Das SketchFlow-Diagramm ist ein Grapheditor, mit dessen Hilfe Struktur, Fluss, Navigation und Aufbau einer Anwendung eingerichtet werden können.

Das SketchFlow-Diagramm dient vornehmlich zur Bearbeitung der Anwendungsstruktur, während die Zeichenfläche zur Bearbeitung des Inhalts einzelner Bildschirme vorgesehen ist.

Navigationsbildschirme

Jeder Bildschirm des Prototyps wird im SketchFlow-Diagramm durch einen Knoten dargestellt. Zur Darstellung der Navigation von Bildschirm zu Bildschirm können Sie einzelne Bildschirme durch eine Navigationsverbindung miteinander verbinden. Bei der Wiedergabe des Prototyps im SketchFlow-Player simulieren diese Navigationsverbindungen dann die Navigation zwischen Bildschirmen im Bereich Navigieren.

Im SketchFlow-Diagramm werden zudem Komponentenbildschirme angezeigt. Weitere Informationen finden Sie unter "Komponentenbildschirme" weiter unten in diesem Thema.

Die Navigation zwischen Bildschirmen kann in SketchFlow auf verschiedenerlei Weise definiert werden. Sie können neue verbundene Bildschirme aus vorhandenen Bildschirmen im SketchFlow-Diagramm erstellen. Sie können nicht verbundene Bildschirme im SketchFlow-Diagramm miteinander verbinden. Schließlich können Sie auf einem Objekt in einem Bildschirm einen Rechtsklick ausführen und die Navigation durch Auswahl des Befehls Navigieren zu im Kontextmenü definieren.

So fügen Sie dem SketchFlow-Diagramm eine neue verbundene Navigation hinzu

1. Bei der Erstellung eines neuen SketchFlow-Projekts wird eine Datei unter dem Namen Screen 1.xaml angelegt. Die Datei wird im SketchFlow-Diagramm in Form eines Knotens und im Projektpanel als UserControl -Steuerelement angezeigt.

   Hinweis:
   Informationen zum Erstellen eines neuen SketchFlow-Projekts finden Sie unter Erstellen eines Prototypprojekts.

   Führen Sie den Mauszeiger auf den ersten Knoten (Bildschirm 1) in der oberen linken Ecke des SketchFlow-Diagramms.

   Hinweis:
   Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

   Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen:

   

2. Führen Sie den Mauszeiger auf das linke Symbol. Ziehen Sie das Symbol mit der Maus. Es wird nun ein Knotenschatten eingeblendet, der dem Mauszeiger folgt.

3. Ziehen Sie das Symbol an die Stelle, an die Sie den neuen Bildschirm setzen möchten. Sie können jetzt den Bildschirm benennen, indem Sie den Namen direkt in das Textfeld eingeben. Wenn der neue Bildschirm nicht umbenannt wird, wird für den neuen Knoten der Name "Screen x " vergeben, wobei " x " die nächste Nummer in einer Reihe nummerierter Bildschirmnamen darstellt, die im Anwendungsfluss angezeigt werden.

   Hinweis:
   Sie können den Bildschirm nach Belieben umbenennen. Klicken Sie dazu mit der rechten Maustaste auf den Knoten, und wählen Sie Umbenennen aus, oder klicken Sie auf den Knoten selbst, drücken Sie UMSCHALT+F2, und geben Sie dann den gewünschten Namen ein.

4. Wenn Sie in den neuen Bildschirm ein neues Element zeichnen möchten, doppelklicken Sie im SketchFlow-Diagramm auf den Knoten, um die zugehörige Dokumentregisterkarte auszuwählen.

Die Verbindung zwischen den Knoten simuliert die Navigation von Knoten zu Knoten. Sie können auch Navigationsknoten ohne Navigationsverbindung erstellen.

So fügen Sie dem SketchFlow-Diagramm eine neue Navigation ohne Verbindung hinzu

1. Klicken Sie mit der rechten Maustaste in das SketchFlow-Diagramm, und klicken Sie dann auf Bildschirm erstellen.

   Hinweis:
   Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

   Hinweis:
   Sie können den Bildschirm nach Belieben umbenennen. Klicken Sie dazu mit der rechten Maustaste auf den Knoten, und wählen Sie Umbenennen aus, oder klicken Sie auf den Knoten selbst, drücken Sie UMSCHALT+F2, und geben Sie dann den gewünschten Namen ein.

2. Wenn Sie in den neuen Bildschirm ein neues Element zeichnen möchten, doppelklicken Sie im SketchFlow-Diagramm auf den Knoten, um die zugehörige Dokumentregisterkarte auszuwählen.

   Tipp:
   Klicken Sie alternativ dazu in der SketchFlow-Schema-Symbolleiste auf Bildschirm erstellen.

Verbinden zweier Navigationsbildschirme

1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf den Knoten, von dem aus Sie eine Verbindung erstellen möchten.

   Hinweis:
   Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

   Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen:

   

2. Führen Sie den Mauszeiger auf das Symbol Vorhandenen Bildschirm verbinden (zweites von links). Zum Erstellen der Verbindung ziehen Sie das Symbol mit der Maus. Es wird ein Pfeil eingeblendet, der dem Zeiger folgt.

3. Ziehen Sie den Pfeil auf den Bildschirm, zu dem eine Verbindung hergestellt werden soll. Wenn Sie die Verbindung löschen möchten, klicken Sie mit der rechten Maustaste auf den Pfeil, und klicken Sie dann auf Entfernen.

   Tipp:
   Alternativ zum obigen Verfahren ziehen Sie den Knoten auf den Knoten, zu dem eine Verbindung hergestellt werden soll.

Komponentenbildschirme

Komponentenknoten werden ebenso wie Navigationsknoten im SketchFlow-Diagramm angezeigt. Im Unterschied zu Navigationsknoten verfügen Komponentenknoten über keine eingehenden Navigationsverbindungen. Komponentenknoten können jedoch über eingehende Aufbauverbindungen verfügen. Verbindungen, d. h. die Pfeile, die Verbindungen zwischen Knoten im Anwendungsfluss simulieren, repräsentieren die Bildschirme, in denen ein Komponentenbildschirm erscheint.

Ein Komponentenknoten enthält Inhalt, der in mehreren Bildschirmen genutzt werden kann. Sie können beispielsweise einen Komponentenknoten mit einem Hintergrund erstellen und einen zweiten, der ein Menü enthält, und beide Komponenten dann in mehreren Bildschirmen des Prototyps einsetzen.

Es gibt viele verschiedene Möglichkeiten, Komponentenknoten zu erstellen. Sie können einen Komponentenknoten direkt im SketchFlow-Diagramm einfügen oder Inhalt auswählen und in einen Bildschirm umwandeln, der als Komponentenknoten im SketchFlow-Schema erscheint.

So fügen Sie dem SketchFlow-Diagramm eine neue Komponente ohne Verbindung hinzu

• Klicken Sie mit der rechten Maustaste in das SketchFlow-Diagramm, und klicken Sie dann auf Komponentenbildschirm erstellen.

So fügen Sie dem SketchFlow-Diagramm eine neue verbundene Komponente hinzu

1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf den Knoten, von dem aus Sie einen neuen Komponentenbildschirm erstellen möchten.

   Hinweis:
   Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

   Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen.

   

2. Führen Sie den Mauszeiger auf das Symbol Komponentenbildschirm erstellen und einfügen (zweites von rechts). Zum Erstellen der Verbindung ziehen Sie das Symbol mit der Maus. Es wird ein Pfeil eingeblendet, der dem Zeiger folgt.

UserControls

Bei einem Komponentenbildschirm handelt es sich um einen UserControl -Typ. Wenn Sie einen Komponentenbildschirm erstellen, wird der Bildschirm im SketchFlow-Diagramm angezeigt. Sie können statt eines Komponentenbildschirms auch ein anderes UserControl -Objekt erstellen. Wenn die UserControl-Objekte keine Komponentenbildschirme sind, werden diese Objekte nicht im SketchFlow-Diagramm angezeigt.

Umwandeln eines UserControl-Objekts in einen Komponentenbildschirm

1. Wählen Sie das Objekt oder die Objektgruppe aus, das bzw. die Sie in einen Komponentenbildschirm konvertieren möchten.

   Hinweis:
   Wenn Sie eine Objektgruppe auswählen möchten, ziehen Sie mit der Maus um die gewünschten Objekte einen Auswahlrahmen.

2. Klicken Sie mit der rechten Maustaste auf die Auswahl, und klicken Sie dann auf Komponentenbildschirm erstellen.

3. Geben Sie im Dialogfeld Komponentenbildschirm erstellen im Feld Name einen Namen für das UserControl -Objekt ein.

4. Klicken Sie auf OK.

   Hinweis:
   Damit der Komponentenbildschirm im Navigationsbildschirm erscheint, muss das Projekt möglicherweise neu erstellt werden (F5).

So erstellen Sie ein neues UserControl-Objekt aus einem bestehenden Objekt

1. Wählen Sie das Objekt oder die Objektgruppe aus, das oder die Sie in ein UserControl -Objekt umwandeln möchten.

   Hinweis:
   Ziehen Sie einen Begrenzungsrahmen um die Objektgruppe, um diese auszuwählen. Sie können Objekte auch direkt im Ressourcenpanel anzeigen.

2. Klicken Sie mit der rechten Maustaste auf die Auswahl, und klicken Sie dann auf Benutzersteuerelement erstellen.

3. Geben Sie im Dialogfeld Benutzersteuerelement erstellen im Feld Name einen Namen für das UserControl-Objekt ein.

   Weitere Informationen finden Sie unter Erstellen eines leeren Benutzersteuerelements.

Visuelle Tags

Mit visuellen Tags im SketchFlow-Schema können unterschiedliche Bildschirm- und Verbindungselemente farblich unterschieden und leichter erkannt werden.

So kennzeichnen Sie einen Knoten farblich

1. Führen Sie im SketchFlow-Diagramm den Mauszeiger auf den betreffenden Knoten.

   Hinweis:
   Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

2. Der Knoten wird markiert, und die zugehörige XAML-Datei erscheint als QuickInfo. Am unteren Knotenende erscheint zudem ein Menü mit Symbolen:

   

3. Führen Sie den Mauszeiger auf Visuelles Tag ändern (das rechte Symbol). Klicken Sie auf das Symbol und anschließend auf die Farbe, in welcher der Knoten erscheinen soll.

So kennzeichnen Sie eine Verbindung farblich

1. Klicken Sie im SketchFlow-Diagramm mit der rechten Maustaste auf die betreffende Verbindung.

   Hinweis:
   Wenn Sie das SketchFlow-Diagramm nicht finden, klicken Sie im Menü Fenster auf SketchFlow-Schema, oder drücken Sie UMSCHALT+F12.

   Die Verbindung ist nun markiert.

2. Klicken Sie auf das Symbol zur Auswahl einer Farbe, und wählen Sie die gewünschte Farbe aus.

Über die SketchFlow-Projekteinstellungen können Sie auch die farbliche Kennzeichnung für ein gesamtes Projekt einstellen.

Weitere Informationen finden Sie unter Ändern der SketchFlow-Projekteinstellungen.

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.