# For newbies : writing your first windows 8 metro application



## cooljeba (Jul 21, 2012)

In this tutorial we will see how to create your first Windows 8 Metro app. For example we will code a simple "Hello Name" application. This application will ask for a name and print the same with a greeting. This is a very basic tutorial and it requires no previous coding experience.

You will also learn how to compile and Run your metro application inside a simulator right from Visual Studio.

*Creating your First Project*

Launch Visual Studio and Select *File > New Project*

*public.bay.livefilestore.com/y1plOohgydAJE6a-t-3EjmvWEpce3bbqmW9k6FVUPsMy5O_u5KUWBmBMzjANIOQZT7ZgwTApXPjH3u-LN8gCBxlAA/Create_new_Metro_project.png

Select *Templates > Visual C# > Windows Metro Style* and Press OK. Visual studio will now create the solution and the corresponding xaml, cs files.

*public.bay.livefilestore.com/y1p6xf4LZwff0Qw8c4Z5YkVocPxzG_6N-mKHo2XwQ0xRGOhwCOIzk3hSYZm5c0O4bxzDGz7SDbB3HOM9Yxq7B6heA/Blank_Metro_App_tutorial.png

Open up *Solution Explorer* to see the files it has created. _(ctrl + w + s)_ or choose *View > Solution Explorer* in Visual Studio

*public.bay.livefilestore.com/y1phl1w7qXnvugaOl9LAM8zZsNTn2_v4SFrkfMwRNBmasZAh33zeVGbbZ8u73MnCZ2LAUSGadxPhCe_1Zok7OzuqQ/Soltuion_explorer_for_Visual_studio.png

*Adding Controls to the Designer*

Double click on MainPage.xaml in Solution explorer to open up the Designer View. Here we will add our controls. For this tutorial we will be using a *TextBox *and a *Button* control.
The TextBox will be used to show the Greeting and the Entered Name when the button is clicked.

Select *View > Toolbox* to see the Toolbox menu. This holds all the usable controls required for development. You can dynamically create controls directly on the Xaml files but I will show that in another tutorial.

*public.bay.livefilestore.com/y1pQeVAhhLbg7kf094cRp9cpnBDtF9_IheGCRAE7xIAO3ytcuPYtzs9YcWermMAIxHgJceUkT_KfP6E6E_wIdKydw/Visual_Studio_Toolbox.png

For now Just drag and drop the Button and Text box to your MainPage.xaml designer. You should see something like this. Use the mouse to resize the control to your liking.

*public.bay.livefilestore.com/y1ppbU9HI2nazQv20x5t2vwDnAfvojAii-tAm9DST8z_L1N7dUUydMfst6J9exLPaVZol62QNyvIz0GJj_ZnlKtCw/Designer_file_with_controls.png

*Adding Code to our Application*

Now click on the XAML button at the bottom left screen to reveal the code. It should look something like right now

*public.bay.livefilestore.com/y1p8Z3z7PPdCm9aLM_eBFEymiNDRVKYK6GGLmLofHRaa7t1U8Kcwq6CUeimbip-4MD8uEJx3elwfUEaiVZ_198KSQ/visual_studio_xaml_button.png


```
<Page
    x:Class="HelloWorld.MainPage"
    IsTabStop="false"
    xmlns="*schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="*schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="*schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="*schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Left" Margin="993,311,0,0" VerticalAlignment="Top"/>
        <TextBox HorizontalAlignment="Left" Margin="485,317,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="451"/>

    </Grid>
</Page>
```

Now we need to change the name of the button. Replace "*Button*" with "*Hello*"


```
<Button Content="[B]Hello[/B]" HorizontalAlignment="Left" Margin="993,311,0,0" VerticalAlignment="Top"/>
```

Also it is a good practice to give name to the control. So add this property.


```
<Button [B]Name="btnHello"[/B] Content="Hello" HorizontalAlignment="Left" Margin="993,311,0,0" VerticalAlignment="Top"/>
```

Now lets edit out TextBox's Text and give it a name too


```
<TextBox [B]Name="txtSayHello"[/B] HorizontalAlignment="Left" Margin="485,317,0,0" TextWrapping="Wrap" [B]Text=""[/B] VerticalAlignment="Top" Width="451"/>
```

_notice I have also removed the string from the Text Property_

Now switch back to *Design View* . It is located at left bottom same place where you *clicked XAML*. You will now see that the button name has been renamed to *Hello* and the content of textbox has gone.

Now let us add some c# code to achive our requirement. 

Double click on your Hello button, this will create a "Click" event and add it to your .cs file.


```
private void btnHello_Click(object sender, RoutedEventArgs e)
        {

        }
```

Here we will add the code which gets fired everytime some clicks on the Hello button. We want to take up the Text entered into the TextBox and Add hello in the begining. 
Write the following c# code .

```
private void btnHello_Click(object sender, RoutedEventArgs e)
        {
            txtSayHello.Text = "Hello " + txtSayHello.Text;
        }
```

*Running the Metro Application *
Now we are going to compile and run it in the simulator. 

After you have chosen where the code will run *Press F5*. This will deploy the binaries into the simulator and execute it from there.

*public.bay.livefilestore.com/y1phl1w7qXnvujt3OKX4v5QEGLRXdSPOb6FAA6jfaBeY3aqG_n4gTFBSWmz8Yl216VNtyBgWbxoJ7A_tydJdub5Wg/Final_output.png

Download the solution file at Surface forum


----------



## mrintech (Jul 21, 2012)

Thanks a lot for detailed tutorial


----------



## tkin (Jul 21, 2012)

Thanks.


----------



## cooljeba (Jul 21, 2012)

thanks guys


----------



## funskar (Jul 22, 2012)

Thankx..


----------



## ritvij (Jul 22, 2012)

super thanks bud.. no option of rep why??
this is great!


----------



## RBX (Jul 22, 2012)

Thanks for the tutorial. Turns out that metro app coding is much similar to web application coding, I think getting hang of it wouldn't be a problem


----------



## cooljeba (Jul 22, 2012)

Yes.. Programming using .net framework is pretty easy..


----------



## cooljeba (Aug 28, 2012)

updated the path of solution file


----------



## velociraptor (Sep 28, 2012)

um it looks very interesting i also want to learn how to develop app so please tell me the prerequisites i mean the software u used and the language ...please,,t hanx in advance

please provide the link to download that development tool tooo ...


----------



## cooljeba (Oct 7, 2013)

You need Visual Studio 2012, windows 8 and you need to learn c#,. net 4.5


----------

