Layout Controls

Layout is among the important concepts in User Interface Design. Before this many of you have created applications by using HTML and CSS, you may have added <div> tags on your pages to hold the actual content. When you got done with the structure of your pages then the next step was to create a CSS file to give better position and design to your elements on the page, by setting up padding, margin, background images and many others.
When you are writing a windows store app you don’t need to worry about your pages layout because XAML provides many layout controls that takes care of positioning of your pages and additional controls that have been used in your pages. XAML has a great collection of layout controls. The basic controls are Grid, StackPanel and Canvas. Now take a look at how these controls can be used.

Grid

It can be defined as the collection of rows and columns. It provides a great deal of rows and columns by using which you can create all sorts of arrangements. The simplest form of Grid control in XAML looks like this:

      <Grid x: Name= “”>
      </Grid>

Now you can add rows and columns to this Grid by simply adding RowDefinition and ColumnDefinition objects to the XAML code:

     <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
     </Grid>

In this case you have successfully added two rows and two columns to your Grid. Now if you want to add Buttons, TextBlocks and many other controls to your Grid, you can easily add them to the Grid. With the help of an example given below you can easily understand that how to add additional controls to your Grid.

     <Grid>
         <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
         </Grid.ColumnDefinitions>
         <Button x: Name = “” Grid.Row = “1” Grid.Column = “1”/>
     </Grid>

In this way you have created a button and placed in first row and first column of the Grid. Keep in mind that here the division of Grid is based up on Multidimensional Array, which means that the index row and column is zero.
Layout Controls Layout Controls Reviewed by Afsar Murad on 21:43 Rating: 5
Powered by Blogger.