Grid Vs Stack Panel In WPF

Are you new to WPF and confused about using grid and stack panel? If you answered yes, then you are at the right place.

When I started WPF development, I was new to XAML and the first confusion in my mind was about the usage of Grid and Stack panel. What’s the difference and which one to use?

Let me guide you about this. In past, the layouts used to be simple but now we want them adaptive to make them able to run on multiple devices. Firstly, keep in mind that both are containers. Containers are used for positioning in windows platform foundation controls. They have children property so they can hold multiple elements. By embedding any control inside of a layout control, you are implicitly calling the Add method of the Children collection property.

Grid

When you create a new project, grid is there for you by default. This grid has one row and one column and make it a one large cell covering the whole space. Grid is like a matrix and you can place your element by telling it the row and column.

In this example I will make a grid of 3x3 means 9 cells and then we can place our elements in any particular cell.

Make three rows and columns by writing the following code:

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

Height and width is used to define the size of a particular row and column and any cell can have any size. Size can be expressed in the following three ways:

1. Explicit pixels but not preferred – 100.
2. Auto - use the largest value of elements it contain to define the width / height.
3. * (Star Sizing) - Utilize all the available space
   
   
   • 1* - Of all available space, will be given 1 "share".
   • 2* - Of all available space, will be given 2 "shares".
   • 3* - Of all available space, will be given 3 "shares".
   • * - of all available space, will be given whole share.

This following code will make the matrix having numbers in them and you can access them by using Grid.Row="" & Grid.Column="" properties and can have desired elements in it.

<Page.Resources>
    <Style TargetType="TextBlock">
    <Setter Property=Value="42" /> <Setter Property="Foreground" Value="Black" />
    </Style>
</Page.Resources>
<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" /> </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
    <TextBlock>1</TextBlock>
    <TextBlock Grid.Column="1">2</TextBlock>
    <TextBlock Grid.Column="2">3</TextBlock>
    <TextBlock Grid.Row="1">4</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>
    <TextBlock Grid.Row="2">7</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>
</Grid>

This will generate the following output:

Stack Panel

Stack Panel acts like a stack of things placed one after another. It can be horizontal or vertical. Unlike Grid you cannot access particular place in a stack panel, every next element will be placed after one another in a sequence.

Stack Panel has Vertical Orientation by default and left to right flow by default if selected horizontal orientation.

The following code will generate a stack panel having three colored rectangles stacked vertically on each other.

<StackPanel Orientation="Vertical">
    <Rectangle Height="200" Width="Auto" Fill="Yellow"></Rectangle>
    <Rectangle Height="200" Width="Auto" Fill="Green"></Rectangle>
    <Rectangle Height="200" Width="Auto" Fill="Blue"></Rectangle>
</StackPanel>

As vertical orientation is by default so there is no need to mention the orientation. This code will generate the following output.



The following code will generate stack panel in horizontal orientation:

<StackPanel Orientation="Horizontal">
    <Rectangle Height="Auto" Width="100" Fill="Yellow"></Rectangle>
    <Rectangle Height="Auto" Width="100" Fill="Green"></Rectangle>
    <Rectangle Height="Auto" Width="100" Fill="Blue"></Rectangle>
</StackPanel>

This will have the following output:



Conclusion

As you can observe clearly by yourself the difference between these all, now you can decide which one to use when.

Stack panels can have stack panels inside a stack panel which can be combined to make beautiful layouts. Stack panels are preferred while making lists type layout. This is done so each element can be stacked one over another and they can be adjusted on multiple screens accordingly.

Grids are used when you want to define particular cell and don’t want your element to be in a sequence.

Grid will overlap controls but StackPanel will stack them. Both have their own usage and you can make choice according to your needs.

Source Code

• SPvsGrid