setzen des layout in der wpfamrhein/skripten/info2/04.layout.pdf · 2016-03-14 · Überblick die...
TRANSCRIPT
Setzen des Layout in der WPF
- Grundlagen - Grundlagen - Panels- Einstellungen
Dr. Beatrice Amrhein
Überblick
Die WPF Layout Container
Die wichtigsten Eigenschaften
Canvas
StackPanel StackPanel
Horizontal oder Vertikal
WrapPanel
DockPanel
Grid
UniformGrid
2Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
WPF Layout Container
3
Motivation
Benutzer haben verschiedene Bildschirme mit verschiedenen Einstellungen
Benutzer haben unterschiedliche Vorlieben für die Aufteilung der Fenster auf dem Bildschirm und die Fenstergrösse.
Applikationen sollten mit (möglichst) jedem Bildschirm und jeder Auflösung sauber aussehen und gut benutzbar sein.
4Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
jeder Auflösung sauber aussehen und gut benutzbar sein.
Applikationen brauchen ein flexibles, ergonomisches Layout
Die verschiedenen Panel
CanvasDie Steuerelemente werden an einer fix angegebenen Position in einer festgelegten Grösse angezeigt.
DockPanelDie Steuerelemente können an den vier Rändern und imZentrum angedockt werden.
GridDieser Container stellt eine flexible tabellenartige Struktur zur Verfügung, in deren Zellen die einzelnen Controls positioniert werden können. Controls positioniert werden können.
StackPanelDie Steuerelemente werden vertikal oder horizontal angeordnet (gestapelt).
UniformGridDieser Container stellt ein Raster (Tabelle) aus gleich grossen Zellen zur Verfügung.
5Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Die wichtigsten Eigenschaften der Container
Background Die Hintergrundfarbe des Containers.
Height Die Höhe des Containers.
HorizontalAlignment Beschreibt die horizontale Ausrichtung im Container.
MarginLegt den Abstand des Containers zu seiner übergeordneten Komponente fest.
MaxHeight Legt die maximale Höhe des Panels 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.
6Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Werkzeugkasten
Diese Panels werden alle auch im Werkzeugkasten (Toolbox) angeboten.
Der Editor bietet allerdingsnur wenig Unterstützungfür das definitive Layouting
7Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
für das definitive Layouting(Einteilung, Reihenfolge, Grösse, Abstände).
8Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Canvas
Eigenschaften von Canvas
Canvas ist der einfachste Layout-Container
Die darin enthaltenen Steuerelemente werden absolut positioniert
Es wird das kartesische xy-Koordinatensystem verwendet.
Canvas stellt allen in ihm enthaltenen Komponenten die angehängten Eigenschaften Canvas.Left, Canvas.Right, angehängten Eigenschaften Canvas.Left, Canvas.Right, Canvas.Top und Canvas.Bottom zum Positionieren der Elemente (Abstand vom Rand) zur Verfügung.
Höhe und Breite werden in den enthaltenen Steuerelementen durch Height und Width gesetzt.
9
Ein Beispiel
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="120" Width="300">
<Canvas>
<Button Canvas.Left="25" Canvas.Right="35" Canvas.Top="10"
Height="30" Width="80">Start</Button>
<Button Canvas.Left="55" Canvas.Top="50"
Height="30" Width="80">Stop</Button>Height="30" Width="80">Stop</Button>
<Button Canvas.Right="35" Canvas.Bottom="50"
Height="30" Width="80">Reset</Button>
</Canvas>
</Window>
10
Eigenschaften von Canvas
Wird das Fenster zur Laufzeit vergrössert oder verkleinert, kann dies bei einer Canvas unschöne Effekte haben
11
Eine Beispiel-Zeichnung
<Canvas><Ellipse Fill="Purple" Width="100" Height="130" Canvas.Left="60" Canvas.Top="20"/><Ellipse Canvas.Left="210" Canvas.Top="53" Width="200" Height="100" Fill="Blue" /><Ellipse Fill="YellowGreen" Width="120" Height="80" Canvas.Left="230" Canvas.Top="174" /><Rectangle Canvas.Left="400" Canvas.Top="200" Width="20" Height="20" Fill="Red" /><Rectangle Height="3" Width="300" Fill="Black" Canvas.Top="200" Canvas.Left="100">
<Rectangle.RenderTransform><TransformGroup>
<SkewTransform AngleX="3"/> <RotateTransform Angle="-30"/></TransformGroup>
</Rectangle.RenderTransform></Rectangle.RenderTransform></Rectangle><Rectangle Height="3" Width="350" Fill="Black" Canvas.Top="220" Canvas.Left="100">
<Rectangle.RenderTransform><TransformGroup>
<SkewTransform AngleX="3"/> <RotateTransform Angle="-20"/></TransformGroup>
</Rectangle.RenderTransform></Rectangle>
. . .
</Canvas>
12
StackPanelStackPanel
13Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Eigenschaften von StackPanel
Die Steuerelemente in einem StackPanel werden (je nach Orientierung) entweder horizontal oder vertikal angeordnet.
Ohne die Angabe der Höhe/Breite (Height/Width ) besetzt ein enthaltenes Steuerelement die gesamte Breite oder Höhe
Ohne das Setzen von Abständen (Margin) kleben die Komponenten aneinander.Komponenten aneinander.
14
Vertikales StackPanel
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="125" Width="250">
<StackPanel Orientation="Vertical">
<Button Width="70" Margin="5">Start</Button>
<Button Width="100">Stop</Button>
<Button Margin="5">Reset</Button>
</StackPanel></StackPanel>
</Window>
15
Horizontales StackPanel
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="125" Width="250">
<StackPanel Orientation="Horizontal">
<Button Width="70" Margin="5">Start</Button>
<Button Width="100">Stop</Button>
<Button Margin="5">Reset</Button>
</StackPanel></StackPanel>
</Window>
16
Horizontales StackPanel: VerticalAlignment
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="350">
<StackPanel Orientation="Horizontal" Margin="10">
<Button VerticalAlignment="Top" Width="70" FontSize="20">Oben</Button>
<Button VerticalAlignment="Center" Width="70" FontSize="20">Mitte</Button>
<Button VerticalAlignment="Bottom" Width="70" FontSize="20">Unten</Button>
</StackPanel>
</Window>
17
Die vertikale Ausrichtung wird im horizontalen StackPanel durch die Eigenschaft VerticalAlignment definiert. Damit erhalten die Buttons eine dem Text-Inhalt angepasste Höhe.
Vertikales StackPanel: HorizontalAlignment
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="350">
<StackPanel Orientation="Vertical" Margin="10">
<Button HorizontalAlignment="Left" Width="70" FontSize="20">Links</Button>
<Button HorizontalAlignment="Center" Width="70" FontSize="20">Mitte</Button>
<Button HorizontalAlignment="Right" Width="70" FontSize="20">Rechts</Button>
</StackPanel>
</Window></Window>
18
Die horizontale Ausrichtung wird im vertikalen StackPanel durch die Eigenschaft HorizontalAlignmentdefiniert.
WrapPanelWrapPanel
19Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Eigenschaften von WrapPanel
Die Steuerelemente werden der Reihe nach hinzugefügt, entweder zeilen- oder spaltenweise.
Passen die Steuerelemente nicht mehr in eine Zeile (oder Spalte), wird eine neue Zeile oder Spalte angefangen.
Im horizontalen WrapPanel wird die Höhe der Steuerelemente einer Zeile vom höchsten Steuerelement (dem mit dem einer Zeile vom höchsten Steuerelement (dem mit dem grössten Platzbedarf) dieser Zeile definiert.
Im vertikalen WrapPanel wird die Breite der Steuerelemente einer Spalte vom breitesten Steuerelement (dem mit dem grössten Platzbedarf) dieser Spalte definiert.
20
Horizontales WrapPanel
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="220" Width="350">
<WrapPanel Orientation="Horizontal">
<Button FontSize="48" Margin="5">11111111</Button>
<Button FontSize="20" Margin="5">22222222</Button>
<Button FontSize="12" Margin="5">33333333</Button>
<Button FontSize="24" Margin="5">444444444444</Button><Button FontSize="24" Margin="5">444444444444</Button>
<Button FontSize="20" Margin="5">555555555555</Button>
<Button FontSize="36" Margin="5">6666666</Button>
</WrapPanel>
</Window>
21
Die Zeilen sind jeweils so hoch wie das höchste Element.
Vertikales WrapPanel
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="450">
<WrapPanel Orientation="Vertical">
<Button FontSize="48" Margin="5">11111111</Button>
<Button FontSize="20" Margin="5">22222222</Button>
<Button FontSize="20" Margin="5">33333333</Button>
<Button FontSize="24" Margin="5">444444</Button><Button FontSize="24" Margin="5">444444</Button>
<Button FontSize="20" Margin="5">5555555</Button>
<Button FontSize="36" Margin="5">6666666</Button>
</WrapPanel>
</Window>
22
Die Spalten sind jeweils so hoch wie das breiteste Element.
DockPanelDockPanel
23Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Eigenschaften von DockPanel
Die Steuerelemente werden im DockPanel am Rand oder in der Mitte des Fensters angedockt.
Die Rand-Elemente sind eher schmale Hilfsbereiche.
Das zentrale Element ist der Arbeitsbereich, in welchem die Haupt-Arbeit stattfindet.
Das zentrale Element wird als letztes ins DockPanel eingefügt Das zentrale Element wird als letztes ins DockPanel eingefügt und erhält den ganzen restlichen Platz.
Beispiele sind Word oder Visual Studio, wo die zentralen Arbeitsflächen im Zentrum liegen.
24
Einfüge-Reihenfolge im DockPanel
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="300">
<DockPanel >
<Button DockPanel.Dock="Top">Oberer Randbereich, 1</Button>
<Button DockPanel.Dock="Left">Links, 2</Button>
<Button DockPanel.Dock="Bottom">Unterer Randbereich, 3</Button>
<Button DockPanel.Dock="Right">Rechts, 4</Button><Button DockPanel.Dock="Right">Rechts, 4</Button>
<TextBox>Zentraler Bereich, als letztes eingefügt</TextBox>
</DockPanel>
</Window>
25
Einfüge-Reihenfolge und Mehrfach-Belegung
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="300">
<DockPanel >
<Button DockPanel.Dock="Top">Oberer Randbereich, 1</Button>
<Button DockPanel.Dock="Left">Links, 2</Button>
<Button DockPanel.Dock="Bottom">Unterer Randbereich, 3</Button>
<Button DockPanel.Dock="Right">Rechts, 4</Button><Button DockPanel.Dock="Right">Rechts, 4</Button>
<Button DockPanel.Dock="Top">Oberer Randbereich, 5</Button>
<TextBox>Zentraler Bereich, als letztes eingefügt</TextBox>
</DockPanel>
</Window>
26
Setzen von Breite und Höhe
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="300">
<DockPanel >
<Button DockPanel.Dock="Top" Width="120">Oben, 1</Button>
<Button DockPanel.Dock="Left" Height="30">Links, 2</Button>
<Button DockPanel.Dock="Bottom">Unten, 3</Button>
<Button DockPanel.Dock="Right" Height="30">Rechts, 4</Button><Button DockPanel.Dock="Right" Height="30">Rechts, 4</Button>
<Button DockPanel.Dock="Top">Oben, 5</Button>
<TextBox Background="Beige">Zentrum, 6</TextBox>
</DockPanel>
</Window>
27
GridGrid
28Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Eigenschaften von Grid
Das flexibelste Layout der WPF wird durch Grid beschrieben.
Der Bereich im Grid wird in Zeilen und Spalten aufgeteilt.
Im Grid muss zuerst die gewünschte Anzahl Zeilen (Grid.RowDefinitions) gesetzt werden.
Dann muss die gewünschte Anzahl Spalten (Grid.ColumnDefinitions) definiert werden. (Grid.ColumnDefinitions) definiert werden.
Grid wird im Editor als Layout-Container vorgeschlagen.
29
Definieren von Zeilen und Spalten
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="100" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
Zwei Zeilen (beidegleich hoch)
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0">(0, 0)</Button>
<Button Grid.Row="0" Grid.Column="2">(0, 2)</Button>
<Button Grid.Row="1" Grid.Column="1">(1, 1)</Button>
<Button Grid.Row="1" Grid.Column="2">(1, 2)</Button>
</Grid>
</Window>
30
Drei Spalten (allegleich breit)
Definieren von fixen Höhen und Breiten
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="70" />
Drei Zeilen, Zeilenhöhen fixiert auf 30,40,30 Pixel
Drei SpaltenSpaltenbreite fixiert auf 40,50,70 Pixel
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0">(0, 0)</Button>
<Button Grid.Row="0" Grid.Column="2">(0, 2)</Button>
<Button Grid.Row="1" Grid.Column="1">(1, 1)</Button>
<Button Grid.Row="2" Grid.Column="0">(2, 0)</Button>
<Button Grid.Row="2" Grid.Column="2">(2, 2)</Button>
</Grid>
31
Spaltenbreite fixiert auf 40,50,70 Pixel
Definieren von relativen Höhen und Breiten
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*" />
Drei Zeilen, Zeilenhöhe im Verhältnis 3:2:1
Drei SpaltenSpaltenbreite im Verhältnis 3:1:2
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0">(0, 0)</Button>
<Button Grid.Row="0" Grid.Column="2">(0, 2)</Button>
<Button Grid.Row="1" Grid.Column="1">(1, 1)</Button>
<Button Grid.Row="2" Grid.Column="0">(2, 0)</Button>
<Button Grid.Row="2" Grid.Column="2">(2, 2)</Button>
</Grid>
32
Spaltenbreite im Verhältnis 3:1:2
Automatisch angepasste Breiten und Höhen
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
Je nach Inhalt der Zeilen undSpalten werden die Höhe, bzw. die Breite dessen Bedürfnissenangepasst
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Width="70">(0, 0)</Button>
<Button Grid.Row="0" Grid.Column="2">(0, 2)</Button>
<Button Grid.Row="1" Grid.Column="1" Height="40">(1, 1)</Button>
<Button Grid.Row="2" Grid.Column="0">(2, 0)</Button>
<Button Grid.Row="2" Grid.Column="2">(2, 2)</Button>
</Grid>
33
Elemente über mehrere Zeilen und Spalten
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
Einzelne Steuerelemente könnenmehrere Zeilen und Spalten breit sein.Dies wird durch Grid.RowSpan bzw. Durch Grid.ColumnSpan definiert.
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">(0, 0)</Button>
<Button Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">(0, 1)</Button>
<Button Grid.Row="1" Grid.Column="1">(1, 1)</Button>
<Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">(2, 0)</Button>
<Button Grid.Row="1" Grid.Column="2" Grid.RowSpan="2">(1, 2)</Button>
</Grid>
34
Editor Unterstützung
Der Editor von Visual Studio stellt für das Definieren der verschiedenen Höhen und Breiten im Grid alle Auswahl-Möglichkeiten via Popup-Menu zur Verfügung.
Definieren der SpaltenDefinieren der Zeilen
35
UniformGridUniformGrid
36Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Eigenschaften von UniformGrid
UniformGrid ist eine vereinfachte Variante von Grid.
Alle enthaltenen Elemente werden in einem gleichmässigen Gitter dargestellt
Die Anzahl Zeilen und Spalten müssen nicht definiert werden.
Die enthaltenen Steuerelemente teilen sich den Platz gleichmässig auf.gleichmässig auf.
37
UniformGrid
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="200">
<UniformGrid>
<Button>1111</Button>
<Button>2222</Button>
<Button>3333</Button>
</UniformGrid>
Je nach Anzahl Steuerelementen wirddas UniformGrid zeilenweise gefüllt.
</UniformGrid>
</Window>
38
UniformGrid
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="350">
<UniformGrid>
<Button>1111</Button>
<Button>2222</Button>
<Button>3333</Button>
<Button>4444</Button>
Das UniformGrid wird zeilenweisegefüllt.
<Button>4444</Button>
<Button>5555</Button>
</UniformGrid>
</Window>
39
gefüllt.
UniformGrid, Anzahl Spalten und Zeilen
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="200">
<UniformGrid Columns="2" Rows="3">
<Button>1111</Button>
<Button>2222</Button>
<Button>3333</Button>
<Button>4444</Button>
Setzen der Anzahl Spalten mit Columns, Setzen der Anzahl Zeilen mit Rows
<Button>4444</Button>
<Button>5555</Button>
<Button>6666</Button>
</UniformGrid>
</Window>
40
UniformGrid, Anzahl Spalten, Zeilen und Ränder
<Window x:Class="Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="90" Width="200">
<UniformGrid Columns="3" Rows="1" Margin="20,40,20,3">
<Button>Start</Button>
<Button>Stop</Button>
<Button>Reset</Button>
</UniformGrid></UniformGrid>
</Window>
41
Kombinieren von Kombinieren von Panels
42Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Kombination von DockPanel mit UniformGrid
<Window x:Class="KombLayout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="300">
<DockPanel>
<StatusBar DockPanel.Dock="Bottom" Height="20" Background="LightGray">
<Label FontSize="10" Padding="0">Gestoppt</Label>
</StatusBar>
<UniformGrid DockPanel.Dock="Bottom" Rows="1" Width="200" Margin="5">
<Button FontSize="16">Start</Button><Button FontSize="16">Start</Button>
<Button FontSize="16">Stop</Button>
<Button FontSize="16">Reset</Button>
</UniformGrid>
<UniformGrid Rows="1" Margin="20,20,20,0">
<Label FontSize="18" Content="Zeit"/>
<Label FontSize="18" Content="0:0"></Label>
</UniformGrid>
</DockPanel>
</Window>
43
Kombination von DockPanel mit WrapPanel
<Window x:Class="KombLayout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="250">
<DockPanel>
<StatusBar DockPanel.Dock="Bottom" Height="20" Background="LightGray">
<Label FontSize="10" Padding="0">Gestoppt</Label>
</StatusBar>
<WrapPanel DockPanel.Dock="Bottom" Width="160">
<Button FontSize="16" Margin="5">Start</Button><Button FontSize="16" Margin="5">Start</Button>
<Button FontSize="16" Margin="5">Stop</Button>
<Button FontSize="16" Margin="5">Reset</Button>
</WrapPanel>
<WrapPanel Width="200">
<Label FontSize="18" Content="Zeit" Margin="20,10"/>
<Label FontSize="18" Content="0:0" Margin="20,10"></Label>
</WrapPanel>
</DockPanel>
</Window>
44
Kombination von verschiedenen Panels
<DockPanel><Label DockPanel.Dock="Top">Eingabefenster</Label><StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="80" Margin="3">Speichern</Button><Button Width="80" Margin="3">Abbrechen</Button>
</StackPanel><UniformGrid DockPanel.Dock="Bottom" Rows="1">
<CheckBox Margin="5">Bold</CheckBox><CheckBox Margin="5">Italic</CheckBox>
</UniformGrid><Grid><Grid>
<Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="*" />
</Grid.ColumnDefinitions><Grid.RowDefinitions>
<RowDefinition /></Grid.RowDefinitions><TextBox Grid.Row="1"></TextBox><StackPanel Grid.Row="1" Grid.Column="1">
<Button Margin="5">Einfügen ... </Button><Button Margin="5">Text Löschen</Button>
</StackPanel></Grid>
</DockPanel> 45