Setzen des Layout in der WPFamrhein/Skripten/Info2/04.Layout.pdf · 2016-03-14 · Überblick Die WPF Layout Container Die wichtigsten Eigenschaften Canvas StackPanel Horizontal oder

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.


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.


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.


Werkzeugkasten

Diese Panels werden alle auch im Werkzeugkasten (Toolbox) angeboten.

Der Editor bietet allerdingsnur wenig Unterstützungfür das definitive Layouting


für das definitive Layouting(Einteilung, Reihenfolge, Grösse, Abstände).


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


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





<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





<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





<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





<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


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





<WrapPanel Orientation="Horizontal">

<Button FontSize="48" Margin="5">11111111</Button>



<Button FontSize="24" Margin="5">444444444444</Button><Button FontSize="24" Margin="5">444444444444</Button>



</WrapPanel>

</Window>

21

Die Zeilen sind jeweils so hoch wie das höchste Element.

Vertikales WrapPanel





<WrapPanel Orientation="Vertical">




<Button FontSize="24" Margin="5">444444</Button><Button FontSize="24" Margin="5">444444</Button>



</WrapPanel>

</Window>

22

Die Spalten sind jeweils so hoch wie das breiteste Element.

DockPanelDockPanel


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





<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





<DockPanel >


<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>

26

Setzen von Breite und Höhe





<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


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





<Grid>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

Zwei Zeilen (beidegleich hoch)


<ColumnDefinition />



</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0">(0, 0)</Button>




</Grid>

</Window>

30

Drei Spalten (allegleich breit)

Definieren von fixen Höhen und Breiten

<Grid>


<RowDefinition Height="30"/>





<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>

31

Spaltenbreite fixiert auf 40,50,70 Pixel

Definieren von relativen Höhen und Breiten

<Grid>


<RowDefinition Height="3*"/>





<ColumnDefinition Width="3*"/>


<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>

32

Spaltenbreite im Verhältnis 3:1:2

Automatisch angepasste Breiten und Höhen

<Grid>


<RowDefinition Height="Auto"/>





<ColumnDefinition Width="Auto"/>



Je nach Inhalt der Zeilen undSpalten werden die Höhe, bzw. die Breite dessen Bedürfnissenangepasst



<Button Grid.Row="0" Grid.Column="0" Width="70">(0, 0)</Button>


<Button Grid.Row="1" Grid.Column="1" Height="40">(1, 1)</Button>



</Grid>

33

Elemente über mehrere Zeilen und Spalten

<Grid>










Einzelne Steuerelemente könnenmehrere Zeilen und Spalten breit sein.Dies wird durch Grid.RowSpan bzw. Durch Grid.ColumnSpan definiert.



<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="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


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





<UniformGrid>

<Button>1111</Button>



</UniformGrid>

Je nach Anzahl Steuerelementen wirddas UniformGrid zeilenweise gefüllt.

</UniformGrid>

</Window>

38

UniformGrid





<UniformGrid>





Das UniformGrid wird zeilenweisegefüllt.



</UniformGrid>

</Window>

39

gefüllt.

UniformGrid, Anzahl Spalten und Zeilen





<UniformGrid Columns="2" Rows="3">





Setzen der Anzahl Spalten mit Columns, Setzen der Anzahl Zeilen mit Rows




</UniformGrid>

</Window>

40

UniformGrid, Anzahl Spalten, Zeilen und Ränder





<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


Kombination von DockPanel mit UniformGrid

<Window x:Class="KombLayout.MainWindow"




<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"




<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

Documents

Setzen des Layout in der WPFamrhein/Skripten/Info2/04.Layout.pdf · 2016-03-14 · Überblick Die WPF Layout Container Die wichtigsten Eigenschaften Canvas StackPanel Horizontal oder