Windows Store 8.1 UI Design using Blend

1) Open Microsoft Expression Blend.

2) In new project window, select:

3) Select the "work space" as Design and make sure that in Window menu these options are selected:

• Assets
• Objects and Timeline
• Project
• Properties
• tools

4) Type "textblock" in the search menu and drop it in the designer.

5) In properties Window and layout tab:

• First change the horizontal alignment into "Stretch" and vertical alignment into "Top".
• Set the margin : '40' from "left" and '20' from "top".
• Change Font Size = 40 pt.
• Font Family = Segoe UI Light.
• Text = My App.

6) Now give a Row Definition to your page just below the title.

7) Drag and Drop a GridView from controls into the designer.

8) Change the layout of "GridVew" as following:

• Vertical alignment="Stretch"
• Horizontal alignment="Stretch"
• Row="1"
• Margin="0"

9) Drag and drop a stack panel into GridView and set its background color and define its:

• Width ="500"
• Height= "280' pixels.

10) First add an Image and then a TextBlock into StackPanel. Give TextBlock some texts, change its FontSize into 25 pts and Margin into 20 px from left.

11) In Project tab right click on assets folder and select add existing item, then add any image into your project from your system.

12) Select the image in your object and time line then give it a source of your recently added image.

13) Change the stretch property into fill.

14) Copy the stack from objects and Timeline and paste it in GridView 6 times.

15) Change the textblock , images and stack panel with different  text, images and background.

16) Save and Run the project.