For newbies : writing your first windows 8 metro application

[cooljeba]

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



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



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



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.



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.



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

<Page
    x:Class="HelloWorld.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://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="Hello" 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 Name="btnHello" 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 Name="txtSayHello" HorizontalAlignment="Left" Margin="485,317,0,0" TextWrapping="Wrap" Text="" 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.



Download the solution file at Surface forum

[mrintech]

Thanks a lot for detailed tutorial

[tkin]

Thanks.

[cooljeba]

thanks guys

[funskar]

Thankx..

[ritvij]

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

[RazorbladeXtreme]

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]

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

[cooljeba]

updated the path of solution file

[velociraptor]

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 ...