Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Windows 8 Layouts and Styles

with 6 comments

Windows 8 Layouts and Styles
Contents :-

1)Hello World.
2)Layouts and Styles.( Here )
3)GridView Tutorial

4)Application Menu.(Bottom and Top)
5) Secondary Tiles and Live Tiles
6)Toast Notification.
7)Searching and Sharing.
8)File Pickers , File savers and File Access(Read, Write).
9)Bing Maps.

One of the most important concepts of the Metro Style is the Design, not the images that you put in the application or the shapes of the textbox and button but the Metro Style Desgin. So if you are building the application in HTML don’t make it looks like a web site make it Metro Style Application with Windows 8 layouts , styles and menus.
If you take a look when you are about to make a new application of the Grid Application and Split Application and How they looks like

This application templates helps you to make a good looking layout with multiple chooses.
Let’s talk about Windows 8 Layouts. We have the old containers (Grid,Canvas,…) and a 3 new containers
1)FlipView. “Switch between pages”

2) ListView.


If you want your application to have a great looking use this Views.Every Element in the GridView contains an Image and 3 TextBlocks.and if you choose a Gird Application form the beginning you will get an application looks like the last image but of course without the images and the words in the bottom of the image(Will be a black GridView).
Let’s change how the Grid Application looks.
1)New Grid Application
2)Take a tour in the Application.
3)Open the DataModel folder in the solution explorer then SampleDataSource.cs
 This is the data binding class to the GridView take a loop and you’ll Know from where the words in the application and the other pages came from.
4)Navigate to the SampleDataSource Class. Change the images location in the black boxes in the picture to the image you want to add
 and you’ll get this result the first black box will change the first yellow box also the second black will change the second yellow

if you take a look about the description you can also change it as you like from the code
This application uses GridVeiw and FlipView.


Windows 8 have a built in styles like the menu button style and the GrivView style.
if you want to know what is the built in style in your application open the common folder the StandardStyles.xaml
Take a tour in the xaml page.
Now we will take a look about 2 styles the buttons and the GridView.
Button Styles
Button styles begin from line 391
The text in the black box is the name of the style so you call this name if you want your button to look like it also you can define your own style or edit this style

 This is the code that makes this buttons looks like this

if you removed the styles and Buttons will looks like that

Of course you can change the buttons content(Text)
Another thing in the Grid Application we made in the beginning ,if you take a look  about the back button you’ll find it have BackButtonStyle the button in the yellow box

Now we are going to take a look about the GridView item’s styles I think you now know where to find it 🙂
navigate to line 880 in the StandardStyles,xaml

if you take a look about the first black box this is the name of the style in the Grid you can change it’s width and height Also you can edit the textblocks do what ever you want to do Or you can copy the code and change it like I did in the third black box.
if you scroll down with the mouse you’ll find more styles for the GirdView try all of them and choose one or make your own 😉
This a Post written by one of the best designer I ever seen talking about Metro Design Metro A Noun or a Verb 

I hope that you get the Idea of making Windows 8 metro Style Design by using the new Layouts and Styles
Next Post will be about Application Menu

Ibraheem Osama Mohamed
Twitter : @IbraheemOsamaMo


Written by Ibraheem Osama Mohamed

May 29, 2012 at 2:13 pm

Posted in C#, layout, Silverlight, styles, tutorial, Windows 8

Tagged with

6 Responses

Subscribe to comments with RSS.

  1. […] World Metro Style App Contents :- 1)Hello World.( Here ) 2)Layouts and Styles. 3)Application Menu.(Bottom and Top) 4) Secondary Tiles and Live Tiles 5)Toast Notification. […]

  2. […] 8 Application Menu Tutorial Contents :- 1)Hello World. 2)Layouts and Styles. 3)Application Menu.(Bottom and Top)( Here ) 4) Secondary Tiles and Live Tiles 5)Toast Notification. […]

  3. […] a little in HTML5. I’ll post a post every 2 days. Contents :- 1)Hello World. 2)Layouts and Styles. 3)Application Menu.(Bottom and Top) 4) Secondary Tiles and Live Tiles 5)Toast Notification. […]

  4. […] to add Items in the GridView. You have 2 options. 1)Use MVVM : Data binging like the example in Windows 8 layouts and styles post I posted later Or like in Contoso CookBook 2)Use Gird View Directly in the Designer. This […]

  5. Hi. in step 4) you say “Change the images location in the black boxes in the picture to the image you want to add”. I tried to do that, but this only allows me to add pictures that I have explicitly added in the Assets folder in my project. So if I refer to Assets/name_of_file.png, and this file isn’t added to the Assets folder in my project, nothing is displayed.

    how can you change this, so that if I wanted to programmatically dynamically populate the SampleDataSource with images from my Pictures folder?

    Thanks in advance

    Rami Radi

    July 19, 2012 at 3:27 pm

    • Hi Rami in Windows 8 as I know you can’t access other resources like a pic in pictures folder but you can use file picker
      This is the types of URI in Windows 8
      1)URI that uses the http protocol to access a website. “http://www.bing.com”
      2)URI that uses the ms-appx protocol to access an image file in the app package. “ms-appx:///images/yourImage.png”
      3)URI that uses the ms-appdata protocol to access a file in local app data store for your app.

      and about the dynamically population you can use this code

      var items = itemGridView.Items;
      GridViewItem item = items.First() as GridViewItem;//choose the item you want
      Grid grid = item.Content as Grid;
      Image image = grid.FindName(“image1”) as Image;
      image.Source = new BitmapImage((new Uri(“ms-appx:///Assets/LightGray.png”)));

      but take care this code won’t work for this application even if you change the image name in Standard250x250ItemTemplate in the StandardStyle.xaml file this code will work in application that added ItemGridView in the xaml code or in the C# code like in this post

      Sorry that I didn’t reply as soon as possibly 🙂
      I hope that I was useful and Happy Ramadan

      Ibraheem Osama Mohamed

      July 22, 2012 at 2:33 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: