Sunday, November 10, 2013

WPF Tutorial Part 3 - Layout with WPF

In today's post I want to talk about introductory things regarding the topic layouting with WPF.
In the previous one I showed the creation of a first WPF application. For that we simply had placed a grid on the form and added controls, then let the program do the positioning etc. Today we want to do it.
Goal is the creation of an application with the following appearance:















As you maybe have seen in the previous post, a grid automatically stretches over the whole form and adapts to size changes. The same holds for controls, they always stretch as far as possible, in a grid for example over their whole cell.
We now change the behavior of the grid:

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

With Height and Width we set height and width of it. If a grid does not fill the whole form, it is put in the center by default. To reach the desired layout, therefore we add the properties for horizontal and vertical align and set them to Left and Top.
Also the creation of cells in the grid we influence by setting the height on the desired value:

<RowDefinition Height="30"/>

We do the same for controls, also here we set height and width manually. We set the height to 25, so the visible distances between the textboxes occur.

The complete XAML code looks as follows:

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

But of course there is not only the possibility of using Grid.
2 other layout wrappers I want to mention are Canvas and DockPanel.
In a canvas, elements can be freely positioned using coordinates relative to the canvas (this is probably the most similiar option to Windows Forms).
The above layout can be achieved as follows using a canvas:

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


A DockPanel is similiar to a grid, in it different cells can be created, in which then controls can be placed.

No comments:

Post a Comment