Sonntag, 10. November 2013

WPF Tutorial Teil 3 - Layout mit WPF

Im heutigen Post möchte ich Einführendes zum Thema  Layouting in WPF sagen.
Im vorigen habe ich die Erstellung einer ersten WPF Anwendung gezeigt. Dafür hatten wir einfach ein Grid auf dem Formular angelegt und Steuerelemente hinzugefügt, die Positionierung etc. dann dem Programm selber überlassen. Heute möchten wir diese selber in die Hand nehmen.
Ziel ist die Erstellung einer Anwendung mit folgendem Aussehen:














Wie ihr im letzten Post vielleicht bemerkt habt, legt sich ein Grid automatisch über das ganze Formular und passt sich Größenänderungen an. Das gleiche gilt für Steuerelemente, sie nehmen jeweils den größtmöglichen Bereich ein, im Grind also z.B. ihre Zelle.
Wir ändern nun zuerst das Verhalten des Grids:

<Grid Height="160" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="15">

Mit Height und Width legen wir Höhe und Breite dieses fest. Füllt das Grid nicht das komplette Formular aus, wird es standardmäßig zentriert dargestellt. Deswegen fügen wir, um das gewünschte Layout zu erreichen, die Eigenschaften zur horizontalen und vertikalen Ausrichtung ein und setzen diese auf Links bzw. Oben.
Auch beim Anlegen der Zeilen im Grid mischen wir uns ein, und setzen die Höhe auf den von uns gewollten Wert:

<RowDefinition Height="30"/>

Das gleiche tun wir bei den Steuerelementen, auch hier legen wir Höhe bzw. Breite manuell fest. Die Höhe setzen wir jeweils auf 25, sodass sich die sichtbaren Abstände zwischen den Textboxen ergeben.

Der komplette XAML Code sieht folgendermaßen aus:

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="325">

        <Grid Height="160" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="15">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
        
            <TextBox Name="txtName" Grid.Row="0" Grid.Column="0" Height="25"></TextBox>
            <TextBox Name="txtFirstName" Grid.Row="1" Grid.Column="0" Height="25" ></TextBox>
            <TextBox Name="txtSalary" Grid.Row="2" Grid.Column="0" Height="25"></TextBox>
            <TextBox Name="txtPosition" Grid.Row="3" Grid.Column="0" Height="25"></TextBox>
            <Button Name="btnNew" Grid.Row="4" Grid.Column="0" Width="100" Height="25">Click</Button>
        </Grid>
</Window>


Aber natürlich ist Grid nicht die alleinige Wahl, 2 weitere Möglichkeiten die ich kurz erwähnen möchte sind Canvas und DockPanel.
In einem Canvas können Elemente frei positioniert werden durch Nutzung von Koordinaten relativ zum Canvas (das ist wahrscheinlich die am meisten Windows Forms ähnelnde Möglichkeit).
Das obige Layout kann dann wie folgt mit einem Canvas umgesetzt werden:

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="325">

    <Canvas Height="160" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="15">
        <TextBox Name="txtName" Canvas.Left="0" Canvas.Top="0" Width="100" Height="25"></TextBox>
        <TextBox Name="txtFirstName" Canvas.Left="0" Canvas.Top="30" Width="100" Height="25" ></TextBox>
        <TextBox Name="txtSalary" Canvas.Left="0" Canvas.Top="60" Width="100" Height="25"></TextBox>
        <TextBox Name="txtPosition" Canvas.Left="0" Canvas.Top="90" Width="100" Height="25"></TextBox>
        <Button Name="btnNew" Canvas.Left="0" Canvas.Top="120" Width="100" Height="25">Click</Button>
    </Canvas>
</Window>


Ein DockPanel ähnelt einem Grid, hier können verschiedene Zellen angelegt werden in welchen dann Steuerelemente platziert werden können.

Keine Kommentare:

Kommentar veröffentlichen