custom-icon-mobile11.png

Working With XAML 2/4

Those people, who have not been following us from the beginning, can go back to start at the beginning.

Grids:

When we talk about grids, the first thing that comes to our mind is the concept of rows and columns. So, grids are basically dividing the whole page into rows and columns. This is the most flexible control in XAML that is used for arranging different elements on different locations on the screen. A grid’s columns and rows make cells and we place elements in these cells.

Example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>
    <TextBox Text="1st row 1st column" Grid.Column="0" Grid.Row="0" />
    <Button Content="1st row 2nd column" Grid.Column="1" Grid.Row="0" />
    <TextBox Text="2rd row 1st column" Grid.Column="0" Grid.Row="1" /> 
    <Button Content="2rd row 2nd column" Grid.Column="1" Grid.Row="1" />
</Grid>

The output of the above code is shown below:

Grid rows and columns

In the above code, we have divided the screen into 4 cells of equal height and width, and placed four elements (i.e. textboxes and buttons) in these cells.

To place element(s) in any of the grid cell, we have to write that element after rows and columns definitions and before closing tag of grid i.e.  “</Grid>”. Then write

Grid.Row="1" Grid.Column="1"

as a property of that element as shown below. The button, in this case, will be placed in the bottom right cell (2nd row, 2nd column) of the grid with two rows and two columns.

<Button Content="Submit" Grid.Row="1" Grid.Column="1" />

The value of the “Height” property in “RowDefinition” tag can be given in the following notations:

  • Height can be defined as “*” meaning percentage; for example, Height=”40*” and Height=”60*” means that you have divided the screens into 2 rows, one with 40 percent height of the whole screen and the rest 60 percent is allocated to the other row.
  • You can use Height=”Auto”, this means that you are currently giving zero height to that row but as you place an element (let’s say a button) in this row then the row automatically sets its height equal to the height of the element placed in it.
  • You can also define this property as Height=”200″, which means a height of 200 pixels. But this is not recommended to use because this will not give responsive behavior for the layout.

You can also have multiple grids or StackPanels or any other container or element inside the grid cells. Below is the example of the nested grid and StackPanels inside grids

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

    <Grid Grid.Row="1" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
 
        <TextBox Text="1st row 1st column of child grid" Grid.Column="0" Grid.Row="0" />
        <Button Content="1st row 2nd column of child grid" Grid.Column="1" Grid.Row="0"/>
        <TextBox Text="2nd row 1st column of child grid" Grid.Column="0" Grid.Row="1" />
        <Button Content="2nd row 2nd column of child grid" Grid.Column="1" Grid.Row="1"/> 
    </Grid>
    <TextBox Text="1st row 1st column of parent grid" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="1st row 2nd column of parent grid" Grid.Column="1" Grid.Row="0" /> 
    <Button Content="2rd row 2nd column of parent grid" Grid.Column="1" Grid.Row="1" />
</Grid>

The output for the above code is shown below:

nested grids

Note: Grid.Row=”0″ means 1st row, as the indices of the rows and columns start with zero.

In the above example, we made a grid with 2 rows and 2 columns, placed another grid in its 2nd row and 1st column (bottom left cell) and created two rows and two columns inside that cell (i.e. nested grid). You can also place StackPanel or any other element inside any of the cell.

Here is the code for the grid having another grid and stackpanel in it:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    /Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>
 
    <Grid Grid.Row="1" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
 
           <TextBox Text="Row 1, column 1 of child grid" Grid.Column="0" Grid.Row="0"/>
           <Button Content="Row 1,column 2 of child grid" Grid.Column="1" Grid.Row="0"/>
           <TextBox Text="Row 2, column 1 of child grid" Grid.Column="0" Grid.Row="1"/>
           <Button Content="Row 2, column 2 of child grid" Grid.Column="1" Grid.Row="1"/>
        </Grid>
        <StackPanel  Grid.Column="0" Grid.Row="0" >
            <Rectangle Width="200" Height="100" Fill="Green" />
            <Rectangle Width="200" Height="100" Fill="Blue" />
            <Rectangle Width="200" Height="100" Fill="Red" />
        </StackPanel>
        <TextBox Text="Row 1, column 2 of parent grid" Grid.Column="1" Grid.Row="0" />
        <Button Content="Row 2, column 2 of parent grid" Grid.Column="1" Grid.Row="1" />
</Grid>

Now you have seen the use of grids yourself and you may have noticed that grids are very flexible for designing layouts. So practice them and start using them as they are very dynamic in nature.

Thank you for reading 🙂

read more
Danyal MalikWorking With XAML 2/4
custom-icon-wayfarer11.png

Working with XAML 1/4

Who should read this article:

Any one who wants to work with the following that are listed below or anyone who is a beginner in them, should read this article.

  • Windows 8/onward Development using C# & XAML
  • Windows Phone 8/onward Development using C# & XAML
  • Windows Presentation Foundation (WPF)

What is XAML:

Microsoft developed Markup language named XAML is an abbreviation of “Extensible Application Markup Language”. which is pronounced as “zamel”. Used  for developing front end of Windows RunTime applications, Silver light application and WPF application. You can read more from Microsoft website.

introduction xaml

Lets Start Working:

Following are the default controls in XAML:

  • TextBox
  • TextBlock
  • Slider
  • ProgressBar
  • ProgressRing
  • Button
  • CheckBox
  • RadioButton
  • HyperlinkButton
  • ToggleSwitch
  • PasswordBox
  • RichEditBox
  • ComboBox
  • ListBox
  • Image
  • ToolTip
  • Popup

Some of the layouts are listed here that we will cover in this article:

  • Stack Panel
  • Canvas
  • Grid
  • Grid View
  • List View

Stack Panel:

As it is clear from the name, all items in this container will be stacked together either vertically or horizontally. By default, all items in stack panel are aligned vertically.

        <StackPanel>
            <!-- Item 1 here -->
            <!-- Item 2 here -->
            <!-- Item 3 here -->
        </StackPanel>

These items can be any thing; for example, button, textbox, textblock, stack panel, grid etc.

        <StackPanel>
            <Button Content="Button one" />
            <Button Content="Button two" />
            <Button Content="Button three" />
        </StackPanel>

The output for the above code is:
Stack panel layout

 

If we set the property of Orientation to Horizontal,

<StackPanel Orientation="Horizontal">
........
....

Then the output will be:

horizontal stack panel

For alignment of the stackpanel itself you can use two important properties listed below with values

  • HorizontalAlignment
    • Center
    • Left
    • Right
    • Stretch
  • VerticalAlignment
    • Botton
    • Center
    • Stretch
    • Top
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" >
.....
...

Here is another code with output for your better understanding:

        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" > 
            <Button Content="Button one" />
            <StackPanel Orientation="Horizontal">
                <Button Content="Button two" />
                <Button Content="Button three" />
            </StackPanel>
        </StackPanel>

Here is the output:

nested stack panel

You can read more here. Stay tuned for further details.

read more
Danyal MalikWorking with XAML 1/4