Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Vorwort zur 6. Auflage
1 Allgemeine Einführung in .NET
2 Grundlagen der Sprache C#
3 Das Klassendesign
4 Vererbung, Polymorphie und Interfaces
5 Delegates und Ereignisse
6 Strukturen und Enumerationen
7 Fehlerbehandlung und Debugging
8 Auflistungsklassen (Collections)
9 Generics – Generische Datentypen
10 Weitere C#-Sprachfeatures
11 LINQ
12 Arbeiten mit Dateien und Streams
13 Binäre Serialisierung
14 XML
15 Multithreading und die Task Parallel Library (TPL)
16 Einige wichtige .NET-Klassen
17 Projektmanagement und Visual Studio 2012
18 Einführung in die WPF und XAML
19 WPF-Layout-Container
20 Fenster in der WPF
21 WPF-Steuerelemente
22 Elementbindungen
23 Konzepte von WPF
24 Datenbindung
25 Weitere Möglichkeiten der Datenbindung
26 Dependency Properties
27 Ereignisse in der WPF
28 WPF-Commands
29 Benutzerdefinierte Controls
30 2D-Grafik
31 ADO.NET – Verbindungsorientierte Objekte
32 ADO.NET – Das Command-Objekt
33 ADO.NET – Der SqlDataAdapter
34 ADO.NET – Daten im lokalen Speicher
35 ADO.NET – Aktualisieren der Datenbank
36 Stark typisierte DataSets
37 Einführung in das ADO.NET Entity Framework
38 Datenabfragen des Entity Data Models (EDM)
39 Entitätsaktualisierung und Zustandsverwaltung
40 Konflikte behandeln
41 Plain Old CLR Objects (POCOs)
Stichwort

Download:
- Beispiele, ca. 62,4 MB

Jetzt Buch bestellen
Ihre Meinung?

Spacer
Visual C# 2012 von Andreas Kühnel
Das umfassende Handbuch
Buch: Visual C# 2012

Visual C# 2012
Rheinwerk Computing
1402 S., 6., aktualisierte und erweiterte Auflage 2013, geb., mit DVD
49,90 Euro, ISBN 978-3-8362-1997-6
Pfeil 19 WPF-Layout-Container
Pfeil 19.1 Die Container-Steuerelemente
Pfeil 19.1.1 Gemeinsame Eigenschaften der Layout-Container
Pfeil 19.1.2 Das »Canvas«
Pfeil 19.1.3 Das »StackPanel«
Pfeil 19.1.4 Das »WrapPanel«
Pfeil 19.1.5 Das »DockPanel«
Pfeil 19.1.6 Das »Grid«-Steuerelement
Pfeil 19.1.7 Das »UniformGrid«
Pfeil 19.2 Verschachteln der Layout-Container

19 WPF-Layout-ContainerZur nächsten Überschrift

Nachdem Sie nun alle wesentlichen Grundlagen von XAML kennen, wollen wir uns in diesem Kapitel mit der Gestaltung der grafischen Benutzerschnittstelle beschäftigen und hierzu die verschiedenen Layout-Container etwas genauer unter die Lupe nehmen. Auch wenn in diesem Kapitel bereits mit Steuerelementen gearbeitet wird, werden wir diese erst im folgenden Kapitel 21 »offiziell« behandeln.


Rheinwerk Computing - Zum Seitenanfang

19.1 Die Container-SteuerelementeZur nächsten ÜberschriftZur vorigen Überschrift

In einer auf der WinForm-API basierenden Windows-Anwendung dürfen Sie ganz unbekümmert und nach Belieben die Steuerelemente anordnen. In einer WPF-Anwendung geht das nicht ganz so einfach. Hier übernehmen Layout-Container die Anordnung und Darstellung der darin enthaltenen Steuerelemente. Die Folge ist, dass sich die Anordnung nicht mehr an der Angabe der absoluten Koordinaten orientiert, sondern am Aufbau des Fensters. Ein WPF-Fenster skaliert automatisch, wenn der Benutzer Einstellungen ändert oder die Größe des Fensters ändert.

Es sei an dieser Stelle angemerkt, dass mit Canvas ein Layout-Container bereitgestellt wird, der mit absoluten Positionsangaben arbeitet. Auch wenn es möglicherweise sehr verlockend erscheint, sollten Sie diesen Container dennoch nach Möglichkeit nicht einsetzen, um die angebotenen Vorzüge der anderen WPF-Layout-Container zu nutzen.

