How’s everybody doing?! Welcome back to a whole new set of tutorial for the absolute beginners. Last time we were totally devoted to the process of digging out what actually is happening inside our code, how it works and we also had our hands full at some C# coding techniques. Today we will understand the whole connection between the files in our application.

Suggested Reading:

• Beginner’s Guide to Windows Phone 7 App development
• Create Hello World Application in Windows Phone 7
• Different properties of Windows Phone 7 emulator
• Coding the Hello World Application in Windows  Phone 7

Visuals please!

Without me you are nothing! Yeah, I am self-proclaimed president!

1. One of the most interesting features of the IDE we are using is the way how files interact with each other to run the app we have so painstakingly coded and built. This also means that the IDE has to work ‘inside the hood’ with myriads of coding to ensure that our app has been coded correctly and it has references to all the correct associated files.

2. We will quickly open-up the ‘HelloKennedy’ app we built and navigate to the ‘Solution Explorer’ window. I will come back on the explanation of a ‘solution’ later on in my post.

You can see that it is available at the right-hand side of the page, as highlighted.

3. Next come down to the ‘MyXamlPage.xaml’ (the name of the file might be different for you. Most probably it is MainPage.xaml, but whatever it is just make sure it has a file extension ‘.xaml’) and ‘right-click’ it. Choose the ‘Delete’ option.

You might be questioning me,”Has this guy gone nuts?! No way, am I going to part with my app!!” Don’t fret, we will build the app again with the same quality we have. So just delete it!
Select ‘OK’ when the confirmation window pops up.

4. You will see that your whole screen goes blank. Try running the app now. You will nothing comes up on the emulator. Next the .xaml.cs page is going to display some errors which will tell you the exact problem that has occurred with our app.

Scroll down to the ‘Locals’ window and expand the ‘e’ tab. You will see that there is an error message which states that our .xaml page has not been found and this lead to the occurrence of the error. So from this diagnostics we will get a clue of where the problem has occurred. We need to construct a new .xaml page for our app.

5. Click the ‘Stop debugging’ button and proceed to the ‘Solution Explorer’ window where it all started! Now ‘right click’ on the name of the app, in my case it is ‘HelloKennedy’, and then go to the option of ‘Add’ which will again give you some options. Select ‘New Item’.

This exact same thing can be done from the toolbar by clicking on the icon next to the ‘New project’, which looks like this-

6. Clicking the ‘Add New Item’ will open a new window-

Select the ‘Windows Phone Portrait Page’ and name the file as ‘MyFirstXamlPage’ (don’t forget the .xaml!). Now click ‘Add’. You will see that a whole new .xaml page pops up for you with a new name ‘MyFirstXamlPage’.
Do the exact same thing which we did when we first created our app, like importing the Button and TextBlock from the Toolbox, renaming the properties of each of the items we imported and the lot. I will just give you a screenshot of how it will look like. If you have any doubts doing it, please go back to the blog where it is described in an extensive manner.

Once you have done that double click on the ‘Click me’ button and this will direct you to the .xaml.cs coding page. We will type in the same code we did last time while creating the app, with some differences in the names of the button and text block-

7. Once that is done, try running the code. Now you might expect everything to go just fine and the code to give us an output, but let me tell you beforehand that an error is going to occur and we will not get any output. Try to expand the ‘e’ tab like we did before and you will get an idea of what has happened. The emulator remains unchanged-

8. This means that somewhere, somehow, an error has crept in our app and we have to rectify that. In order to do that, let’s go to the ‘Solution Explorer’ window again. Now expand the ‘Properties’ pane.

Let’s now select the ‘WMAppManifest.xml’ option and see the code. This WMAppManifest.xml is nothing but a group of .xml codes which tells us what are the things that belong to the app, more like a checklist.

If you look carefully, the manifest tells us that it is still accessing the ‘MyXamlPage.xaml’ (it may be different in your manifest) while I have created a new .xaml page named as ‘MyFirstXamlPage.xaml’. We can clearly understand that unless the manifest accesses the right file, the app we created is not going to run properly. So let’s change the name to the current .xaml page we created.

In my case, it is ‘MyFirstXamlPage’ and I change it accordingly-

Do check that the name of the file you have written is the same to your current .xaml file as any discrepancies will lead to an error again. Save your changes-

This can also be done by pressing ‘Ctrl+Shift+S’.

9. When you try to run the app again, we will see that the app runs successfully.

Hurray!! So now that you have gone extensively over the matter of the connection between the various files in our app, you will have fully understood their individual importance.

10. Let me now get to you what a ‘project’ is and what a ‘solution’ is.
“Let’s take an example of building a computer. Each component like the monitor, mouse, keyboard, CPU etc are all built by different manufacturers. Like the company building the monitor might have to build it using components like a screen, circuit board and stuff like that, which individually can be deemed as the ‘code’. For the monitor to be completely functional, we have to assemble all the components or ‘codes’ together. This is the ‘project’ in our case.
But in order to complete the whole computer set, we need to assemble the monitor, keyboard, mouse, CPU etc together or assemble the ‘projects’ together to give a computer. This is the solution, in our case.”

Next time, we will start with the coding of real C# language and have more fun with our app. Till then, may the coding-Gods be with you!