Step Bi Step

Windows 8  and Visual studio 2012 are released now but I have created this simple (My 1st) Metro Style Application using Release Previews few months ago. I didn’t get a chance to post, but I need to post this today otherwise its too late..! 🙂

This is my environment:

1. Windows 8 Release Preview 64 bit
2. Visual Studio 2012 RC Ultimate for Windows 8 Release Preview
3. C#
4. Extensible Application Markup Language (XAML)

I have installed all of the necessary tools and I will show the step by step instructions to create a simple Metro Style Application in this post.  I think this will help someone to get started with Windows 8 development using C# and XAML 🙂

Okay, here are the steps:

Step 1: Installing Windows 8, I used Release Preview and you can see few steps here

Step 2: Installing Visual Studio 2012, I used RC Ultimate and you can check the steps here

Step 3: Launching Visual Studio 2012

• Click the start menu

• Select the Visual Studio 2012 on the Windows 8 (It’s little tricky to switch from start menu to other programs for first time users)

Step 4: You will get Visual Studio 2012 (it looks same like 2010 but different theme), select the New Project

Step 5: You will get the following screen, select the Visual C# and Windows Metro Style under Templates. Please make sure to choose .NET Framework 4.5

Step 6: Select the Blank App (XAML) and enter the Name of the project, I have given “MetroStyleApplicathionStepBiStep” and then click Ok.

Step 7: After creating the project you can see the Visual Studio like below

Step 8: If you don’t get the screen above, just double click on the MainPage.xaml.  You will get the XAML design and code together but this is bit difficult to design the screen, so click on the % drop down on the bottom of the Visual Studio and the change it to fit all

• Your screen should be look like this now.

Step 9: In Solution Explorer,  we can see all the files and folder structure. if you want to learn more about just follow this link

Step 10: Okay we will design the page 1st, In the Toolbox you can see all the controls like other Visual Studio, drag and drop the TextBlock on the design screen

In the TextBlock’s properties make the following changes

Name: TextBlockHeading

Text: Hello, Metro Style Application!

Text size: 48 px

Step 11: If you want to adjust the TextBlock positions, you can either use the design Or modify the XAML code

Step 11: After finishing the Text Block, we need to add a Text Box, button and another Text Block to the page and make the necessary changes for them. The design should looks like this:

XAML code:

Step 12: Double click on the button and find the ButtonDisplay event, write the necessary C# code to display the value from the Text Box. Here is the source code

        private void ButtonDisplay_Click(object sender, RoutedEventArgs e)
        {
            TextBlockDisplay.Text = "Hello, " + TextBoxEnter.Text;
            ButtonDisplay.Content = "Displayed";
        }

Step 13: Okay, Click the Run button Or press F5 to run the application (We have few interesting options to run the application, I will modify the post tomorrow :)), you will get the following screen.

Step 14: Enter any text in the text box, I just entered Step Bi Step and click Display. Here you go, your 1st Metro style application is done! Pretty simple no? Enjouy!

 Happy Metro Styling..! 🙂

PS: This is my 50th post in 10 months and I have reached 20k hits in this period! 🙂 Please do post comments, if you have any concerns..! Thanks R./