Die Idee, die hinter den Layout-Containern steckt, ist, einer Komponente eine bestimmte Position im Fenster zuzuteilen. Das hat den Vorteil, dass die Komponente immer an der gleichen Stelle angezeigt wird und die relative Lage zu allen anderen Komponenten erhalten bleibt. Layout-Container helfen dabei, bestimmte Vorstellungen hinsichtlich des Layouts erfolgreich umzusetzen. Deshalb unterscheiden sich die Layout-Container in ihrer Charakteristik.

Oft ist das gewünschte Layout mit einem einzigen Layout-Container nicht zu realisieren. Das ist aber nicht weiter tragisch, da auch Layout-Container genauso verschachtelt werden können wie die anderen WPF-Komponenten. Es ist nur eine Frage der Idee, um mit den Bordmitteln der WPF schnell und einfach das Ziel zu erreichen.

Bevor wir uns die einzelnen Layout-Container im Detail ansehen, sollten wir uns zuerst einen Überblick über alle von WPF angebotenen verschaffen.

Tabelle 19.1 Layout-Container im Überblick

Layout-Container Kurzbeschreibung

Canvas

Die Steuerelemente werden an einer angegebenen Position in einer festgelegten Größe angezeigt.

DockPanel

Die Steuerelemente können an den Rändern angedockt werden.

Grid

Dieser Container stellt eine tabellenartige Struktur zur Verfügung, in deren Zellen die einzelnen Controls positioniert werden können.

StackPanel

Die Steuerelemente werden vertikal oder horizontal angeordnet
(gestapelt).

UniformGrid

Dieser Container stellt ein Raster aus gleich großen Zellen dar.

WrapPanel

Mit diesem Container werden die Controls vertikal oder horizontal angeordnet. Falls die Breite oder die Höhe nicht ausreichen, werden die enthaltenen Steuerelemente in die nächste Zeile umbrochen.

Auf der Buch-DVD finden Sie unter Kapitel 19 die Projektmappe Layout-Container, in der zu jedem der Layout-Container ein Beispielprojekt enthalten ist. Die einzelnen Projekte sollen Ihnen als Grundlage eigener Experimente dienen.


Rheinwerk Computing - Zum Seitenanfang

19.1.1 Gemeinsame Eigenschaften der Layout-ContainerZur nächsten ÜberschriftZur vorigen Überschrift

Alle Layout-Container sind direkt oder indirekt auf eine gemeinsame Basisklasse zurückzuführen: Panel. Damit ist klar, dass diese Klasse Eigenschaften und Methoden beschreibt, die jeder Layout-Container aufweist. Um hier alle Eigenschaften und Methoden aufzuführen, ist die Liste zu lang. Stattdessen möchte ich Ihnen einen kleinen Überblick verschaffen, damit Sie eine erste Orientierung haben. Bei Bedarf informieren Sie sich bitte in der Dokumentation.

Tabelle 19.2 Eigenschaften der Klasse »Panel« (Auszug)

Eigenschaft Beschreibung

Background

Die Hintergrundfarbe des Containers.

Children

Liefert die Referenz auf eine Collection (UIElementCollection) von den Komponenten, die sich im Container befinden.

Cursor

Legt den angezeigten Cursor fest.

Focusable

Legt fest, ob der Container fokussierbar ist.

Height

Die Höhe des Containers.

HorizontalAlignment

Beschreibt die horizontale Ausrichtung im Container.

Margin

Legt den Abstand des Containers zu seiner übergeordneten Komponente fest.

MaxHeight

Legt die maximale Höhe des Panels fest.

MaxWidth

Legt die maximale Breite des Panels fest.

MinHeight

Legt die minimale Höhe des Panels fest.

MinWidth

Legt die minimale Breite des Panels fest.

VerticalAlignment

Beschreibt die vertikale Ausrichtung im Container.

Width

Die Breite des Containers.


Rheinwerk Computing - Zum Seitenanfang

19.1.2 Das »Canvas«Zur nächsten ÜberschriftZur vorigen Überschrift

Canvas ist nicht nur der einfachste aller Layout-Container, es ist auch ein ganz spezieller. Mit ihm lassen sich die darin enthaltenen Steuerelemente in klassischer Weise absolut positionieren. Das bedeutet, es wird das kartesische X/Y-Koordinatensystem verwendet. Canvas stellt dazu allen in ihm enthaltenen Komponenten die angehängten Eigenschaften Canvas.Left, Canvas.Right, Canvas.Top und Canvas.Bottom zur Verfügung.

Alle vier Eigenschaften eines Steuerelements gleichzeitig zu setzen führt nicht zu dem vielleicht erwarteten Resultat. Aus den beiden Pärchen Canvas.Left/ Canvas.Right beziehungsweise Canvas.Top/Canvas.Bottom können Sie immer nur eine Eigenschaft festlegen, also beispielsweise Canvas.Left und Canvas.Bottom oder Canvas.Right und Canvas.Bottom. Verwenden Sie gleichzeitig Canvas.Left und Canvas.Right, könnte man der Meinung sein, dass WPF diese beiden Angaben in der Weise umsetzt, dass daraus die Breite des Steuerelements resultiert. Dem ist aber nicht so. Die Angabe von Canvas.Left hat eine höhere Priorität als Canvas.Right. Letztgenannte Eigenschaft wird ignoriert, und das Steuerelement wird in seiner Standardbreite dargestellt.

Im folgenden Beispielcode wird diese Situation durch Button1 deutlich gezeigt, bei dem sowohl Canvas.Left als auch Canvas.Right gesetzt sind. Button2 wird durch die Angabe von Canvas.Left und Canvas.Top im Fenster fixiert, Button3 durch Canvas.Right und Canvas.Bottom.

<Canvas>
<Button Canvas.Left="25" Canvas.Right="35"
Height="30">Button1</Button>
<Button Canvas.Left="55" Canvas.Top="50"
Height="30" Width="80">Button2</Button>
<Button Canvas.Right="55" Canvas.Bottom="50"
Height="30" Width="80">Button3</Button>
</Canvas>

Listing 19.1 Drei Schaltflächen in einem »Canvas«

In Abbildung 19.1 sehen Sie die drei Schaltflächen aus Listing 19.1 zur Laufzeit.

Abbildung

Abbildung 19.1 Button-Anordnung in einem »Canvas«

Verkleinern Sie das Fenster zur Laufzeit so weit, bis sich zwei Steuerelemente überschneiden, werden die Steuerelemente im Canvas-Container in der Reihenfolge aufgebaut, in der sie in der XAML-Datei angegeben sind.


Rheinwerk Computing - Zum Seitenanfang

19.1.3 Das »StackPanel«Zur nächsten ÜberschriftZur vorigen Überschrift

Die Steuerelemente in einem StackPanel werden entweder horizontal oder vertikal angeordnet. Die Vorgabe ist eine vertikale Anordnung. Möchten Sie eine horizontale erreichen, stellen Sie die Eigenschaft Orientation auf Horizontal ein.

Ohne die explizite Angabe der Breite beansprucht ein Steuerelement bei vertikaler Ausrichtung im StackPanel dessen gesamte Breite (siehe Abbildung 19.2). Dafür ist das Attribut HorizontalAlignment verantwortlich, dessen Wert auf Stretch eingestellt ist.

Abbildung

Abbildung 19.2 Vertikal ausgerichtete Buttons in einem »StackPanel«

Die Höhe des Controls wird minimal sein. Für einen Button bedeutet das, dass die Beschriftung noch so eben angezeigt wird. Andere Steuerelemente sind aber aufgrund ihrer geringen Minimalhöhe möglicherweise kaum noch zu erkennen.

Sie können bei jeder Komponente durch Angabe der Eigenschaft Width die Breite ausdrücklich festlegen. Mit dieser Einstellung werden die Steuerelemente in einem StackPanel die angegebene Breite einnehmen und in der Mitte zentriert angezeigt. Dieses Verhalten lässt sich mit der Eigenschaft HorizontalAlignment ändern, indem Sie einen der beiden Werte Left oder Right festlegen. Das entsprechende Steuerelement positioniert sich dann am linken oder rechten Containerrand. Mit Center werden die Steuerelemente in einer Breite dargestellt, die beim Button zum Beispiel von der Beschriftung abhängt.

Der nachfolgende XAML-Code beschreibt die linke Ausrichtung von drei Schaltflächen unterschiedlicher Breite. In Abbildung 19.3 sehen Sie die daraus resultierende Form zur Laufzeit.

<StackPanel HorizontalAlignment="Left">
<Button Width="180">Button1</Button>
<Button Width="100">Button2</Button>
<Button>Button3</Button>
</StackPanel>

Listing 19.2 Listing der Abbildung 19.3

Abbildung

Abbildung 19.3 Steuerelemente fester Breite in linker Ausrichtung

Beachten Sie, dass das breiteste Steuerelement die Ausrichtung bzw. Zentrierung der weniger breiten Steuerelemente beeinflusst.

Per Vorgabe werden die Elemente im StackPanel in voller Breite vom oberen Fensterrand aus nach unten dargestellt. Die Eigenschaft VerticalAlignment erlaubt die Anordnung von unten nach oben. Die Anordnung erfolgt zwar vom unteren Fensterrand aus nach oben, aber die Reihenfolge der Elemente bleibt erhalten, das heißt, Button1 steht weiterhin über Button2.

<StackPanel VerticalAlignment="Bottom">
<Button>Button1</Button>
<Button>Button2</Button>
<Button>Button3</Button>
</StackPanel>

Listing 19.3 Listing der Abbildung 19.4

Abbildung

Abbildung 19.4 Vertikale Ausrichtung der Komponenten

Vom Prinzip her gleicht die horizontale Ausrichtung der eben beschriebenen vertikalen. Wenn Sie das Attribut Orientation des StackPanel-Elements auf Horizontal setzen, werden alle Steuerelemente im StackPanel vom linken Fensterrand aus nach rechts aufgereiht angezeigt. Die Höhe der Controls entspricht standardmäßig der Höhe des Panels. Die Breite wird automatisch so gewählt, dass das Steuerelement noch so eben angezeigt wird. Für eine beschriftete Schaltfläche bedeutet das, dass sich die Steuerelementbreite an der Beschriftung orientiert (siehe Abbildung 19.5).

<StackPanel Orientation="Horizontal">
<Button>Button1</Button>
<Button>Button2</Button>
<Button>Button3</Button>
</StackPanel>

Listing 19.4 Listing der Abbildung 19.5

Abbildung

Abbildung 19.5 Horizontale Ausrichtung der Controls im »StackPanel«

Über FlowDirection können Sie die Reihenfolge der Anordnung beeinflussen. Dabei stehen Ihnen die Optionen LeftToRight und RightToLeft zur Verfügung. Die Vorgabe ist die Ausgabe der Buttons von links nach rechts.

<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Height="100">Button1</Button>
<Button Height="80" VerticalAlignment="Top">Button2</Button>
<Button>Button3</Button>
</StackPanel>

Listing 19.5 Listing der Abbildung 19.6

Abbildung

Abbildung 19.6 Fließrichtung von rechts nach links


Rheinwerk Computing - Zum Seitenanfang

19.1.4 Das »WrapPanel«Zur nächsten ÜberschriftZur vorigen Überschrift

Das WrapPanel ähnelt dem StackPanel. Die Komponenten werden der Reihe nach hinzugefügt, entweder zeilen- oder spaltenweise. Die Standardvorgabe ist zeilenweise. Passen alle Steuerelemente nicht in eine Zeile (oder Spalte), wird eine neue Zeile oder Spalte angefangen. Bei Bedarf bricht das WrapPanel in die nächste Zeile oder Spalte um – je nach Einstellung.

Die Höhe einer Zeile orientiert sich am Platzbedarf des Steuerelements mit der größten Höhe. Enthält eine Zeile beispielsweise mehrere Schaltflächen, von denen sich eine durch die explizite Angabe von Height oder durch Einstellung der Eigenschaft Margin von den anderen unterscheidet, wird sich die Höhe aller anderen Schaltflächen entsprechend einstellen – allerdings auch nur in der Zeile, in der der Button mit der abweichenden Höhe auftritt. Die umgebrochene Zeile ist davon nicht betroffen und bewertet nur die in ihr auftretenden Elemente.

<WrapPanel>
<Button Margin="10">Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
<Button>Button 5</Button>
<Button>Button 6</Button>
<Button>Button 7</Button>
</WrapPanel>

Listing 19.6 Listing der Abbildung 19.7

Abbildung

