Designer

Im Designer werden die einzelnen Ansichten (Views oder Pages) des Visualisierungsprojekts bearbeitet.

Der Designer wird automatisch geöffnet, wenn Sie in einem Projekt eine HTML-Datei aus dem Knoten Design im Projektexplorer öffnen. Der Knoten Design ist nur in Projektvorlagen vorhanden, die über eine Benutzeroberfläche (UI) verfügen, z. B. in Client/Server-Projekten.

Um eine View/Page zu öffnen, haben Sie folgende Möglichkeiten:

Doppelklicken Sie auf die View/Page im Projektexplorer.
Klicken Sie mit der rechten Maustaste auf die gewünschte View/Page und wählen Sie Öffnen aus dem Kontextmenü.
Markieren Sie die gewünschte View/Page und drücken Sie Enter.

Der Designer wird geöffnet und die View/Page im Designer angezeigt. Sie können mehrere Dateien nacheinander im Designer öffnen.

Der Designer verfügt über folgende Bedienelemente:

Designer Web UI

Tabs	Im Designer geöffnete Dateien werden als Tabs dargestellt. Sie können z. B. zwischen den Tabs hin und her schalten, Tabs in Gruppen organisieren und einen einzelnen Tab aus dem Programmfenster der Entwicklungsumgebung herausziehen, um ihn in einem separaten Fenstern anzuzeigen.
Liste der aktiven Dateien	Wenn Sie auf die Schaltfläche mit dem kleinen Dreieck klicken, öffnet sich eine Liste mit allen im Designer geöffneten Dateien. Klicken Sie auf einen Namen aus der Liste, dann wird der entsprechende Tab zur Bearbeitung aktiviert, d. h. er erscheint im Vordergrund. Um zwischen den Tabs zu wechseln, können Sie auch den gewünschten Tab anklicken.
Designansicht	In der Designansicht gestalten Sie die im Designer geöffnete View oder Page grafisch, indem Sie Elemente hinzufügen, verkleinern oder vergrößern, anordnen und bei Bedarf verschieben oder entfernen.
Aktualisieren und Neu laden	Wenn Sie ein HTML-Dokument (Page oder View) im Designer öffnen, wird es in den Designer geladen. Wenn Sie das Dokument außerhalb der IDE bearbeitet haben oder Probleme feststellen (die Page „hängt“), können Sie die Datei mit Hilfe der Schaltfläche Neu laden erneut in den Designer laden. Die gleiche Wirkung erzielen Sie, wenn Sie den Tab im Designer schließen und die Page aus dem Projektexplorer heraus erneut öffnen. Wenn Sie ein Steuerelement auf einer Page im Designer platzieren, wird die Page „aktualisiert“. Über die Schaltfläche Aktualisieren können Sie die Page bei Bedarf selbst aktualisieren, z. B. wenn die Adorner (wie z. B. der blaue Rand um ein Steuerelement) nicht korrekt dargestellt werden. Das Aktualisieren erfolgt schneller als das Neuladen.
Symbolleiste	Die Funktionen der Symbolleiste helfen beim Positionieren und Ausrichten der Elemente auf der View oder Page.
Scrollbalken	Über den senkrechten Scrollbalken können Sie die View/Page nach oben oder nach unten verschieben. Alternativ können Sie das Scrollrad der Maus verwenden. Über den waagerechten Balken können Sie die View/Page nach links oder rechts verschieben oder verwenden Sie dazu Umschalt+Scrollrad.

Im Dialog Optionen unter dem Knoten Designer stehen Optionen zur Anpassung des Designers zur Verfügung.

Beim Arbeiten mit Tabs in der Entwicklungsumgebung haben Sie folgende Möglichkeiten:

Zwischen Tabs wechseln

Sind mehrere Dateien im Designer geöffnet, können Sie zwischen ihnen wechseln.

