Build Your First Windows Phone App

Hello everyone.
If you are reading this then you may be new in Windows Phone App Development.
Because this tutorial is for the beginners in Windows Phone App Development.

I am doing this with Microsoft Visual Studio 2013 (Ultimate version).
So, at first you need to install any version of Visual Studio 2013 or higher to learn about  Windows or Windows Phone App Development.

Now follow a few steps and build your first Windows Phone App.



Step 1:
   Open Microsoft Visual Studio 2013 and you will see this screen. Your may use different theme/color but the other things/contents are same.

Step 2:

Now Click on  File >> New >> Project

Now, You will see the Project Templates page.
Here you can find different templates for the project you want to make..
We will use Visual C# template to make our app.

Step 3:

Now
** select Template >> Visual C# >> Store Apps >> Windows Phone Apps
** Select Blank App (Windows Phone)
** change your project name as you want. I am giving my project name as "MyFirstApp".
Now, Click on OK.

Step 4:

Now you will see almost like this view.
Here you will see a lot of coding in App.xaml.cs page. But don't worry about this. These are some built in code for you.

Now, we need to do something to go to the next step.

Click View >> Solution Explorer  
or press  Ctrl + Alt + L

Now, you can see the Solution Explorer

Now, Doubble Click on - "MainPage.xaml"
You will see a virtual design Plate for Windows Phone app, XAML codes, and the ToolBox.
You can increase/decrease zoom level of the design plate as you want. I often use 50% zoom level.
If you don't see ToolBox then Click  -   View >> ToolBox.

Step 5:

Now,
Inside ToolBox you can see a lot of functions called Controls.
For this app we just need three controls Button , TextBlock and TextBox.

Now Click on the Button and drag it to Design Plate and drop it.
You can see there is a Button created on the Design Plate.

  

Now, If we want to change the design of button then we need to change its Properties.
If you do not find the layout named Properties then Click  WINDOW >> Reset Window Layout 

Now, you can see the layout Properties 

Now just Click on the Button you added on the design plate.

Now, You can change the Button size by dragging it.
In Properties layer , you can see the Button properties. You can give a name *(1) to your Button Controller .   I give the name as submitButton. You can rename *(2) the content name of your controller. I named it as Submit.

You can see, The name of the Button is changed as Submit when you changed the Content name.
Also, in Xaml code, you can see the controller name changed as submitButton.

Now, you can change the color of the Button by clicking Brush from Properties. You can set Border, Foreground (content name) , Background color.

You can increase the font style/size of your content name from Properties by clicking on Text.
I set it as 28 px.

So, we just design a button. Now what about the App's Background.
Just click anywhere on the Design plate and you can see the Controller Property type as Grid.
Click on Brush and give a Background color as you want.

Step 6:
In step 5 we just created a button and design our app.
Now, what can we do with the button !
We need some input system to to do something with the Button.

So, Select TextBox from Toolbox and Drag it to Design Plate and Drop it.
Now Click it and Change the Properties as you need.

I give the controller name as inputText.
And delete the text as TextBox from Properties >> Common. 


Now we can see the Design Plate as like this.

Step 7:

Now select TextBlock from Toolbox and Drag & Drop it over the TextBox on Design Plate.
Click on it and change it's Properties. 
I changed the Font size as 24 px and Bold the text font  from Properties >> Text.
From Properties >> Common  I changed the text as Write Something.

Now select another TextBlock from Toolbox and Drag & Drop it under the Button on Design Plate.
Click on the corner and Drag it to make the box larger.
Click on it and change it's Properties.

Give the Controller name. I give it as resultBox.
Just delete the text from  Properties >> Common .
Make the font size 20-24 px or as you want.
Step 8:

Now, yo just made the Template of your app.
You need to do some programming/coding now.

just Double click on the Button you created.

You can see a function here.

Now, write the code as:


private void submitButton_Click(object sender, RoutedEventArgs e)
        {
           resultBox.Text = inputText.Text;
        }

Here, resultBox is the controller name of 2nd TextBlock that we created under the button.
and inputText is the name of TextBox controller.

Step 9:

So, you just made your first Windows Phone App.
Now it's time to check it is working or not.

Click, BUILD >> Build Solution 

Now you can see the Build result here.
 like this
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

If you don't do anything wrong then your Build result will succeeded.

Now,   select your Emulator as you want.

Click on  DEBUG >> Start Debugging.    or press F5 from keyboard.

Wait for some moment. Because, a Virtual Emulator is creating and it needs some time.

Now, you can see a Virtual Windows Phone.
Here you can run the app that you created.

Just, type some words as you want.

Then click on Submit button.
Then see the result bellow the button.

Yes, You have just made your first Windows Phone App.

Now, Try to make something different by trying it yourself.

*** Thank You ***