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.

SplashScreen

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.)

Try

 

Catch

 

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).

Integrating video file in Windows Phone 8 and Windows 8 app as app background

These days few top developers are using a video as app’s background. You would imagine it’s quite simple to do so. Yes, the process is small but you should know how exactly it must be done. We don’t just want a video put in the background but we want it to play in loops and also if the user navigates to some other page, it doesn’t start over from the beginning. Just putting a video in the background will work fine if it’s a single page app but the issue with this approach, if the user navigates to the next page, the video will start over in the next page (even if the first page passes the time elapsed of the video to the next page, you will notice a very ugly blinking in the video). Here’s what we mean:

It’s important to understand the architecture behind modern Windows apps. Every time you want to navigate from a page to another, the Frame will render the new page.

 

 

Windows Phone 8.1 XAML or Windows 8.1 app

So to have one infinite video which plays on all pages, we just need to add the MediaElement to the Frame level instead of the page level. To do this, we will need to modify the default template of the Frame. I’ve created the following style to the App.xaml, and gave it the key name RootFrameStyle.

All what we did there is changing the template to a Grid. Inside that grid we’ve added a MediaElement control behind the ContentPresenter. After that, in App.xaml.cs we apply the style to the Frame:


Note: Set the Background of your pages as Transparent or else you won’t be able to view the video.  

Windows Phone 8 (Silverlight app)

While developing for Windows Phone 8 (Silverlight app) set the target as phone:PhoneApplicationFrame instead of Frame.   And set the Style as follows:

Note: MediaElement in Windows Phone 8 Silverlight app doesn’t support IsLooping. So you will have to manually loop the video.

We used Tareq Ateik’s awesome blog post to build this tutorial. You can download the full source code for both projects and use it as a reference.

Windows Phone 8

Download VideoBG.zip (WP 8)

Windows Phone 8.1 and Windows 8.1

Download Video_BG.zip (WP 8.1 & Windows 8.1)

Using AdDuplex in Universal Windows Apps

AdDuplex offers an universal app SDK in addition to its existing SDK for Windows Phone 7.8 and Windows Phone 8. This universal app SDK can be used with either universal Windows apps or standalone Windows 8.1 or Windows Phone 8.1 XAML apps.

Step 1. Register for a publisher account on AdDuplex

First thing first. If you don’t have an adduplex account, register on

http://www.adduplex.com


 

Step 2. Register a new app from your dashboard

Click on New App button in the dashboard to register a new app. We are building a Universal app which will run on both Windows Phone 8.1 and Windows 8.1. So we will need to register two new apps here, one for phone and other for desktop.

 


 

Enter the details for the app and choose an appropriate platform.

 

Once you create the app, note down the App ID which we will need while developing the application.

 

Step 3. Create a new Universal App project

The SDK can be used for either an universal app or standalone Windows 8.1 or Windows Phone 8.1 XAML apps. So in your Visual Studio Choose a Blank Universal app from the installed templates.

 

 

Step 4. Download the SDK from Visual Studio Gallery website

You can get the SDK from Visual Studio Gallery’s website. I am not sure if its available on Nuget too.

http://visualstudiogallery.msdn.microsoft.com/92f919ee-40a8-4549-8768-d3b453ceebea


 

Adding AdDuplex to Windows 8.1 app

 

Step 5. Add a Reference to AdDuplex SDK for Windows 8.1

In your Windows 8.1 project add a reference to AdDuplex SDK for Windows 8.1. From the Solution Explorer window, right click References…, and select Add New Reference…

 

Step 6. Add the namespace for AdDuplex in MainPage.xaml

Next, add a namespace for adduplex on the page where you wish to display ads.


 

Step 7. Add the AdDuplex adcontrol in your page

Finally add the code for adduplex’s AdControl in your page. Use the app id which you generated earlier while registering the app on adduplex’s website.

Note: Make sure the whole AdControl is visible by verifying that it’s not obstructed by any other objects on your page. We recommend setting the Canvas.ZIndex property to a high value to make sure the AdControl is not being covered.

 


 

That’s it. You can run the Windows 8.1 app on the local machine and hopefully an ad will appear.


 

Adding AdDuplex to Windows Phone 8.1 XAML App

 

Step 8. Add a reference to Windows Phone 8.1 XAML SDK

