Android Addicted Apps Creator

May 27, 2009

WPF Lesson One – Layouts (The beginning)

Filed under: Uncategorized — alinberce @ 16:25
Tags: , ,

(as usual, videos are at the bottom of the post)

Hello. I decided to make a turn on my learning curve, so I decided to switch to WPF – XAML… Funny name it sounds like “zama”, a word that means some sort of food in my native language.

Because I’m a beginner, I will start, of course, with the basics.

What I can say about WPF is that it represents a pretty dramatic change in the way I approach user interfaces. In first version of .NET controls where fixed using hard coded coordinates (Top, Left). So… not a really "changeable" interface. The only things that saved the day were anchoring and docking properties. In the second .NET
we had FlowLayoutPanel and TableLayoutPanel. By using this, the interface became more flexible and more web-like.
WPF introduces a new layout system in which coordinates are placed on a second place and flow layouts becomes the winner. This gives us the possibility to create flexible interfaces which aren’t that dependent on resolution or size.

The main idea beneath the WPF window is that it can contain only one element. First thing that comes to my mind is: How I’ll do all the complex interfaces I think of if the window can hold only one element. Answer is simple: just place a container in the windows… and add all the elements in that container.

The  WPF layout containers are panels and can be:

  • StackPanel – Places elements in a horizontal or vertical stack.
  • WrapPanel – Places elements in a series of wrapped lines.
  • DockPanel – Aligns elements against an entire edge of the container.
  • Grid – Arranges elements in rows and columns according to an invisible table.

All this new names and properties may sound wired to you… it did sounded wired when I first read about them, but we’ll take it step by step and in the end, everything will be clear as daylight.

Let’s begin by creating a new Project of type Wpf Application, named WPFLesson1. By default Visual Studio creates a new window called Window1.xaml. Because the Grid panel is the almighty one, it is added by default.

 

<Window x:Class="WPFLesson1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        
    </Grid>
</Window>

The StackPanel – For the beginning I will start with the StackPanel. Delete the <Grid></Grid> and add a StackPanel with one label and three buttons in it.

<Window x:Class="WPFLesson1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <Label>Hello... This is StackPanel Label</Label>
        <Button>First Button </Button>
        <Button>Second Button </Button>
        <Button>Third Button </Button>
    </StackPanel>
</Window>

Run the project and it should look like this:

1

Without adding any code, the label and buttons were arranged from the top to the bottom. All these elements are stretched to full width of the panel, and their height is automatically set to be enough to display the text inside them.

If I want items to be displayed Horizontally, then all I must do is modify the <StackPanel> to this:

 <StackPanel Orientation="Horizontal">

Run the project and see if it looks like this:

2

As can be seen, the Height of element’s height are stretched to panel’s weight, and their width is set to accommodate the text.

Let’s revert on how was before and try to make some alignment. We’ll make the label on the Left, First button on the center and last button on the right. To do this, we’ll use the HorizontalAlignament of the elements.

<StackPanel>
        <Label HorizontalAlignment="Left">Hello... This is StackPanel Label</Label>
        <Button HorizontalAlignment="Center">First Button </Button>
        <Button>Second Button </Button>
        <Button HorizontalAlignment="Right">Third Button </Button>
    </StackPanel>

3

Well, well, well as you can see the result is as intended, but important thing: no more stretch for the elements we aligned.

There are two more important things for me to tell you: margins and Minimum/Maximum sizes. If I want some space between a control and the controls around it, I use the Margin property. Setting explicit sizes for a control in WFP is not really recommended, but setting a range of size for it, is recommended.

 <StackPanel>
        <Label Margin="5" MaxWidth="400" HorizontalAlignment="Left">Hello... This is StackPanel Label</Label>
        <Button Margin="5" MaxWidth="400" HorizontalAlignment="Center">First Button </Button>
        <Button Margin="5" MaxWidth="200" >Second Button </Button>
        <Button Margin="5" MaxWidth="400" HorizontalAlignment="Right">Third Button </Button>
    </StackPanel>

4

The WrapPanel – arranges controls in the available space, one line or column at a time.

<WrapPanel>
        <Label Margin="5" MaxWidth="400" HorizontalAlignment="Left">Hello... This is StackPanel Label</Label>
        <Button Margin="5" MaxWidth="400" HorizontalAlignment="Center">First Button </Button>
        <Button Margin="5" MaxWidth="200" >Second Button </Button>
        <Button Margin="5" MaxWidth="400" HorizontalAlignment="Right">Third Button </Button>
    </WrapPanel>

5

Resize it to see how the WrapPanel does it’s job.

The DockPanel – do you want controls stretched on one side of a panel ? Don’t worry, DockPanel is here.

    <DockPanel>
        <Label DockPanel.Dock="Top" Margin="5" MaxWidth="400" HorizontalAlignment="Left">Hello... This is StackPanel Label</Label>
        <Button DockPanel.Dock="Left" Margin="5" MaxWidth="400" HorizontalAlignment="Center">First Button </Button>
        <Button DockPanel.Dock="Bottom" Margin="5" MaxWidth="200" >Second Button </Button>
        <Button DockPanel.Dock="Right" Margin="5" MaxWidth="400" HorizontalAlignment="Right">Third Button </Button>
    </DockPanel>

6

The Grid – the grid panel separates elements into a grid of rows and columns. With it we can do pretty much all that we can do with previous explained panels. Using this panel implies two steps: first chose the numbers of rows and columns, second assign each element to the appropriate row and column. Grid lines are invisible, but I will enable it for our lesson.

<Grid ShowGridLines="True">
           <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Label  Grid.Row="0" Grid.Column="0" Margin="5" MaxWidth="400" HorizontalAlignment="Left">Hello... </Label>
            <Button  Grid.Row="1" Grid.Column="0" Margin="5" MaxWidth="400" HorizontalAlignment="Center">First Button </Button>
            <Button   Grid.Row="0" Grid.Column="3" Margin="5" MaxWidth="200" >Second Button </Button>
            <Button  Grid.Row="1" Grid.Column="1" Margin="5" MaxWidth="400" HorizontalAlignment="Right">Third Button </Button>
    </Grid>

7

As you may think already, these panels won’t be used alone. To develop ergonomic user friendly interfaces these panels must be combined. So we’ll start to use our knowledge to create something useful: a classic text edit window. Not only that we will have it done, but we’ll do it in 2 ways. And I’m sure that there are some more ways to do it. (As someone said: each thing in a program can be done in at least 4-5 different ways).

First attempt: using a DockPanel and a StockPanel

The windows will have the following format: a big textbox at the top and two buttons at the bottom for Save and Cancel. For the buttons we’ll use a StockPanel. This panel will be put inside of a DockPanel at the bottom side of it. Set LastChildFill to true, so you can use the rest of the windows to fill in another content.

    <DockPanel LastChildFill="True">
        <StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
            <Button Margin="8,8,4,8" Padding="3">Save</Button>
            <Button Margin="4,8,8,8" Padding="3">Cancel</Button>
        </StackPanel>
        <TextBox DockPanel.Dock="Top" Margin="10">Write some text in here.</TextBox>
    </DockPanel>

Run the project and see what happens

8

Was this easy or what ? But what if I tell you that this can be done even easier ?  What ?  You don’t believe me ?

Second attempt: the mighty Grid Panel

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox Margin="10" Grid.Row="0">Write some text in here.</TextBox>
        <StackPanel Grid.Row="1" HorizontalAlignment="Center" Orientation="Horizontal">
            <Button Margin="10,10,2,10" Padding="3">Save</Button>
            <Button Margin="2,10,10,10" Padding="3">Cancel</Button>
        </StackPanel>
    </Grid>

9

Pretty easy, huh ?  I told you so…

And we came to the end of a very nice lesson. We’ve learn about WPF layouts what they are and how we use them. A very good book for learning is :”Pro WPF in C# 2008” by Matthew MacDonald

I really hope that I’ve been helpful. So, until next time: Happy coding!

Because of the restricted length in youtube videos of 10 minutes, today you’ll have 2 parts

Advertisements

4 Comments »

  1. Awesome intro to WPF !

    Comment by Alex — September 13, 2009 @ 00:04 | Reply

  2. Thank you for your comment. I hope that new tutorials will be better.

    Comment by alinberce — September 13, 2009 @ 17:09 | Reply

  3. Thank u.Very comprehensive start for WPF.Keep going

    Comment by DIna — October 10, 2009 @ 16:55 | Reply

  4. your article has made me fear less from that “weird” XAML thing.
    what can i do, I like the old fashion 😦

    thank you !

    Comment by Jimmy Park — September 18, 2011 @ 16:15 | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: