120 Benutzerschnitstellen

Ein weiteres Werkzeug zur Bearbeitung von XAML Fenstern und deren Elemente ist das Eigenschaften (und Ereignisse) Fenster.
Es zeigt alle Eigenschaften des im Designer ausgewählten Elements an. (Hier: Fenster, engl. Window) Da die meisten Elemente sehr viele Eigenschaften besitzen, sind diese in Kategorien eingeteilt. Am Anfang haben Sie noch keine grosse Erfahrung aber mit der Zeit (üben üben..) gewinnen Sie im Eigenschaften – Dschungel auch den Durchblick! Praxistipp: Im Eigenschaften Fenster können Sie sich immer orientieren. Wenn Sie beim Programmieren (XAML oder C#) etwas nicht finden, suchen Sie im Eigenschaften Fenster danach und übernehmen dann den generierten Code. Spielen Sie mit den folgenden Eigenschaften des Fensters: • Title 
 • Topmost 
 • WindowStartupLocation 
 • Cursor 
Beobachten Sie unbedingt die Änderungen im XAML Fenster!
 Starten Sie nach den Anpassungen das Programm jeweils mit F5 


Elementhierarchie und Positionierung von Elementen

Bei der Darstellung von Programmen unter WPF ist das Fenster immer das oberste Element einer Hierarchie. Das Fenster hat eine vorgegebene (Start-) Grösse und kann sogar eine vordefinierte Anfangsposition haben. Jedes Fenster beinhaltet mehrere Steuerelemente (Label, Button, Textbox usw.). Diese sind für den Benutzer möglichste logisch angeordnet. Um diese Elemente im Fenster zu platzieren, werden sogenannte Container benötigt. Diese Container bieten unterschiedliche Layouts an, welche die Platzierung weiterer Elemente vereinfachen. Selbstverständlich können in einem Container weitere Container angeordnet werden, um komplexere Logiken darzustellen. Wieso Container?
Eine Anwendung kann auf unterschiedlichen Bildschirmen (Geräten!) verwendet werden. Dadurch kann beim Programmieren nicht vorhergesagt werden wie gross ein Fenster beim Anwender dargestellt werden wird. (Vielleicht arbeitet ein Anwender gerne mit mehreren Fenstern nebeneinander...) Um das Verhalten bei Grössenänderungen optimal definieren zu können, werden Container mit unterschiedlichem Verhalten bereitgestellt. Was der Benutzer effektiv beim Arbeiten verwendet, sind die Controls. Dazu gehören Label, Button, Bilder, Register (TabControl) usw. aber auch geometrische Formen könnten dargestellt werden. Je nach Bedarf muss der richtige Container gewählt werden. Für die Beispiele sind jeweils Knöpfe (Buttons) in die einzelnen Positionen eingefügt. Bei Knöpfen sieht man am besten den Effekt, da diese durch einen Rand abgeschlossen sind. Canvas: Canvas bietet die Grundlegende Funktion eines Zeichenbrettes. Jedes Element muss mittels Koordinaten positioniert werden. (Sonst wird es oben rechts angezeigt) Die Child-Elemente (hier Buttons) geben an von wo (Left, Right, Top, Bottom) aus sie mit welchem Wert positioniert werden.
WrapPanel: Das WrapPanel reiht ein Element an das nächste, bis der Platz aufgebraucht ist, dann springt es auf eine neue Zeile. Der nicht benutzte Platz (hinter dem Button1) bleibt frei. Standardmässig werden die Child-Elemente horizontal hintereinander gereiht. Es kann aber auch untereinander stapeln. <WrapPanel Orientation="Vertical">
StackPanel: Das StackPanel reiht auch die Elemente hinter- bzw. untereinander an. Dabei wird aber jeweils das Child-Element auf die maximal möglichen Ausmasse gestreched.
DockPanel: Das Dock Panel erlaubt die Anordnung der Elemente nach Rändern. Jedes Child-Element gibt an, an welchem Rand es sich befindet. Es können mehrere Element am gleichen Rand gebunden werden. Der / die Child Elemente ohne Angabe eines Randes werden im Zentrum platziert.
Grid: Ein Grid Container bietet die Funktionen einer Tabelle an. Es werden Spalten (Row) und Zeilen (Column) definiert. Die Child-Elemente werden den Zellen zugeordnet und nehmen den kompletten Platz der Zelle ein.
ViewBox: Die ViewBox ist kein eigenständiger Container, sondern sie wird verwendet, damit darin platzierte Child-Elemente die maximale Grösse des Parent-Elements übernehmen können. Für diese Grössenanpassung gibt es unterschiedliche Füllvarianten:

Mögliche Grössenangaben

In den obigen Beispielen wurden absolute Grössenangaben (Bsp: Width=100) verwendet. Was bedeuten diese? Wenn keine Einheit angegeben wird, werden die Zahlen in Pixeln gerechnet. Es gibt folgende gültige Einheiten: Bei Grössenänderungen am Fenster zur Laufzeit oder noch nicht bekannten Child-Elementen, reichen absolute Angaben nicht aus. In diesem Fall kann mit dem Stern gearbeitet werden.
Container mit einem Stern:
Wir sehen beim linken Fenster, dass der Button nicht komplett dargestellt werden kann. Für den Fall, dass das die Grösse Child-Element noch nicht bekannt ist kann anstelle des Sterns die Option „Auto“ verwendet werden. Dann richtet sich die Grösse des Containers (Parent-Element) nach dem Child- Element:
Container mit Option „Auto“:

Ränder definieren

Alle bisherigen Elemente haben das Parent-Element jeweils voll ausgefüllt:
- Der Container hat das Window voll ausgefüllt
- Die Buttons haben den zugewiesenen Platz im Container voll ausgefüllt
Für die schönere Darstellung sollte es möglich sein, einen Abstand zwischen den Elementen definieren zu können. Dies wird mit der Eigenschaft Margin realisiert. Diese Eigenschaft beherrschen alle Container und Steuerelemente!

Panels in WPF.mp4

Konstruktoren sind spezielle „Methoden“, welche zur Initialisierung von Objekten aufgerufen werden. Wie alle Methoden, können auch Konstruktoren Parameter haben, über welche beim Aufruf Werte mitegegben werden können. Das wird hier ausgenützt, um die Instanzvariablen der Objekte bei der Erzeugung mit den gewünschten Werten initialisieren zu können.