Similar to the Windows 8.1 app, you need to add a reference to AdDuplex SDK for Windows Phone 8.1(XAML) in your project for Windows Phone 8.1


 

Step 9. Add the namespace and adcontrol for AdDuplex in MainPage.xaml

Just like the Windows 8.1 app add the namespace and adcontrol to your page. Use the app id which you generated earlier while registering the app on adduplex’s website.


 

That’s it. You can run the Windows Phone 8.1 app on the emulator and hopefully an ad will appear.


 

Download full project AdDuplex-Ads.zip

How to get IP address in Windows Phone 8 and Windows 8.1 app

Windows Phone 8 provides an easy way to identify the IP address of the phone from the Windows Phone App. Note that there are possibilities of having multiple network interfaces on your Windows Phone. For example, the Windows Phone Emulator has 3 network interfaces as shown in the screenshot below. The code snippet tries to retrieve the first one which is added to the List.

Windows 8

DNS is not supported by Metro applications. So to find the IP address in a Metro app import the Windows.Networking.Connectivity namespace. NetworkInformation.GetInternetConnectionProfile retrieves the connection profile associated with the internet connection currently used by the local machine. NetworkInformation.GetHostNames retrieves a list of host names. Hostname has various properties such as Canonical Name, Display Name and Raw Name, but they all seem to return the same string. Here ipadd will give the IP address of the machine (localhost). The code below lets you fetch the IP address of the local machine.    

Here’s a screen shot of the app showing the IP address in a textbox.

Get the full source code of the solution with Windows Phone 8 and Window 8.1 projects in it.

Download full project source code IP-Address.zip

Creating a free Windows 8 metro app for your WordPress blog using IdeaPress

We have already seen that how you could make a windows phone app for your website using Microsoft’s app studio. Now let us try converting a wordpress blog to windows 8 metro app. There are plenty of templates available in app studio that let you create universal apps (for both windows phone and windows 8) but the website template doesn’t let you create a desktop app. So lets use another service which is more or less free if you follow this tutorial. Here’s a link to their website.

http://www.ideapress.me/

They have a special section for Windows 8 app at http://win8.ideapress.me/. They have made the source code open to all and have put it up on github. One way is to download the zip file of the project and run it in visual studio to tweak things. This is more suitable for experienced developers.

 

However, this blog post targets those who have just started with Windows development and want to see their wordpress website on a Windows 8 app without not much real coding. Follow these steps and at the end of it you will be ready with a published (or atleast submitted for certification) app.

Step 1. Visit ideapress and create a new Windows 8 app

Go the link given below and click on Get Started to create a new project.

http://win8.ideapress.me/

 

Step 2. Install IdeaPress JSON API before going ahead with your project

Visit your wordpress site’s admin panel and add a new plugin to it. Search for ideapress json api and install it to your website

 

 

Then go to Settings>> IdeaPress JSON API Settings and check whether both the listed controllers are active. By default IP_RESPOND is inactive. You need to activate both of them to make things work.

 

 

Step 3. Jump back to IdeaPress and enter the site URL

It asks you for the Site URL in the first step. Enter the URL and move to the next step. It will then check whether the IdeaPress JSON API is installed on your website. If it isn’t installed or is inactive then you won’t be able to move to the next step.

 

 

Step 4. Enter the app details in General Info tab

The wizard asks you for app name, description, category and default language in the General Info tab. Fill in all the details and move to the next step.

 

 

Step 5. Choose what content to display in the app

This tab lists all the pages and post categories from your blog. Choose what you wish to display and what to omit.

 

 

Step 6. Configure the theme for your app

This is by far the longest step in the whole wizard. Choose the layout, theme and colors. Upload the logos, splash screen and live tile images. Move to next step when you are done customizing the look and feel of your app. The preview shows you exactly how your app looks.

 

 

Step 7. Generate the app package in the last step of the wizard

Each Windows 8 app requires a privacy policy link. Create a privacy policy page on your website and provide its link here. If you wish IdeaPress to publish the app for you then they would charge a fee of 199$. Otherwise you could generate a publish package or a visual studio solution for free. A publish package contains the APPX file that needs to be submitted to the store and the visual studio solution contains the whole project file which you could edit and publish at your own ease. So if you choose to publish the app manually then IdeaPress doesn’t charge you anything for it.

 

 

