Chapter 1: Developing Windows Apps using Visual Basic

Please have a German – English dictionary by your side or use one of the many translators available online. I am using Microsoft Visual Studio Express 2013 for Windows. Visual Basic is being used.

Select and click: New Project

New Project

Visual Basic

Store Apps

Windows Phone – Apps

Windows – Apps

Select Windows – Apps

Name: MyApp1 (when the name is typed in, the other two lines are filled by itself.)

Path: c:\users\emmanuel\Visual Studio 2013\Projects (Durchsuchen means search)

Project Folder: MyApp1

Create Directory

Ok (click ok button). Abbrechen means cancel.


Now you are taken to the project window.

Here you see the MainPage.xaml.vb, MainPage.xaml, App.xaml.vb as Title of the pages to be displayed when you click one these.

MainPage.xaml is being displayed now. On the right you have the Project Explorer and Properties windows. Right below the main display you see the XAML code displayed which you can edit but DO NOT touch now. We will come to that later as time goes by.

Now let us go to the Project Explorer on the right-hand side.

Here let us click the Assets folder (Directory)



Here in the Assets directory, the images are saved. These four images have to be replaced by your own but without changing the name.

  • Logo should be 150 by 150 pixels.
  • SmallLogo should be 30 by 30 pixels.
  • SplashScreen should be 310 by 150 pixels.
  • StoreLogo should be 50 by 50 pixels.

SplashScreen pops up for a few seconds when the app is called in. The other three are for the Windows store market meant to catch the attention of potential users.


Logo SmallLogo StoreLogo


Now let us start some work in the MainPage.xaml. Once you are in the main page form, you can activate the Tools listing. (From View listing and the Tools). Then from the tools list select the ListBox by double click. You will see the listbox on the top left of the mainpage display. Drag this down to the mainpage body. Using the properties list, you can change background colour, change text font size etc. The ListBox should be highlighted for you to see and change the properties. Assign a name to the ListBox. ListBox1 for example.

In the mainpage you can change the size of the listbox by dragging the highlighted frame.

Now from the Tools listing, select Button and double click. Drag the Button appearing now in the top left corner of main page to the main body. Just like what we did for the listbox, give a name, change fore and background colours, text font size and type in the content, a title for the button.


Click the top right box in the properties of the button and

Fill in for Click…..Button1_Click. (Button1 is the name of the Button.)

Now the MainPage.xaml.vb gets activated and a module is created

Button1_Click(……) for you to write the code.

Herein you type in the code.

ListBox1.Items.Add(” What a Wonderful World “) the beautiful song of Louis Armstrong. Now run your app by pressing F5 or clicking Debugging.

Click the Button1 and your text appears in the ListBox. Return for more codes by pressing alt+tabs or anyother means.

Now let us create a TextBlock by double clicking TextBlock in the Tools list and then dragging the TextBlock from the top left corner of the Form to the main body. Highlight TextBlock and do the necessary changes in the properties.

Now you can directly type in the messages in the TextBlock. Similarly, you may select anyone of the tools from the Tools List and continue.

Now let us select the Image tool by double clicking, dragging and so on. Drag an image from a directory and place it in the Assets directory. Highlight the Image block in the Form and select Sources in Properties. All the images in the Assets directory will be now listed in the Sources to enable you to select the required image.

Here there are six TextBoxes, three Buttons and the rest as labels in TextBlocks. While executing the program, you enter a point number and then two plane coordinates X1 and Y1. When you click the accept button. These values are stored in respective variables, declared by us in the code in MainPage.xaml.vb. Plane coordinates mean Cartesian coordinates in a plane. That is a two dimensional plane. In the Cartesian system, the axes intersect at right angles.

Now let us go to the MainPage.xaml.vb.

At the top of the MainPage.xaml.vb form, we declare the variables. Dim i as Integer. i is going to be used as a counter.

We are declaring an array of ten for each of the variables except the counter.

  • TextBoxes accommodate only String variables.
  • Long.Parse converts String to Long.
  • Double.Parse converts String to Double values.
  • ListBox takes in only String data, therefore we have to convert the non-string values to string by using X1(i).ToString.


I typed in this line of text in a new textblock but on execution the word “necessary” appears broken with spaces within the word “nece s sary”. This could be edited in XAML as shown below.



One has to be careful meddling with XAML. An inadvertent entry or space will prevent the Page.xaml from loading. Let us go back to the Button2_Click() module.


The single apostrophe is used for comments. (Instead of REM etc.)





End Try these three are used to catch errors and prevent the system hanging.

PtNo(i) = Long.Parse(TextBox5.Text) convert the string contents of TextBox5.Text to variable type Long and place it in

the array element of PtNo(i). PtNo(0) is the first element.

If (PtNo(i) = -99) then GoTo 100 if the value entered is –99

Then goto to line address 100:.


100 numpts = i – 1 (the number of points in the list)

GoTo 120



  1. Lists the data in the ListBox1.

The numpts has to declared as integer. See the top of the form.


Let us see another sub-routine.


editptno is declared at the top as variable Long and this takes in the contents of TextBox5. editptno is compared with all the point numbers in the list and when an identical point number is found, then the X1() and Y1() values are placed in the respective TextBoxes so that you may edit and Accept.

Editflag = 1 a flag is set to show you were here and this is shown and used in the Button2 routine.

In Button 2, editflag is used to prevent incrementing the point number and give a wrong number to the number of points in the list.

Enter the number that you want to edit, press Edit button, make the correction and then press the accept button.


Now let us analyse the sub-routine Button2_Click() which we are using to type in a set of coordinates. TextBox6 is assigned to take in the Point Number of a point. Point number has been declared by us as a variable Long. If this text box is blank then an error message is listed in the list box. If this text box contains anything else other than numbers then the Try Catch End Try argument catches the error and the message appears in the list box. If TextBox5.Text contains –99 then a list of the points is listed.


If any points have been edited then you are taken to the address 110:

If the TextBox1.Text and TextBox2.Text are empty then an error message in the listbox otherwise two variables take in the coordinates provided the text boxes contain only numbers.

The point number, X1 and Y1 are listed.

The point number is incremented and shown in TextBox5.Text so that you may enter the coordinates of the next point.

editflag is set to zero.

If TextBox5.Text contains –99 then a list of the points is listed as in address 120:

When you see in the listbox that you have given a wrong coordinate then you enter the point number to be edited in TextBox5.Text and press the Edit button. You are taken to the edit routine.



If the number of points is less than 1 then the chances are that you have not entered –99 before coming to the edit routine. In the routine Button2_Click(), the variable numpts takes in thevalue of number of points entered, only when you enter –99 in the TextBox5.Text and press the accept button.

These steps should eventually be written in the guidelines and instructions to the users and may even be included in the listboxes. We will come to that later.

The variable editptno2 takes in the number of the point to be edited and goes through the list of the given data, comparing point by point the point number and takes and displays in the text boxes the values to be edited as shown in line address 100:.


The number in the list i1 is saved in the variable editcounter1 and used in Button2_Click() routine inorder to save the editted data at the original listing position.



Similarly for the second set of coordinates in Button3_Click and Edittwo_Click().

The number in the list i2 is saved in the variable editcounter2 and used in Button2_Click() routine inorder to save the editted data at the original listing position.


Next chapter we will learn about

  1. Writing data to and reading from text files.
  2. Doing calculations with the coordinates to find distances between points and area contained in polygons constructed with the list of coordinates.
  3. Drawing the lines and polygons. Etc.
  4. UI (User Interfaces).
Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding