Gui design using Visual Studio - Making a Composed Window

Idea : To compose a window/GUI gui design using VS
                       

Exercise 1 : Compose a page using VS

• New project… 
• Templates > Visual C# > Windows >  Blank App (Universal Windows)
• Name the solution “ComposedWindow”
• Click OK
• Make sure the MainPage.xaml is the only page open
• Create a grid with 2 rows
1. RowDefinitions
1. Height: 120 px
2. Height: 1* sized
• Insert a textblock as page title in Row 0
1. Give it the following properties:
1. Font family: Segoe UI Light
2. Font size: 42pt
3. Vertical Alignment: Buttom
4. Margin: 100 left, 0 top, 0 right, 0 bot
5. Span across both coloums
6. Set the text to 'Page Title'
• Create a grid with 2 rows and 2 coloums and place it in row 1 with stretch both vertically and horizontally
1. Size of RowDefinitions:
1.  Height: 1*
2.  Height: 1*
2. Size of ColoumDefinitions:
1.  Width: 300 px
2.  Width:  150 px
3. Inside the grid, place three Buttons with different background color
1. One in grid row 0, col 0 and span it across both rows
2.  One in Row 0, col 1
3. One in Row 1, Col 1
4. Give the grid the same margin as the page title text
   
• Wrap the grid with buttons in a new grid and create 2 coloums
1. ColoumsDefintions
1.  Width: Auto
2.  Width: Auto
• Create a copy of the grid with the buttons
1. Place it in grid col 1
2. Give it a Margin of 80
   
   
• Optional: Right click the outer “content grid” and wrap everything in a ScrollViewer
1. Set the following properties
1. HorizontalSCrollBarVisibility: Auto
2. VerticalScrollBarVisibility: Disabled
3. ScrollViewer.HorizontalScrollMode: Enabled
4. ScrollViewer.VerticalScrollMode: Disabled
5. ScrollViewer.ZoomMode: Disabled
• Run the app

The result should resemble this: