XAML: Layout controls Part I

XAML Controls(Image by blogs.msdn.com)

So far we have seen how to create a normal ‘Hello World’ application on Universal Windows Platform using Visual Studio 2015. This article will focus on understanding different type of layouts available to create a nice designing template for windows phone applications. Following is a list of main layout controls which XAML offers:

  1. Border
  2. Canvas
  3. Grid
  4. Relative Panel
  5. ScrollViewer
  6. SplitView
  7. StackPanel
  8. VariableSizedWrapGrid
  9. ViewBox

We will talk about first three controls in this blog.

Border

As the name states, it helps to create a border around the element. We may define the background color, border width and the brush color we want to use to create the border. Following code displays an example of how border may be used in XAML:

<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="50" >
            <StackPanel Margin="10">
                <Button>Button</Button>
                <Button Margin="0,10">Button 2</Button>
                <Button>Button 3</Button>
            </StackPanel>
</Border>

To know what exactly the above code does, let us go through it line-by-line.

Line 1: Defines what the border and its associated properties will be. We are asking to display the border with the background of color ‘GhostWhite’, brush of type “Gainsboro” and let the thickness of the border be around 10px.

Line 2 & 6: These are starting and ending of StackPanel tags. We will go through it later on in this article.

Line 3, 4, & 5: Defines three buttons to be added to StackPanel which is defined above and let their name be “Button 1″, “Button 2″ and “Button 3″ respectively.

Overall we are describing a border around stackpanel which has three buttons defined inside it. Following is the output we receive.

We may see that the border is defined around the whole stack panel control which contains the button in it.
XAML Controls Border

Canvas

Canvas is used when you want to create a place which will carry many child objects. In other words, Canvas maybe defined as an area within which you may add different child elements by explicitly defining their positions. Positions are set using the coordinates that are relative to the Canvas area.

 <Canvas Background="Brown" Margin="20">
            <Button>Button 1</Button>
            <Rectangle Fill="Black" Width="150" Height="150" Margin="100,40,20,0"  />
 </Canvas>

In the above code, we defined canvas and then added a button and Rectangle followed by it. In canvas everything is laid in relative to canvas area. While defining canvas, we have placed a margin of 20px on each side of it, therefore the canvas will carry 20px margin on all four sides and the child elements will display their positions in relative to canvas area. We didn’t put any spaces while defining button, the button will appear in the top left corner of the canvas because all the calculation is performed starting from top left corner. In case of rectangle, which is a square as its height and width is same, we have defined the margins – left side with 100px and top 40px. Again these margins are from top left side from where the canvas starts.

Following is our final output on the emulator, as expected.
XAML Controls Canvas

Grid

Grid is a control which is just like a spreadsheet and contains the rows and columns. We add the child elements to it in specific row and column. This helps to keep the track the track of which row and column of the grid is showing which element.

In the code, we define rows (using the tag RowDefinition) and then we define the columns (using the tag ColumnDefinition) and then we add the elements stating row number and column number.

 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
      <Ellipse Fill="Red" Width="60" Height="60" Grid.Row="0" Grid.Column="0" />
        <Rectangle Fill="DarkSeaGreen" Width="200" Height="200" Grid.Row="1" Grid.Column="2" />
    </Grid>

Lets go through the code line-wise to get an understanding how this control has been implemented.

Line 1 & 14: The beginning and ending of tags Grid

Line 2 & 6: The beginning and ending of Row Definition tags. Within these tags, we define how many rows will the grid contain and what will be the properties of each row.

Line 3, 4, 5: Each row is defined separately. The first two rows are defined with heights set to Auto and the third line is defined with the height equal to the rest of the space available in the grid. The first two rows will take the height depending on the contents available in them while the third row will have the height which is left in the grid.

Line 7 & 11: The beginning and ending of Column Definition tags. Within these tags, we define how many columns will the grid contain and what will be the properties of each row.

Line 8, 9, 10: Each column is defined separately. The first two lines has the definition of the columns with width set to Auto and the third line is defined with the width equal to the rest of the space available in the grid. The first two columns will take the width depending on the contents available in them while the third column will have the width which is left in the grid.

With this set in the code, following is the output we see on the phone screen (emulator):

XAML Controls Grid

This covers the first three controls of XAML. We shall cover the rest of the controls in the upcoming parts. I hope this clears some of your concepts of how different controls are implemented and how they’re structured to display the elements in XAML.

If you’ve any questions, feel free to contact me.