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

Welcome to my blog :)

Windows 8 Hello World Metro Style App

with 6 comments

Hello World Metro Style App
Tutorial
Contents :-
1)Hello World.( Here )
2)Layouts and Styles.
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. 

This Post for beginners in Metro Style Apps 

1)Open Visual Studio 2011 Beta.
2)Open new project(Visual C#->Blank Application->Name the Project HelloWorldMetoStyleC# or what ever you want :))
Hint : if you opened the other language  node you’ll find Visual Basic , C++ and JavaScript with all this language you can build a Windows 8 Metro Style App.

Now the project is opened. start exploring the Solution Explorer.

Assets->A folder contains the Logos and Splash Screen
Logo->Logo (150 X 150) for the Metro Start Logo ,  Wide Logo (310 X 150) if you want your application to have a wide logo , Small Logo for Notifications and The store Logo.
Splash Screen ->The Images that appears when you are application is about to be opened (620 X 300)
Hint : in the splash screen the image is not cover the whole screen. but a 620 X 300 from the screen and the other empty space you choose it’s color (You’ll find background Color under the splash screen in the application manifest ) change the Color to be adapted with the Image you chose.
Common -> Folder which contain an auto generated common classes that helps you in developing you application
Take Care about the StandardStyles.xaml I’ll talk about it next post but just remember it  🙂
App.xaml->you can define the global variables and styles.
App.xaml.cs -> contains the launching method and other important methods that will help us in the application life time.
appxmanifest->the application manifest which contains the application Capabilities ,  Deceleration , UI images (Logos and splash screen).
3)Open the BlankPage.xaml then open the toolbox and drag a button and a textblock from it.
4)Click On the button and open the properties then click the events a double click on Click Event


5)Open BlankPage.xaml.cs and write the code that change the text in the textblock

38         private void button1_Click(object sender, RoutedEventArgs e)
39         {
40             label.Text = “Hello World This is My First Windows 8 Metro Style App”;
41         }

6)Run the application but before running take care of if you choose Local Machine the application will run on the Metro Start like “Mail,People,…” Application but if you choose Simulator VS will open a tables simulator and it’s OS like your’s.
Choose LM or Simulator as you like but Simulator has many features like change the screen resolution , Rotate and change the input  (Mouse,Touch)

 Now the application will run and when clicking the button the textblock text will change 🙂

Ibraheem Osama Mohamed
Twitter : @IbraheemOsamaMo 

Advertisements

Written by Ibraheem Osama Mohamed

May 20, 2012 at 3:19 pm

Posted in C#, tutorial, Windows 8

6 Responses

Subscribe to comments with RSS.

  1. […] will be in Silverlight  and 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 […]

  2. Thanks Very Much 🙂 but please complete the tutorial

    Mostafa AbdelHamid

    May 22, 2012 at 6:49 pm

  3. […] and Styles Layouts and StylesContents :-1)Hello World.2)Layouts and Styles.( Here )3)Application Menu.(Bottom and Top)4) Secondary Tiles and Live […]

  4. […] 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. […] 1)Hello World. 2)Layouts and Styles. 3)GridView Tutorial .( Here ) 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. […]

  6. Ok, this was a good post. I am missing some sources though, could you post them all?

    Robt Kinniburgh

    September 25, 2012 at 3:53 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: