[Basic for Absolute Beginner] – [Part 3] – App’s Structure and how customized it
Hi everyone,
After the long holiday break, today I’m bringing you part 3 of the [Basic for Absolute Beginner] series
Part 1 covered the basic controls, Grid and StackPanel: [Windows Phone–Silverlight] Layout with XAML–Basic for Absolute Beginner – Part 1
Part 2 covered designing the UI with XAML: [Windows Phone – Silverlight] Layout with XAML – Basic for Absolute Beginner – Part 2
Why did I cover those 2 parts before the App’s Structure? Because the controls are the most basic thing — even if a project’s Structure changes later on, you will figure it out quickly. When you create a new Windows Phone project, Visual Studio already opens the Mainpage.xaml file for you to edit.
Now, going back upstream, you will learn about the structure of an app in Windows Phone
In the same series:
[Basic for Absolute Beginner] – [Part 1] – Layout with XAML 1
[Basic for Absolute Beginner] – [Part 2] – Layout with XAML 2
[Basic for Absolute Beginner] – [Part 3] – App’s Structure and how to customize it
[Basic for Absolute Beginner] – [Part 4] – Basic Steps for a new app
[Basic for Absolute Beginner] – [Part 5] – Analytics for your apps
[Basic for Absolute Beginner] - [Part 6] - Source Control
Table of contents
1. How an app works on the device
When you install an app on a device, you get a model like this:
This applies to Windows Phone 7 and Windows Phone 8. Big changes are promised in Windows Phone 8.1
The yellow arrows stand for access rights
Looking at the picture above, you see your app is only allowed to access its own Isolated Storage (the name Isolated means exactly that)
On top of that, if it wants to reach the memory card, your app must go through the operating system’s API. Right now Windows Phone only lets you read and write media files (music, pictures, video) on the memory card.
2. The structure of an app
Open Visual Studio 2013 and you see this:
Click New Project, pick Windows Phone > Windows Phone App
You will get a chance to practice with some of the other Project types later
Down below there are 2 rather fun options
- Create directory for Solution: your Solution goes into a “parent” folder, and the Project goes into a “child” folder
A bit more about the Project types in Visual Studio: when you create something new, you create a Solution (a .sln file). And all of your Projects live in that Solution. One Solution can hold many Projects.
So why would you need many Projects in 1 Solution? Because each Project produces a different module of the system. Your main Project might be a music player, and a secondary Project might be a module that silently and automatically updates song info, album art and so on
- Add to source control: Source Control is the term for a kind of tool that helps you manage your code effectively. Microsoft has a Source Control tool called Team Foundation Server. Later posts will cover it
Hit Ok to create the Project
That is the UI after creating it (yours may not look exactly the same)
2.1 The parts
2.1.1 The main UI
This is the designer, which visually renders what you write in the XAML file
XAML, the code that defines your UI. The column on the right is the improved scroll bar introduced in Visual 2012
These 3 buttons change the layout. Press them and you’ll see
And this is the Solution Explorer, which holds the file structure of your Project
2.1.2 Properties
Open Properties and you’ll see 3 files
As a beginner, you only need to care about “WMAppManifest.xml”. Double click it to open it
The Application UI section defines the app’s name and its Icons
The Capabilities section defines the resources the app uses, like the Camera, the music, picture and video libraries, the various sensors, the Internet, etc.
Tick whatever your app needs. Don’t tick extras
Requirements are the resources your app “demands” in order to run at all, for example NFC or a Gyroscope
Why? Because not all Windows Phone devices are the same. Some have a front camera, some don’t, blah blah blah. If your app absolutely requires those resources, tick these boxes. On the Windows Phone Store, every device whose specs don’t meet your requirements won’t be able to download it.
And the last one is for packaging and multi-language support. You don’t need to care about it right now
2.1.3 References
References is the folder holding the libraries your app will use
Most of these libraries can be installed with NuGet
See this post: [Visual Studio] NUGET the Magician
Double clicking a library shows you every class and method in that library (if your machine is weak, don’t click it — it will hang)
This feature is called the Object Explorer and has been around for a long time
2.1.4 Assets
The Assets folder holds the image, icon, sound and video files your app will use. You aren’t actually required to put those files in this folder, but do it anyway to stay organized
Right click a file and hit Property to see that file’s properties. The most important properties are Build Action and Copy to output folder
See this post to understand them properly: [Windows Phone – Silverlight] - The difference between “resource” and “content”
To add some file to this folder, simply right click > Add > Existing Item…
2.1.5 Resource
The Resource folder holds the app’s Resource file.
The Resource file is usually used to store the app’s settings, properties and so on. Its biggest use, however, is turning your app into a multi-language app. We’ll talk about it later
2.1.6 App.xaml and App.xaml.cs
Every XAML file comes with a matching XAML.CS file.
The XAML file defines the UI, the CS file defines the behavior
App.xaml and App.xaml.cs define how your app starts up, what happens when it opens, what happens when it closes, and so on.
You will need them in some cases later on. You can open them up and take a look
2.1.7 LocalizedString.cs
This file lets the app support multiple languages. The code in this file is generated by Visual Studio; you don’t have to edit it
2.1.8 MainPage.xaml and MainPage.xaml.cs
Finally, this is the app’s first UI page. The MainPage.xaml file is opened for you right after you create the app
So now you understand the parts that make up a Windows Phone app. Apply posts 1 and 2 and get started designing some useful Windows Phone app of your own