Abbildung 19.7 Elementanordnung in einem »WrapPanel«

Die Zeilenbreite lässt sich auch mit der Eigenschaft ItemHeight beeinflussen. Die Vorgabeeinstellung lautet Auto. Geben Sie einen Wert an, wird dieser für die Darstellung benutzt. Dabei sollten Sie aber vorsichtig sein, da ein zu geringer Wert dazu führen kann, dass ein Steuerelement möglicherweise nicht mehr korrekt angezeigt wird. Lassen Sie die Elemente spaltenweise anzeigen, müssen Sie statt der Eigenschaft ItemHeight die Eigenschaft ItemWidth einstellen.

Die Eigenschaft Orientation dient dazu, die Richtung der Anordnung der Elemente vorzugeben. Mögliche Werte sind Horizontal und Vertical. Dabei werden die Steuerelemente von links nach rechts bzw. von oben nach unten angeordnet. Mit der Eigenschaft FlowDirection und der Einstellung RightToLeft können Sie Controls aber auch von rechts nach links und von unten nach oben der Reihe nach anordnen.


Rheinwerk Computing - Zum Seitenanfang

19.1.5 Das »DockPanel«Zur nächsten ÜberschriftZur vorigen Überschrift

Viele Fenster weisen ein grundlegendes Layout auf. Denken Sie nur beispielsweise an den Windows-Explorer. Für solche Fenster benutzen Sie am besten einen Container vom Typ DockPanel. Dieser Container erlaubt es Ihnen, festzulegen, an welcher Seite die enthaltenen Controls ausgerichtet werden sollen. Die Komponenten können dabei links, rechts, oben oder unten am DockPanel positioniert werden. Die Ausrichtung wird bei jedem Steuerelement durch die angehängte Eigenschaft DockPanel.Dock festgelegt.

<DockPanel>
<Button DockPanel.Dock="Top">Button1</Button>
<Button DockPanel.Dock="Left">Button2</Button>
<Button DockPanel.Dock="Left">Button3</Button>
<Button DockPanel.Dock="Right">Button4</Button>
<Button DockPanel.Dock="Bottom">Button5</Button>
<Button DockPanel.Dock="Bottom">Button6</Button>
</DockPanel>

Listing 19.7 Listing der Abbildung 19.8

Die Reihenfolge der Steuerelemente im XAML-Code bestimmt die Darstellung im Fenster. Es gilt die Regel, dass die Komponente, die zuletzt eingefügt worden ist, per Vorgabe den verbleibenden Rest des Containers in Anspruch nimmt. Dabei spielt es keine Rolle, ob Sie eine Dockposition angegeben haben oder nicht. So baut sich das Layout innerhalb des DockPanels Element für Element auf. Elemente gleicher Ausrichtung werden dabei horizontal oder vertikal gestapelt, wie im Beispielcode Button2 und Button3.

Abbildung

Abbildung 19.8 Steuerelementanordnung in einem »DockPanel«

Das Verhalten, dass das letzte Element den verbleibenden Rest des Containers ausfüllt, können Sie ändern, indem Sie das Attribut LastChildFill auf false setzen. Die Vorgabe ist true. Wie danach das letzte Element dargestellt wird, hängt davon ab, ob das letzte Element mit DockPanel.Dock eine explizite Ausrichtung erfährt oder nicht. Verzichten Sie darauf, wird das Element an der linken Seite des verbleibenden Freiraums angedockt. Ansonsten folgt es der Einstellung von DockPanel.Dock. In jedem Fall verbleibt eine freie Fläche im Container.

<DockPanel LastChildFill="False">
<Button DockPanel.Dock="Top">Button1</Button>
<Button DockPanel.Dock="Left">Button2</Button>
<Button DockPanel.Dock="Left">Button3</Button>
<Button DockPanel.Dock="Right">Button4</Button>
<Button DockPanel.Dock="Bottom">Button5</Button>
<Button DockPanel.Dock="Bottom">Button6</Button>
</DockPanel>

Listing 19.8 Listing der Abbildung 19.9

Abbildung

Abbildung 19.9 Auswirkung der Einstellung »LastChildFill=False«

Die im DockPanel enthaltenen Elemente müssen nicht unbedingt ganze Bereiche ausfüllen. Sie können über die Eigenschaften Width und Height die Darstellungsgröße festlegen.