Step 8. Submit the app to the store.

Go to windows 8 dev center and submit the app for certification. Here’s a blog post explaining how you could submit an app to Windows 8 dev center.

http://www.windowsapptutorials.com/windows-8/general-windows-8/submitting-a-windows-store-app-for-certification/

That’s all you need to create a free Windows 8 metro app for your WordPress blog using IdeaPress. IdeaPress is a great way to convert your apps to Windows Phone 8 and Windows 8 apps.

Submitting a Windows Store app for certification

If you find it tricky to submit a Windows 8 app for certification, then this tutorial is for you. Bookmark it for reference while submitting an app to the Windows 8 store. You will need a publisher account before you could submit any app to the marketplace. Windows dev center’s annual fee is very less as compared to other platforms and if you already have a Windows Phone dev center account then you don’t need to pay again. Your new Windows 8 account will be linked with the Window Phone account if you are using the same email address. Here’s how you could submit an app to store.

Step 1. Associate your app with the Windows Store

In this tutorial I will be using the same app which we creating using IdeaPress for Windows 8. Have a look at this blog post to see how we created an app from our WordPress website using IdeaPress for free and generated the Visual Studio package.

Right click on the project name in solution explorer, go to Store> Associate app with the Windows Store. You will be prompted to log in the Microsoft account with which your publisher account is linked. After login the dialog box will list the project which don’t have any packages added to them from Windows Phone and Windows 8 dev center combined. You could also reserve a new app name. Reserve a new app name if it’s a new app and is not already published for Windows Phone. Here I choose to select one of the existing app names as Windows App tutorials was already published to windows phone and I wish to use the same identity for Windows 8. Choosing an existing app name will let you make your app universal as they both will share the same identity in the store.

 

 

Step 2. Create App Packages

Go to Store> Create App Packages by right clicking on the project name. You would be prompted to login and in the next step it will ask whether you want to build packages to upload to the Windows Store. Choose yes and click on Next.

 

 

Next step will ask you for output location, version number and solution configuration mappings. The default settings work well and you could now click on Create to build the APPX file.

 

 

Next it will ask you if you wish to run the App Certification Kit. It is recommended to let it run all the tests and check for any possible errors. Better invest some time now to save the frustration of your app not getting certified after submission.

 

 

Step 3. Take Screen Shots

Go to store> Take Screen shots to take screen shots of various screens of the app. These would be required during submission.

Step 4. Visit windows 8 dev center and login to your account

Go to https://appdev.microsoft.com/StorePortals/ and login to your account

Step 5. Start submission of a new app

After login choose Submit an app from your dashboard to start submitting an app for Windows 8.

 

 

The app submission screen shows various sections that needs to be completed in order to submit an app. It’s a little tedious but it can’t be helped!

 

 

Step 6. Fill in the details under app name

In this section you need to enter the name for your app. If you are using an existing name then you could use if from the list or else reserve a new name for your app. You could use an existing app name if your app already exists in the Windows 8/Windows Phone store.

 

 

Step 7. Enter the selling details

This step lets you choose the price and market for your app. Choose your preferred price from the list and select the markets to which you wish to publish the app. Here I am choosing all markets as I am sure that it won’t violate any content compliances.

 

 

Also scroll down to choose the app category and release date.

 

 

Step 8. Add the services which your app uses

If your app makes use of any services like azure mobile services or in app purchases then fill in those details. We just click on save the default settings.
Capture
Step 9. Add an age rating and rating certificates

This step lets you choose an age rating for your app. If you wish to avoid uploading any rating certificates to your app then it is safe to choose `12 and older`. Otherwise you need to add the appropriate certificates with the app.

 

 

Step 10. Add Cryptography details

This step asks for how your app uses cryptography and encryption. We don’t make uses of any encryption so we choose the appropriate options and move ahead.

 

 

Step 11. Upload the app package

Locate the APPX file in your project and choose to upload it here.

 

 

After uploading it will verify if the uploaded package has valid identity. Save it and move to the next step.

 

 

Step 12. Add app description

Add the description, features, keywords and screenshots for your app. It lets you add different details for Windows 8.1 and Window 8.

 

 

That’s all which is needed to submit an app. Now keep waiting till your app gets certified. It usually takes less than one day to get an app certified.