#2 – Creating Your First App (Part 1)

Today we’ll be covering how to set up your first app.

I’m going to split this post into 2 parts as it will be very long otherwise.

The prerequisites for this tutorial are that you have Visual Studio installed on your system.
If this is not the case I’d recommend you take a read through my last post: “Setting Up Visual Studio & Your Developer Account”.

The app we’ll be creating today is going to be a very basic app, a content based one.
It will contain the following features:

  • TextBlocks
  • Containers
  • Buttons
  • Pages
  • Navigation between pages (C# code)
  • Pivot Pages/Items/Controls
  • ScrollViewers
  • Images

All of these features are a snap to implement using Visual Studio.
You can either hard code the tags yourself or else drag the items in from the toolbox on the side of the screen.

Don’t worry if you don’t understand some of the terminology so far, we’ll go through it in step by step detail.

Getting Started

Open up VS(Visual Studio).
If it’s your first time using VS then you’ll be asked what you want your default development environment to be, choose c#.
This is the language we’ll be programming in, along side XAML for the front end.

Once in select on the top bar “File”->”New”->”Project”

Next open the “Templates” menu, then the “Visual C#” menu, then click on “Windows Phone”.
It may prompt you to install the SDK here, if so do it and come back to us once finished.

Next select “Windows Phone App” from the list of templates.

1-Templates

We need to name it, our app is going to be a content app, so we need to choose something.
You can choose something of interest to yourself if you wish, or else follow along with what I’m doing.
I’m going to create a content app for Ireland’s counties.
The first thing I always do is check that the name I’ve chosen isn’t already taken.
Go to the windows phone apps store here:
http://www.windowsphone.com
I checked the name “Ireland Counties”, it’s not taken so I’m going to go ahead with that.

A Visual for our App

It’s good to think about an plan out in your head how the app will look look.
I usually divide an A4 page into 3 or 4 rectangular sections and draw what each page will look like.

My app is going to have a button for each of the 4 provinces on the home screen, when you click on a province it will bring you to a page that contains a button for each of the counties of Ireland.
When you click on one of these buttons, for example the Dublin button, it will bring us to a new page that will show basic information about Dublin along with some images.
I’m going to make this page a “pivot” page so that we can swipe the page horizontally.
When you swipe it the heading will change from “Summary” to “Facts” which will display basic facts about Dublin, another swipe and you’ll get a new heading called “History”.
Each of these pages will also implement a “ScrollViewer” which will allow the screen to be able to scroll downwards, so that you can view text and images that are off the screen (otherwise the screen would be static).
To top it off we’ll use the menu feature that’s already made for you (just commented out) to display an “About” page, where you’ll talk about the developer(Yourself) and the app itself.

Once done you can install this app on your mobile and show off to all your friends 🙂

In later tutorials I’ll be showing you how to:

  • Create logos using GIMP (free Photoshop alternative)
  • Upload the app to the app store
  • Implement advertising
  • Promote your app in the best possible way

I digress, for now lets start with creating a few buttons and some text.

Back to the present

After naming your app click on, then select Windows Phone OS Version 8.0, or 7.1 if you want to support both windows phone 7 and 8.
Windows 8 can run Windows 7 apps, but you’ll be missing out on a few cool new features, I’d recommend sticking with version 8.0, tis the future!

Once you click okay the project will build following the template selected.

Views (design/xaml)

The first thing I usually do is close the error list box at the bottom (marked with a 1), and select the horizontal split view (marked with a 2).

2-NewProject

What you’ll see once you change the layout is the xaml code on the bottom and the actual representation of the code up top on the design view.

The design view is just for you too see your changes as you code the xaml, You can edit stuff by dragging elements around in it but I wouldn’t recommend it as things in the code can go a bit awry.

xaml is like HTML, it’s the layout for your code.
Every xaml page has a C# page built into it, you use the C# page to edit elements in the xaml page.

You won’t see your c# code reflected on the design view, only the xaml code will be reflected.

I’d recommend testing/running your app as you go, you can use a virtual device (built into VS) if your computer allows it, you need a processor that supports hyper threading in order to use the emulator, Intel processors i3 and higher support it.

I myself will be testing on my physical device, a Nokia Lumia 520.

Another handy feature of the design view is that by clicking on an element in the design view, it makes the xaml(code) view scroll to the code for the selected element.

We’ll do that now.

TextBlocks

Click on the “MY APPLICATION” text label on the design view, watch how the code view scrolls to the TextBlock code for it.

3-TextBlock

Change the text in the first TextBlock from “MY APPLICATION” to “Ireland Counties”.
You’ll this change reflected in the design view.
In the second TextBlock Text field change it from “page name” to “Home Page”.

We have just edited the Text field withing two TextBlock elements.
Every element in xaml is held within angle brackets <>.
<TextBlock>, <ScrollViewer>, <Grid>, <StackPanel>, <Button> and <Image> are the ones we’ll be visiting today.

Each of the above elements is how you open it, you also need to close it.
There are two ways to do this, like so:
<TextBlock> </TextBlock> OR <TextBlock />
You would use either way in different scenarios, some tags/elements need you to use one way always.

Here are two ways to show some text:
<TextBlock >Hello World</TextBlock>
OR
<TextBlock Text=”Hello World” />

Containers (StackPanel/Grid)

A StackPanel keeps multiple elements/tags together in one tidy unit, this makes it easier to move around (formatting).
Imaging the stack panel we have here like a car holding two textblock elements in it, wherever the stackpanel goes the two elements go with it.

If we change the background color of the stack panel then the elements within it will obviously have the same background (unless you change their background color as well).

The way xaml works is by layers, whatever goes on last is on top and it takes precedence.
There are many fields for each element, when in an element you can add a field.
Some of the fields seen so far are:
Background, Name (X:Name, same thing, use Name for now though), Text and Margin.
Each of these fields or attributes needs a value, you set it like the following: Background=”Green”
It’s always: field=”value”
Add that field to the stack panel and see what happens, as you type it in you’ll notice Visual Studio will help you along (this is called intelliSense, it helps you code).
Use this helper to your advantage, you should see a list of colors, pick one that you like.

This StackPanel is a default panel, it’s called the title panel, it’s you guessed it, where you’re title is held.

Below it is a Grid element that they’ve named the content panal, this is where all your content will go.

A grid is basically the same as a stack panel, it holds elements together, although I would rather create many stack panels then grids in an app.

The stack panel and grid we’ve talked about are in inside a grid called the LayoutRoot, this is the basic grid for the app, everything you see on the design view is within this, you can add whatever you want into this and it’ll be reflected on the design view.
Don’t mind the first Grid element, it just sorts out your row definitions.

In the content panel grid I want you to add a blue background field (Background=”Blue”).

Now you can see exactly what the elements look like and their size.

I always add a new field to an element at the end of the statement, just before the /> because once I hit space Intellisense brings up a big list of legal elements that I can use which is very handy, you’re not going to learn them all are you?

4-Colors

We’re only going to be working within the layout grid so don’t worry about any of the other code, just leave it the way it is, it works, that;s all you need to know 😉

Buttons!

In the top bar click on “View”, then select “Toolbox”, it should be around the middle of the list.
Your toolbox should pop up on the left of the screen, you can drag it in a bit to make room if you wish.
(If it keeps disappearing on you you may have to click on the pin icon beside the close(x) icon to pin it down to the screen)

Next I want you to click on the white space in between the opening and closing content panel grid tags (Opening Tag + closing Tag + everything in between == element).

With the white space selected look at your toolbox, find the button element and double click on it.
BOOM, you have a button!
It may not do much, but you have one.

You could have hard coded the button element yourself but you wouldn’t have gotten those nifty alignment fields added in for you.
It’s pretty obvious what they do, we’re going to double click on the “left” word in the HorizontalAlignment field area, hit backspace, then hit space, you’ll get a list of options, double click on center.
Your button is now centered, wow!

Button has it’s own text field, it’s called “Content” (just needed to be special), double click on the word “Button” and type in “Leinster”, which is the Easter province of Ireland (where Dublin is based).

Next copy the entire Button Element:
<Button Content=”Leinster” HorizontalAlignment=”Center” VerticalAlignment=”Top”/>
I want you to paste this 3 times and change the Content field to the following (in order):

  • Leinster
  • Ulster
  • Munster
  • Connacht

It should now look like this:

5-Buttons

There’s a problem, the buttons are all on top of each other, to solve this wrap all the buttons in a stack panel.

Click just before the first button and hit enter to have a clear line, now select that clear line, in your toolbox double click on stack panel.

It should pop in after your last button, copy and paste it above the first button, on that clear line we created.
Next get rid of the ‘/’ just before the ‘>’ at the end of the stack panel element (the ‘/’ is the closing indicator), we want to wrap the stack panel around the buttons so we need to add the closing tag after the last button.
Select the clear line after the last button and type “</”, you’ll now see the word “</StackPanel>” pop up, hit enter, and that’s your wrapping done!…. nearly. (you must make sure that the grid wraps around the stack panel, the tags must all match up).

Select all the buttons and hit the “Tab” button (above the “CapsLk” button) to indent the elements, you must make sure to keep your indentation in order, otherwise you’ll end up with spaghetti code!

The problem now is the stack panel took precedence and moved all the elements to the horizontal alignment “left”, this is because it’s like a car, all the other elements are following the stack panel, the buttons are left aligned, but only within the stack panel, the stack panel is left aligned within the grid. (the grid itself is like a car, you have to think about it like some sort of container, containers within containers, containing more containers! :/)

Change the stack panels horizontal alignment field to “Center”, change his height and width fields to “Auto”.
You should now see the buttons all nice and neatly.

I want you to add a width field to each button and give it a value of “200”.
You should now see the following:

6-ButtonsDone

Pages!

Next we’re going to add a new page, we’re going to add a regular ole page like we already have at the moment.

On the side bar to the right in the “Solution Explorer” window right click on “IrelandCounties” (you’ll see a little “C#” icon to the left of it).
Next click “Add”->”New Item” and a box will pop up like below:

7-NewPage

Select the top one, “Windows Phone Portrait Page”.
Call it “Leinster” and click “Add”. [I called it Connacht by accident, I was getting ahead of myself :p]

The new page should pop up just like when you first started the project.
You can change the view again if you wish (or give the vertical view a go).

You may have noticed in the solution explorer on the right hand side a new file was added called leinster.xaml and inside that is a file called leinster.xaml.cs (the c sharp file).

The solution explorer shows all the files in your project, you don’t need to worry about any of the other files for the moment.

I want you to change to background color of the layout root grid from “Transparent” to “Green”.
Change the name “MY APPLICATION” to “Ireland Counties” and the “Page Name” to “Leinster”.

Copy and paste the stackpanel from the home page into this new page.

Change the values of the button’s content field to match my screenshot:

8-Leinster

Conclusion

We have covered the following:

  • Creating an app from a template
  • Views
  • Controls
  • TextBlocks
  • Containers (Grid, StackPanel)
  • Buttons
  • Pages

This is a lot to learn in one tutorial, so look over it, play around with it and make it your own!

In the next tutorial we’ll be going over:

  • Navigation between pages (C# code)
  • Pivot Pages/Items/Controls
  • Fields/Attributes
  • More on TextBlocks
  • ScrollViewers
  • Images
  • Testing
  • App Store Information

See you then! 🙂

Advertisements

One thought on “#2 – Creating Your First App (Part 1)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s