<DockPanel LastChildFill="False">
<Button DockPanel.Dock="Top" Width="80">Button1</Button>
<Button DockPanel.Dock="Left" Width="20">Button2</Button>
<Button DockPanel.Dock="Left" Width="70">Button3</Button>
<Button DockPanel.Dock="Right">Button4</Button>
<Button DockPanel.Dock="Bottom" Width="30">Button5</Button>
<Button DockPanel.Dock="Bottom">Button6</Button>
</DockPanel>

Listing 19.9 Listing der Abbildung 19.10

Abbildung

Abbildung 19.10 Darstellungsgröße der Steuerelemente im »DockPanel«


Rheinwerk Computing - Zum Seitenanfang

19.1.6 Das »Grid«-SteuerelementZur nächsten ÜberschriftZur vorigen Überschrift

Der sicherlich flexibelste Container der WPF wird durch Grid beschrieben. Das ist sicherlich auch der Grund, weshalb in einem neuen WPF-Window das Grid als Layout-Container vorgeschlagen wird.

Die Struktur eines »Grid« festlegen

Der Bereich im Grid wird in Zeilen und Spalten aufgeteilt. Dazu sind innerhalb des <Grid>-Tags zwei Bereiche zu definieren: ein Bereich, der alle Zeilen beschreibt, und ein Bereich, der alle Spalten beschreibt. Innerhalb der beiden Bereiche definieren Sie die gewünschten Zeilen und Spalten.

<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>

Listing 19.10 Die Definition von Zeilen und Spalten in einem »Grid«

Grid.RowDefinitions grenzt den Definitionsbereich für die Zeilen ein, Grid.ColumnDefinitions den der Spalten. Innerhalb dieser beiden Bereiche wird mit RowDefinition eine Zeile und mit ColumnDefinition eine Spalte beschrieben. Bei dieser Aufteilung werden alle Zellen in gleicher Größe dargestellt. Zur Laufzeit führt eine Veränderung der Fenstergröße dazu, dass sich die Spalten und Zeilen im gleichen Verhältnis vergrößern oder verkleinern.

Die Breite jeder einzelnen Spalte können Sie mit der Eigenschaft Width anpassen. Analog kann die Höhe jeder Zeile mit Height festgelegt werden. Sie können die Angabe in Pixeln machen, aber es bieten sich noch andere Möglichkeiten, beispielsweise Auto. Mit dieser Einstellung wird die Spaltenbreite beziehungsweise die Zeilenhöhe anhand des breitesten beziehungsweise höchsten Controls bestimmt.

Die Komponenten, die in den Zellen positioniert werden sollen, müssen als eigenständiger Bereich parallel neben Grid.RowDefinitions und Grid.ColumnDefinitions innerhalb von Grid eingetragen sein. Um eine Komponente eindeutig einer Zelle im Grid zuzuordnen, verwenden Sie die angehängten Eigenschaften Grid.Column und Grid.Row. Beiden übergeben Sie den Zeilen- bzw. Spaltenindex, der jeweils 0-basiert ist. Geben Sie den Zeilen-oder Spaltenindex nicht an, wird dieser automatisch mit »0« festgelegt.

Im folgenden Listing ist ein Grid in jeweils zwei Zeilen und Spalten aufgeteilt. Die Spaltenbreite soll sich mit Auto automatisch anpassen. In drei der vier Zellen wird jeweils ein Button platziert. Button1 hat eine Breite von 200 Pixeln. Der in der Zeile darunter befindliche Button3 weist nur eine Breite von 100 Pixeln auf. Weil die Spalte sich an der Breite des größten Elements orientiert, wird Button3 zentriert in seiner Zelle angezeigt. Button2 andererseits weist eine Breite auf, die in Summe mit der Breite von Button1 größer ist als die Fensterbreite von 300. Daher wird Button2 nicht mehr vollständig angezeigt, wie in Abbildung 19.11 zu sehen ist.

<Window ...
Height="200" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Width="200">Button1</Button>
<Button Grid.Column="1" Grid.Row="0" Width="150">Button2</Button>
<Button Grid.Column="0" Grid.Row="1" Width="100">Button3</Button>
</Grid>
</Window>

Listing 19.11 Listing der Abbildung 19.11

Abbildung

