Windows 8 UI Design

Learn how to design a windows 8 application with very easy drag and drop method on Microsoft Expression Blend.

STEP 1:

Start Microsoft Expression Blend.

STEP 2:
In new project window, select:

• XAML (Store apps)
• Blank App (Windows)
• Name the Application
• Click OK

STEP 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

STEP 4:
Select the last toolbox button in order to use all the controls that are available for Windows 8.

STEP 5:
Type "textblock" in the search menu and drop it in the designer.

STEP 6:
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 and Text = My First App.

STEP 7:
Now give a Row Definition to your page by clicking exactly on the place where red point is mentioned in the figure.

STEP 7:
Drag and Drop a gridview from controls into the designer.

STEP 8:
Change the layout of "gridview" according to the image.
Vertical alignment="Stretch", Horizontal alignment="Stretch", Row="1", Margin="0"

STEP 9:
Drag and Drop a stack panel into grid view and set its background color (any)  and define its 
Width ="500" and Height= "280' pixels.

STEP 10:
First add an image and then a text block into stack panel. Give textblock some texts for eg : "The Image", change its fontsize into 25 pts and Margin into 20 px from left.

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

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

STEP 13:
Change the stretch property into fill.

STEP 14:
Copy the stack from objects and Timeline and paste it in gridview 4-6 times.

STEP 15:

 Select the textblock of third stack from Object and Timeline and change its Text into third      image.

STEP 16:
Similarly change the textblock , images and stack panel with different  text, images and background.

STEP 17:
Now run the project.

STEP 18:
Introducing different colors and images to your main grid or any control you can make the UI more attractive.

Yemina Imam

Create Your Badge