Post
Ask Question

Overview of Layouts in Windows Store App

Introduction

In this article we are talking about Layouts in Windows Store Apps. We develop either for Windows Forms or Windows Store Apps. In both of the cases, developers rely on a container (and, you say layouts). Since it doesn't affect much of the design part, but it helps developers to do their design.

Talking about Silverlight, we have many Layout controls to use but in Windows Store we generally use Grid and Stack Panel.

Windows 8

So, our Agenda will be:

  • Prime knowledge about Layouts
  • Implement Grid on blank XAML page
  • Then, use Stack Panel inside grid

Background

Before starting your App development, you should keep the basic layout in your mind. You can design your layout by a Grid that is similar to a tabular view. So, your first step will be the Grid's definition.
Whereas a Stack Panel is something like a stack of items and it can be horizontally aligned or vertically aligned (in other words one after another).

Procedure

So, let's do a Grid demo.

  1. <Grid>  
  2. <Grid.RowDefinitions>  
  3. <RowDefinition/>  
  4. <RowDefinition/>  
  5. </Grid.RowDefinitions>  
  6. <Grid.ColumnDefinitions>  
  7. <ColumnDefinition/>  
  8. <ColumnDefinition/>  
  9. <ColumnDefinition/>  
  10. </Grid.ColumnDefinitions>  
  11.   
  12. <TextBlock Grid.Row="0" Text="Layout Demo" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="80" Foreground="White"/>  
  13. <Rectangle Grid.Column="0" Grid.Row="1" Fill="Magenta"/>  
  14. <Rectangle Grid.Column="1" Grid.Row="1" Fill="Cyan"/>  
  15. <Rectangle Grid.Column="2" Grid.Row="1" Fill="Lime"/>  
  16.   
  17. </Grid>  

 

In this Grid definition, we have 2x3 grids (in other words 2 Rows and 3 Columns).

Further, we add three colored rectangles to all three columns. And it looks like:

Grid Demo

Now, add some Stack Panels in each of the columns.

 

  1. <!-- FIRST COLLUMN -->  
  2. <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0" Margin="20">  
  3. <Button Content="One" HorizontalAlignment="Center" FontSize="30" Width="400" Height="100"/>  
  4. <Button Content="Two" HorizontalAlignment="Center" FontSize="30" Width="400" Height="100"/>  
  5. <Button Content="Three" HorizontalAlignment="Center" FontSize="30" Width="400" Height="100"/>  
  6. </StackPanel>  
  7.   
  8. <!-- SECOND COLLUMN-->  
  9. <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="20">  
  10. <Button Content="One" HorizontalAlignment="Center" FontSize="30" Width="200" Height="200"/>  
  11. <Button Content="Two" HorizontalAlignment="Center" Width="200" FontSize="30" Height="200"/>  
  12. </StackPanel>  
  13.   
  14. <!-- THIRD COLLUMN -->  
  15. <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="2" Margin="20">  
  16. <Button Content="One" FontSize="30" HorizontalAlignment="Center" Width="400" Height="100"/>  
  17. <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">  
  18. <Button Content="Two" HorizontalAlignment="Center" Width="100" Height="100"/>  
  19. <Button Content="Two" HorizontalAlignment="Center" Width="100" Height="100"/>  
  20. <Button Content="Two" HorizontalAlignment="Center" Width="100" Height="100"/>  
  21. <Button Content="Two" HorizontalAlignment="Center" Width="100" Height="100"/>  
  22. </StackPanel>  
  23. <Button Content="One" FontSize="30" HorizontalAlignment="Center" Width="400" Height="100"/>  
  24. </StackPanel>  

When you use a Stack Panel you must take care of Orientation and it Horizontal alignment/ Vertical Alignment. The outcome will be:

 

Layout Demo

Conclusion

Maintaining a good layout is as important as coding. From a designer's point of view, it takes your app from rags to riches.


Similar Articles