Sie können die Liste "Aktive Dateien" öffnen und den Dateinamen anklicken. Klicken Sie dazu mit der linken Taste auf den Tab mit dem Namen der Datei.

Reihenfolge der Tabs ändern

Um die Reihenfolge der Tabs zu ändern, klicken Sie mit der linken Maustaste auf den Tab und ziehen sie den Tab an die die gewünschte Stelle.

Dateien speichern

Ein Sternchen neben dem Dateinamen auf dem Tab gibt an, dass es über nicht gespeicherte Änderungen verfügt. Um Dateien zu speichern, haben Sie folgende Möglichkeiten:

Drücken Sie Strg+S, um das aktive Dokument im Designer zu speichern.
Drücken Sie Strg+Umschalt+S, um alle im Designer geöffneten Dokumente zu speichern.

Dateien können automatisch gespeichert werden. Aktivieren Sie dazu im Dialog Optionen die Option Dokumente automatisch speichern und ändern Sie bei Bedarf den Zeitraum.

Dateien schließen

Um eine Datei zu schließen, haben sie folgende Möglichkeiten:

Klicken Sie mit der rechten Maustaste auf den Tab und wählen Sie Schließen aus dem Kontextmenü.
Klicken Sie auf das Symbol des Tabs.

Alle Dateien im Designer schließen:

Klicken Sie mit der rechten Maustaste auf einen Tab und wählen Sie Alle Dokumente schließen aus dem Kontextmenü.

Enthält eine Datei nicht gespeicherte Änderungen, dann erscheint ein Dialog, in dem das Speichern von Änderungen bestätigt oder verworfen oder das Schließen abgebrochen werden kann.

In der Designansicht stehen Ihnen folgende Möglichkeiten für die Arbeit mit Steuerelementen zur Verfügung:

Element hinzufügen

Wenn Sie eine View/Page im Designer öffnen, können Sie der View/Page ein Steuerelement auf folgende Weise hinzufügen:

Klicken Sie im Menü "Start" auf ein Steuerelement aus der Gruppe "Steuerelemente" oder auf eine Form aus der Gruppe "Zeichnen". Klicken Sie dann auf die View/Page in der Designansicht.
Klicken Sie im Menü "Start" ein Steuerelement oder eine Form an und ziehen Sie bei gehaltener Maustaste das Element auf die View/Page in der Designansicht. Lassen Sie die Maustaste los.

Dadurch wird ein Steuerelement wird nicht direkt einer View oder Page hinzugefügt, sondern einem Layout-Container, der wiederum ein Element der View oder Page ist. Beispiele für Layout-Container im Modern UI sind das Grid oder das StackPanel, im Web UI das AbsoluteLayout oder das FlexLayout. Eine neu erzeugte View oder Page hat in der Regel bereits einen Layout-Container.

Element auswählen

Um ein Element bearbeiten zu können, müssen Sie es zunächst auswählen (markieren). Um ein Element zu markieren, haben Sie folgende Möglichkeiten:

Klicken Sie auf das gewünschte Steuerelement auf der View/Page. Das markierte Steuerelement zeigt die Ziehpunkte zur Größenänderung an.
Klicken Sie auf das gewünschte Steuerelement in der Dokumentgliederung. Das in der Dokumentgliederung markierte Steuerelement erscheint auch in der Designansicht als markiert.
Das Eigenschaftenfenster zeigt die Eigenschaften und Ereignisse für das markierte Steuerelement an.

Mehrere Elemente auswählen

Um mehrere Steuerelemente gleichzeitig auszuwählen, haben Sie folgende Möglichkeiten:

Ziehen Sie mit der linken Maustaste eine Diagonale über die Steuerelemente, die sie gleichzeitig auswählen wollen. Dabei wird ein Rechteck mit gestrichelter Linie dargestellt. Wenn Sie die Maustaste loslassen, werden Steuerelemente, die sich in diesem Bereich befinden, ausgewählt.
Wählen Sie ein Steuerelement durch Anklicken aus, drücken und halten Sie die Strg-Taste und wählen Sie ein anderes Steuerelement aus. Auf diese Weise können Sie mehrere Steuerelemente auswählen, die sich nicht in unmittelbarer Nähe zueinander befinden. Die Mehrfachauswahl über die Strg-Taste ist auch in der Dokumentgliederung möglich.

