I am assuming that you have already installed windows phone sdk 8.0 to your system and also done Windows Phone 8 Emulator Configuration. Now let's start with basic Windows Phone App template with C# & XAML. Now create a new windows phone project with in your Visual Studio 2012 as shown below:

Now select the windows phone OS version for which you want to make the OS as shown below. I have selected Windows Phone OS 8.0

Before going to modify this template, let's have look into the structure and elements of this project.

The Reference

As you already know, this folder contains the references of the assembly used in the project.

The Assets

This folder contains the images used in your projects. By default, when you create a new project, the five titles images, one alignment grid and ApplicationIcon images are included and each image has its own importance.

ApplicationIcon

This image acts an icon for your apps when a list of apps will be shown in your phone. It is of size 100 x 100 pixels. This is what the user will see when he see your apps on his phone. You can replace this image with the one you want to represent your apps on the phone.

AlignmentGrid

This image will see you as an alignment grid and help you for ensuring that your controls are aligned on common boundaries.

The image has a top margin of -32px to account for the System Tray. Set this to 0 (or remove the margin altogether) if the System Tray is hidden. Before shipping remove this XAML and the image itself.

By default, the code for this image is commented in your MainPage.xaml file as shown below.

<!--Uncomment to see an alignment grid to help ensure your controls are
 aligned on common boundaries. The image has a top margin of -32px to
 account for the System Tray. Set this to 0 (or remove the margin altogether)
 if the System Tray is hidden.

 Before shipping remove this XAML and the image itself.-->
 <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->

When you will uncomment the code for Image, you will see an alignment grid in dark red color as shown below.

Assemblyinfo.cs

This file contains all of the assembly information for your app like AssemblyVersion, AssemblyCopyright, AssemblyTitle etc. means all the public information used for your app.

WMAppManifest

This is the most important file of your phone app that contains all of the configuration, settings, and declarations for your apps. It also defines default background colors, orientations, and specific capabilities that your app required, like access to sensor, bluetooth etc.

AppManifest.xaml

A simple application manifest file that is required to generate the application package (XAP).

App.xaml

When your windows app starts then first of all App.xaml file is loaded and it contains all of the app-level resources and settings.

App.xaml.cs

This file is like as Global.asax file in Asp.Net and Asp.Net MVC where all of the start-up methods define, like Application_Launching(), Application_Deactivated() and much more. This is the code behind file of App.xaml.

MainPage.xaml

This file acts as the default "home page" for your phone app. This is the page that will be shown to the user first time. You can modify this page acc. to your need to make it home page of your app.

MainPage.xaml.cs

This is the code behind file of MainPage.xaml file and contains the event handler method like Button_Click() and others methods for MainPage.xaml.

Modify your start page MainPage.xaml

In the MainPage.xaml file you can define the UI for your app. You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio. I have added it to one textbox, button and textblock for displaying message as shown below:

<!--TitlePanel contains the name of the application and page title-->
 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
 <TextBlock Text="Windows Phone Apps Tutorial" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
 <TextBlock Text="Welcome !!" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
 </StackPanel>

 <!--ContentPanel - place additional content here-->
 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,10,0">

 <TextBox x:Name="nameInput" Width="265" HorizontalAlignment="Left" FontSize="24" Margin="0,10,0,533" RenderTransformOrigin="0.487,-3.674"/>
 <Button Content="Say "Hello"" Click="Button_Click" FontSize="16" Margin="270,10,58,533"/>
 <TextBlock x:Name="namemsg" Style="{StaticResource PhoneTextNormalStyle}" Margin="10,79,27,483" FontSize="22" Foreground="#FFF52828"/>

 </Grid>

Create an event handler for button click

Create an event handler for handling the button click event and showing the message entered with in the textbox as shown below:

private void Button_Click(object sender, RoutedEventArgs e)
{
 namemsg.Text = "Hello, " + nameInput.Text + "!";
}

Run Windows Phone App

For running your Windows Phone apps you have to deploy your apps to either your windows phone 8 device or available phone emulator as shown below. If you have windows 8 phone, you can upload your app to this phone after registering it. If you don't have the windows 8 phone, you can deploy it to emulator. In this article, I am using emulator.

Press F5 to build and run the app. After phone welcome screen the home page will be open as shown below:

Now, Enter your name and press button. Now you have seen the output as shown below:

What do you think?

I hope you will enjoy the tips while developing your windows phone app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.