Abbildung 19.11 »Grid«-Steuerelement mit automatischer Spaltenbreite

Vergrößern Sie die Breite des Fensters über die Summe der Breiten der Schaltflächen Button1 und Button2 hinaus, verbleibt im rechten Fensterbereich ein ungenutzter Bereich. Einen ähnlichen Effekt können Sie auch bei der Festlegung der Höhen beobachten. Daher sollten Sie bei zumindest einer Zeile und einer Spalte des Grid das Wildcard-Zeichen »*« benutzen. Diese Zeile oder Spalte füllt dann den verbleibenden Platz aus.

<Window ...
Height="200" Width="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
[...]
</Grid>
</Window>

Listing 19.12 Listing der Abbildung 19.12

Beachten Sie bitte, dass eine Wildcard nur dann ihre Stärken ausspielen kann, wenn die Breite des Fensters die Gesamtbreite der beiden Schaltflächen überschreitet.

Abbildung

Abbildung 19.12 Fenster mit Einsatz der Wildcard »*«

Die Wildcard »*« kann auch Verhältnisse bezüglich Höhe und Breite bilden. Geben Sie beispielsweise »3*« an, bedeutet dies, dass die Höhe beziehungsweise Breite dem dreifachen Wert einer mit »*« gekennzeichneten Spalte oder Reihe entspricht. Angenommen, Sie hätten drei Spalten mit den Breiten »*«, »2*« und »3*« spezifiziert, wird die Gesamtbreite des Fensters in sechs gleich große Einheiten aufgeteilt. Dabei wird die erste Spalte eine Einheit breit, die zweite zwei Einheiten und die dritte drei Einheiten (siehe Abbildung 19.13). Da für den Zahlenwert der Typ double erlaubt ist, können Sie eine sehr feine Zellenstruktur erzielen.

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
</Grid>

Listing 19.13 Listing der Abbildung 19.13

Abbildung

Abbildung 19.13 Die Aufteilung der Spalten mit »*«

Die Wildcard »*« lässt sich mit absoluten Mindestmaßen kombinieren. Mit MinWidth="50" und Width="*" erreichen Sie beispielsweise, dass die entsprechende Spalte 50 Pixel nicht unterschreitet. Reicht der Platz aus, verbreitert sich die Spalte.

Die Eigenschaften »ColumnSpan« und »RowSpan«

Bei einer Komponente, die über mehrere Spalten oder Zeilen aufgespannt werden soll, geben Sie Grid.ColumnSpan oder/und Grid.RowSpan an. Die beiden Eigenschaften Grid.Column und Grid.Row dienen in diesem Fall dazu, die linke obere Zelle für das Element zu reservieren, von der ausgehend sich die Zelle über mehrere Spalten und/oder Zeilen erstreckt.

<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="1"
Grid.ColumnSpan="2" Grid.RowSpan="2">Button1</Button>
</Grid>

Listing 19.14 Listing der Abbildung 19.14

Abbildung

Abbildung 19.14 Ein Button, der über mehrere Zellen aufgespannt ist

Die Spalten- und Zeilenbreite mit »GridSplitter« ändern

Möchten Sie dem Anwender erlauben, ähnlich wie bei einem Excel-Tabellenblatt die Zeilenhöhe oder Spaltenbreite mit der Maus zu verändern, kommt das Element GridSplitter ins Spiel. Für einen GridSplitter müssen Sie eine eigene Spalte beziehungsweise Reihe bereitstellen, die auch über eine ausreichende Höhe oder Breite verfügt. Zudem sollten Sie einen nicht zu kleinen Randabstand mit der Eigenschaft Margin festlegen. Ansonsten könnte es sein, dass der Splitter zur Laufzeit so weit gezogen wird, dass er nicht bedient werden kann. Diese Komponente hat also einen Haken, wenn Sie beim Design nicht genügend aufpassen.

Eine Eigenschaft sollte an dieser Stelle auch sofort erwähnt werden: ShowPreview. Setzen Sie diese auf true, wird beim Greifen und Ziehen mit der Maus der Splitter in seiner ursprünglichen Lage weiterhin angezeigt. Erst beim Loslassen der Maus wird der neue Zustand endgültig angenommen, und die Komponenten, die sich in den Zellen befinden, werden an die neue Zellengröße angepasst.

Im folgenden Listing ist sowohl ein vertikaler als auch ein horizontaler GridSplitter definiert. Beachten Sie, wie mit den Eigenschaften Column, Row, ColumnSpan und RowSpan die vertikale und horizontale Ausrichtung und Größe festgelegt wird.

<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition MinHeight="20" Height="20"></RowDefinition>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition MinWidth="20" Width="20"></ColumnDefinition>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0">Button1</Button>
<Button Grid.Column="2" Grid.Row="1">Button2</Button>
<Button Grid.Column="3" Grid.Row="3">Button3</Button>
<Button Grid.Column="4" Grid.Row="4">Button4</Button>
<GridSplitter ShowsPreview="True"
Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="3"
HorizontalAlignment="Stretch"
Margin="0,0,0,10" Width="2" Background="Black" />
<GridSplitter ShowsPreview="True"
Grid.Row="2"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
Margin="5,5,5,5"
Height="2" Background="Black" />
</Grid>

Listing 19.15 Listing der Abbildung 19.15

Abbildung

Abbildung 19.15 Vertikaler und horizontaler »GridSplitter«


Rheinwerk Computing - Zum Seitenanfang

19.1.7 Das »UniformGrid«Zur vorigen Überschrift

Das UniformGrid ist eine einfache Variante des im letzten Abschnitt behandelten Grid-Steuerelements. Im UniformGrid werden alle enthaltenen Elemente in einer Gitterrasterung dargestellt. Dabei ist es nicht notwendig, die Anzahl der Zeilen oder Spalten anzugeben. Der UniformGrid erhöht die Anzahl automatisch, wenn es notwendig ist. Fügen Sie das erste Steuerelement ein, beansprucht dieses den gesamten Containerbereich für sich. Es wird nur eine Zeile und eine Spalte bereitgestellt. Fügt man eine zweite Komponente hinzu, wird die Anzahl von Zeilen und Spalten jeweils um eins erhöht. Dabei wird die zweite Komponente in der zweiten Spalte der ersten Zeile angezeigt. Das Verhalten der gleichzeitigen Vergrößerung setzt sich immer weiter fort. Für eine fünfte Komponente wird demnach eine dritte Zeile und eine dritte Spalte eröffnet.

<UniformGrid>
<Button>Button1</Button>
<Button>Button2</Button>
[...]
<Button>Button5</Button>
</UniformGrid>

Listing 19.16 Listing der Abbildung 19.16

Abbildung

Abbildung 19.16 Das »UniformGrid« mit fünf Elementen

Wie bei den anderen Containern auch können Sie das Anzeigeverhalten im Container beeinflussen. Das Attribut FlowDirection kennen Sie bereits, so dass sich eine weitere Erklärung erübrigt. Mit Rows und Columns geben Sie an, wie viele Zeilen und Spalten im UniformGrid dargestellt werden sollen. Allerdings müssen Sie sich dann auch über einen Nebeneffekt im Klaren sein: Reicht die Anzahl der Zellen im UniformGrid für die anzuzeigenden Elemente nicht aus, werden alle überschüssigen Komponenten zur Laufzeit nicht angezeigt. Sollte Ihnen dieses Malheur zur Entwicklungszeit unterlaufen, können Sie das im Designer von Visual Studio 2012 erkennen (siehe Abbildung 19.17).

<UniformGrid Columns="2" Rows="2">
<Button>Button1</Button>
<Button>Button2</Button>
<Button>Button3</Button>
<Button>Button4</Button>
<Button>Button5</Button>
</UniformGrid>

Listing 19.17 Listing der Abbildung 19.17

Abbildung

Abbildung 19.17 Überschüssiges Element im »UniformGrid«



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Visual C# 2012

Visual C# 2012
Jetzt Buch bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Rheinwerk-Shop: Professionell entwickeln mit Visual C# 2012






 Professionell
 entwickeln mit
 Visual C# 2012


Zum Rheinwerk-Shop: Windows Presentation Foundation






 Windows Presentation
 Foundation


Zum Rheinwerk-Shop: Schrödinger programmiert C++






 Schrödinger
 programmiert C++


Zum Rheinwerk-Shop: C++ Handbuch






 C++ Handbuch


Zum Rheinwerk-Shop: C/C++






 C/C++


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo





Copyright © Rheinwerk Verlag GmbH 2013
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern