Page 1 of 1

Beginning WPF Layouts - Using the Grid. Part 1, of a tutorial series dedicated to WPF layouts.

#1 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 63
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Post icon  Posted 26 January 2010 - 06:37 PM

Welcome to Part 1 of my WPF Layout tutorial.

I'll start things off here by assuming that you know absolutely nothing about WPF.

First let's read about what WPF is:

Multivac said:

The Windows Presentation Foundation (or WPF) is a graphical subsystem for rendering user interfaces in Windows-based applications.


In layman terms, it's a system that allows you to make beautiful UI's for your application much more easily.

"So, what benefits does WPF bring to the table?"

I've used it before many times in personal projects, and from my use, I found two major benefits from using WPF:

1. I can make my UI resize itself very easily. Extremely easy actually.
2. UI code is completely seperate from C#/VB.Net code.


A word of warning before we start:
WPF can and will stump you at first. The trick in learning WPF like anything new, is to push and push until you reach the infamous 'wall'. Then push some more.

Once you get the hang of declaring your UI using XAML code, it'll become second nature. It'll get to the point where you feel Windows Forms is genuinely smelly and WPF is what should have been. :)

********************************************************
****************SO HOW DO I MAKE MY GUI?****************
********************************************************

With that said, let's start our tutorial.

Open up Visual C# Express 2008 and create a new WPF project.

You'll be greeted by a blank Window in the design tab and some XAML code on the bottom. GUI's in WPF are declared using XML code. It's very much like XML, so if you've used it in the past, you'll be a bit more comfortable with the markup.

In a WPF application, you're generally going to proceed by using either a Grid layout, a StackPanel layout, or DockPanel layout as a base. By base, I mean as the root XAML tag. You are most likely going to combine these to get exactly what you're looking for.

Let's start by declaring a grid based layout.


********************************************************
*******************GRID BASED LAYOUT********************
********************************************************

If you create a new WPF application, you will already have a <Grid> tag created for you.

Your XAML markup should look like this:

<Window x:Class="BasicLayoutTutorial1.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>



A Grid component behaves much like an HTML table. You can declare the heigh of individual 'cells', the backcolor, the rows, the columns and much more.

Let's try to make our Grid stand out a bit more. Let's give it a blue background and have the grid lines appear visible.

<Window x:Class="BasicLayoutTutorial1.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 Background="LightBlue" ShowGridLines="True">
        
    </Grid>
</Window>



Posted Image

See how we can change properties of a control by using just tags? Visual Studio helps you out tremendously by listing all the available properties you can modify.


Let's declare a nice 3x3 grid.

<Window x:Class="BasicLayoutTutorial1.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 Background="LightBlue" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    </Grid>
</Window>



Posted Image

XAML is very structured and as such you will most likely end up with some big .XAML files, but it's worth it because it's very easy to see relationships in such a structured syntax.

Inside of the <Grid> tags you declare a <Grid.ColumnDefinition>, and inside of that tag, you declare how many columns you want that <Grid> to have.

Columns and rows are numbered starting from 0. To illustrate this, let's create a button in the middle column/row. Right in the center of our grid.

<Window x:Class="BasicLayoutTutorial1.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 Background="LightBlue" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="1" Grid.Column="1" Content="Hi there!" />
    </Grid>
</Window>



Posted Image

We just created a <Button> tag and assigned in what Grid.Row and Grid.Column it was located in.

In Windows Forms, the text of a button is set in the button1.Text property, in WPF, it's the Content property.


One other thing that you can do with the Grid is stater how wide/high you want your columns/rows to be.

Logically you cannot state how long a row will be, or how high a column will be.

In this next example, we're going to make the first column be thin and the first row be very fat.

<Window x:Class="BasicLayoutTutorial1.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 Background="LightBlue" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40"/>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="1" Grid.Column="1" Content="Hi there!" />
    </Grid>
</Window>



Posted Image

There you have it, dead simple! That's the beauty of WPF. If you are getting a bit lost, do not panic. Everyone goes through this, don't give up and everything will click when you least expect it!

Now for the final bit of information on the <Grid> control.

You can use the 'Span' property to allow controls to overflow into neighboring cells. Let's take out previous example. Let's say we want our button to overflow to the next column. You would do this easily:

<Window x:Class="BasicLayoutTutorial1.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 Background="LightBlue" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40"/>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="1" Grid.Column="1" Content="Hi there!" Grid.ColumnSpan="2"/>
    </Grid>
</Window>



Posted Image

Here's what you're saying in the XAML:
"From the point where I set the button, let it take up 2 more columns."

The span will always go to the right/bottom. If you were to put a Grid.ColumnSpan="1", nothing would visibly happen.

********************************************************
*******************THAT'S ALL FOLKS!********************
********************************************************

That covers pretty much all the useful bits about the <Grid> control in WPF.

Feel free to leave questions/comments/corrections.

********************************************************
*******************SUGGESTED EXERCISES******************
********************************************************

1. Create a button on the neccesary cells to create this pattern, 'X' marks where the button should be created, '_' marks an empty cell.
X _ X
_ X _
X _ X



2. Create a cross shape using only buttons on the required cells.

3. Make the background orange and create a two column layout. Place buttons on every row of the first column, and labels on every row of the second column. (labels act very similar to buttons, you shouldn't have problems)

4.Design a nice 2x2 grid. Have the first column be 50 wide, have the first row be 100 high. Make the background LightGreen or it will be ugly!

What you should know so far:

If you've followed this tutorial up to this part, you should know the following:
1. What a <Grid> is.
2. How declare rows and columns in your Grid.
3. How to position controls inside of your Grid.
4. How do change the width of a column; the height of a row.

Is This A Good Question/Topic? 2
  • +

Replies To: Beginning WPF Layouts - Using the Grid.

#2 Guest_JR*


Reputation:

Posted 22 July 2010 - 05:32 AM

good
Was This Post Helpful? 0

Page 1 of 1