Prerequisites

A flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic.

Syntax

  1. <Grid ...>
  2. oneOrMoreUIElements
  3. </Grid>
  4. -or-
  5. <Grid ../>
Grid provides these attached properties for XAML usage,

Now let's get started with the following steps,

Step 1 - Create Windows Universal Project

Open Visual Studio 2015 and Click File -> New -> Project Option for New Universal App.



Step 2 - Giving the Project Name

Then, New Project Window will open, there you can select an Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank App (Universal Windows).

Type Project Name GridApp and click the OK button,



Step 3 - Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows application and click OK button,



Step 4 - Choose Designer Window

Now we go to the Solution Explore select MainPage.xaml,



Step 5 - Add the Coding

Add the following code for the stack Panel control in MainPage.xaml. Add the following code.

  1. Grid Width = "800" > < Grid.RowDefinitions > < RowDefinition Height = "Auto" / > < RowDefinition Height = "Auto" / > < /Grid.RowDefinitions> < Grid.ColumnDefinitions >
  2. <!-- Explicitly set to 125 points wide. -->
  3. < ColumnDefinition Width = "125" / >
  4. <!-- Set to 75 points wide because of contents’ size. --> <ColumnDefinition Width="Auto"/>
  5. <!-- 150 points wide = (800-(125+75))/(1+3) x 1 star. -->
  6. < ColumnDefinition Width = "*" / >
  7. <!-- 450 points wide = (800-(125+75))/(1+3) x 3 stars. -->
  8. < ColumnDefinition Width = "3*" / > < /Grid.ColumnDefinitions> < Button Grid.Row = "0"
  9. Grid.Column = "0"
  10. Content = "Column 1" / > < Button Grid.Row = "0"
  11. Grid.Column = "1"
  12. Content = "Col. 2"
  13. Width = "75" / > < Button Grid.Row = "0"
  14. Grid.Column = "2"
  15. Content = "Column 3" / > < Button Grid.Row = "0"
  16. Grid.Column = "3"
  17. Content = "Column 4" / > < Button Grid.Row = "1"
  18. Grid.Column = "1"
  19. Grid.ColumnSpan = "3"
  20. Content = "This stretches over 3 columns" / > < /Grid>


Step 6 - Run the Application

Now we are ready to run our Project, So Click the Local Machine for running the Application.


Output



Conclusion - I hope you understood Grid View control in Universal Window and how to run it.