Um die ausgewählten Elemente wird ein Rechteck mit blauem Rand dargestellt. Innerhalb der Auswahl wird ein Element als markiert dargestellt. Dieses Elemente zeigt die Ziehpunkte zur Größenänderung an. An dem markierten Element können Sie die anderen Steuerelemente ausrichten oder die Größe der anderen Steuerelemente an die Größe des markierten Steuerelements angleichen.

Zudem erlaubt die Mehrfachauswahl Folgendes:

Sie können die Auswahl kann mit der Maus verschieben.
Sie können die Editierfunktionen auf die Auswahl anwenden.
Sie können die Auswahl einem anderen Container hinzufügen.

Um die Auswahl aufzuheben, klicken Sie auf eine Stelle, an der sich kein Steuerelement dieser Auswahl befindet.

Element(e) ausschneiden, kopieren, einfügen und löschen

Die gängigen Editierfunktionen Ausschneiden, Kopieren, Einfügen und Löschen sind für Steuerelemente verfügbar und können entweder über das Kontextmenü, das Menüband oder die Tastaturbefehle im Designer oder in der Dokumentgliederung ausgelöst werden.

Element(e) verschieben

Markieren Sie dazu das Steuerelement oder mehrere Steuerelemente und ziehen Sie die Auswahl bei gehaltener Maustaste. Lassen Sie die Maustaste an der gewünschten Stelle los. Auf den Containern Grid und Canvas im Modern UI und AbsoluteLayout im Web UI legen Sie damit die Position des Steuerelements bzw. der Steuerelemente fest, auf den Containern StackPanel (Modern UI) und FlexLayout (Web UI) die Reihenfolge.

Element vergrößern und verkleinern

Um die Größe eines Elements in der Designansicht zu ändern:

Klicken Sie auf das Steuerelement. Für das Steuerelement werden nun die Ziehpunkte zur Größenänderung angezeigt.
Führen Sie den Mauszeiger über einen der Ziehpunkte. Der Cursor wird zu einem Doppelpfeil.
Drücken und halten Sie die linke Maustaste und ziehen Sie am Ziehpunkt in die gewünschte Richtung.
Ist die gewünschte Größe erreicht, lassen Sie die Maustaste los.

Element(e) zu einem anderen Container hinzufügen

Markieren Sie das Element/die Elemente, ziehen Sie die Auswahl mit der Maus auf den gewünschten Container und drücken Sie Alt-Taste.

Reihenfolge der Elemente ändern

Sind mehrere Steuerelemente auf einem Container vorhanden, dann kann die Reihenfolge dieser Elemente verändert werden. Je nach Container wirkt sich die geänderte Reihenfolge jedoch optisch unterschiedlich aus.

Im "AbsoluteLayout liegt jedes Steuerelement auf einer transparenten Ebene. Gibt e mehrere Steuerelemente im Container, dann werden diese Ebenen übereinander geschichtet. Das Steuerelement im Vordergrund liegt auf der obersten Ebene und kann andere Steuerelemente in diesem Container eventuell überdecken. Wird es in den Hintergrund verschoben, dann kann es von den anderen Steuerelementen überdeckt werden. Überdeckt keines der Steuerelement ein anderes, dann bewirkt die geänderte Reihenfolge optisch keinen Unterschied.

Im FlexLayout hingegen liegen die Steuerelemente nebeneinander auf einer Ebene. Sie können sich nicht überlappen, es sei denn es wird mit negativen Margins eine Überschneidung "erzwungen".

