Post
Ask Question

Working With The Grid View Control In Universal Windows App

Prerequisites

  • Visual Studio 2015

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, 
  • Grid.Column
  • Grid.ColumnSpan
  • Grid.Row
  • Grid.RowSpan

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.

 


Similar Articles