Um die Reihenfolge der Steuerelemente innerhalb eines Containers zu ändern, klicken Sie mit der rechten Maustaste auf ein Steuerelement und wählen Sie eine der Funktionen in der Gruppe "Reihenfolge" im Kontextmenü.

Elemente ausrichten

So richten Sie alle Steuerelemente einer Mehrfachauswahl an einem dieser Steuerelemente aus:

Markieren Sie die Steuerelemente, die Sie ausrichten wollen.
Klicken Sie mit der rechten Maustaste auf das Steuerelement innerhalb dieser Auswahl, an dem Sie die anderen Steuerelemente ausrichten wollen.
Wählen Sie aus der Gruppe Ausrichten im Kontextmenü die gewünschte Funktion aus.

Layout

Mit den Funktionen der Gruppe "Layout" des Kontextmenüs des ausgewählten Steuerelements oder einer Mehrfachauswahl können Sie die Layout-Eigenschaften "Margin", "Width", "Height" und "Size" auf ihre jeweiligen Standardwerte zurücksetzen.

Größe angleichen

So gleichen Sie die Größen aller Steuerelemente einer Mehrfachauswahl an die Größe eines dieser Steuerelemente an:

Markieren Sie alle Steuerelemente, deren Größe Sie angleichen wollen.
Klicken Sie mit der rechten Maustaste auf das Steuerelement in der Auswahl, an dessen Größe Sie die anderen Steuerelemente in der Auswahl angleichen wollen.
Wählen Sie aus der Gruppe Größe angleichen im Kontextmenü die gewünschte Funktion aus.

Style bearbeiten

Mit den Funktionen aus der Gruppe "Style bearbeiten" des Kontextmenüs des Steuerelements können Sie einen neuen Style für den Typ des ausgewählten Steuerelements anlegen oder einen vorhandenen ändern.

Die Symbolleiste des Designers enthält folgende Funktionen:

	Raster zum Andocken anzeigen Blendet das Raster als Hilfe zum Ausrichten von Elementen im Designer ein oder aus. Damit die Elemente nur entlang der Rasterlinien platziert werden können, muss die Funktion Andocken an Rasterlinien (2) aktiviert werden. Den Rasterlinienabstand können Sie im Dialog Optionen über die Einstellung Rasterlinienabstand ändern.
	Andocken an Rasterlinien Legt fest, ob Elemente eines AbsoluteLayout an die Rasterlinien andocken sollen. Dies erleichtert das Ausrichten von Elementen. Den Rasterlinienabstand können Sie im Dialog Optionen über die Einstellung Rasterlinienabstand ändern.
	Andocken an Ausrichtungslinien Legt fest, ob Ausrichtungslinien, Standardabstände und Standardinnenabstände für Elemente eines AbsoluteLayout angezeigt werden sollen. Ausrichtungslinien sind rot gestrichelte Linien, die dabei helfen, ein Steuerelement an einem benachbarten Steuerelement auszurichten. Eine Ausrichtungslinie erscheint, wenn Sie ein Steuerelement mit der Maus in die Nähe eines anderen Elements im gleichen Container ziehen. Der Standardabstand markiert den gewünschten Mindestabstand zu einem anderen Steuerelement. Er wird durch eine rote, durchscheinende Linie dargestellt und erscheint, wenn Sie ein Steuerelement mit der Maus in die Nähe eines anderen Steuerelements im gleichen Container ziehen. Der Standardinnenabstand markiert den gewünschten Mindestabstand des Steuerelements zu seinem Container. Er wird durch eine rote, durchscheinende Linie dargestellt und erscheint, wenn Sie ein Steuerelement mit der Maus an den Rand des Containers ziehen. Den Standardabstand und den Standardinnenabstand können Sie im Dialog Optionen über die Einstellungen Standardabstand und Standardinnenabstand ändern.
	Zoom Verkleinert oder vergrößert die Darstellung der View/Page im Designer. Alternativ können Sie Strg+Scrollrad verwenden.