Introduction to Windows Phone 7.

The Windows Phone 7 is Microsoft’s venture into the smartphone market. It was first introduced in 2010 and has seen huge growth since then. Windows Phone 7 phones are made by HTC, Dell, Samsung, LG, and Nokia. There are currently around 70,000 apps on the Windows Phone 7 Marketplace.

1

Introduction to Visual Studio 2010.

Visual Studio 2010 is Microsoft’s platform for developing programs for all types of Microsoft products and Operating Systems. With Visual Studio 2010 you can develop for Windows, Xbox 360 and Windows Phone, among others. It allows for development in languages such as C#, C++, F# and more.

2

Overview of the different Windows Phone 7 project types. With Visual Studio 2010 you can create different types of programs for different types of platforms. Below is a list of the types of projects that can be created. We will be working with Silverlight for Windows Phone today.

Silverlight for Windows Phone Windows Phone Application This type of project is a basic one-page application that can be used as a starting point for any app. This is what we will be using today. Windows Phone Databound Application This type of project is used for creating an application that uses List and Navigation controls. Windows Phone Class Library This type of project is used for creating a class library that can be used in other projects. There is no user interface involved in this project. Windows Phone Panorama Application This type of project uses Panorama control and is very useful for applications that require multiple side-by-side pages. Windows Phone Pivot Application This type of project uses Pivot control and is very similar to a Panorama application. Windows Phone Silverlight and XNA Application This type of project uses both Silverlight and the XNA Framework. The XNA Framework is primarily used for creating games on the Windows Phone 7. Windows Phone Audio Playback Agent This type of project is similar to the Windows Phone Class Library and is used for adding a background agent to play audio files. There is no user interface involved in this project. Windows Phone Audio Streaming Agent This type of project is similar to the Windows Phone Audio Playback Agent but for playing streaming audio files. There is no user interface involved in this project. Windows Phone Scheduled Task Agent This type of project is similar to the Windows Phone Class Library for adding a background agent to perform a periodic or resource-intensive task. There is no user interface involved in this project.

3

Creating a Silverlight project. 1. Open Visual Studio 2010. 2. Click on File. 3. Click on New Project. 2 3

4

You will be presented with the New Project window. 4. 5. 6. 7. 8. 9.

Under Recent Templates expand Visual C#. Click on Silverlight for Windows Phone. In the centre portion select Windows Phone Application. In the lover portion name your application myApp. Select the location where you want your project files saved. Click OK.

Note: Solution name is generated automatically. There is no need to alter this.

6 4

5

7

8 9

You will be presented with the New Windows Phone Application window. There are two types of applications, OS7.0 and OS7.1. You will always only select OS7.1 as OS7.0 is no longer used. 10. Verify that the Target Windows Phone OS Version is set to Windows Phone OS7.1 and click OK.

5

10

You will be presented with the Connect to Team Project window. A Team Foundation Server allows a team from different parts of the world to work on the same project. We won’t use this feature.

Your project will now open and be available for editing. App Deployment Area

XAML Code Window

Solution Explorer

Designer View

Properties Window

Output Window

Solution Explorer This is where all files related to your project will be. From here you can add new files, import graphics and sounds, or open an existing file for editing. Properties Window When you select any item, such as a TextBlock, it’s editable elements will be displayed in the Properties Window. You will be able to change font sizes, positions, and many other elements from this window. 6

XAML Code Window This is the main code for the page that is currently open. Designer View This view shows how your application page will look. This view is updated in real time so changes made can be viewed immediately. This is also the area where you will drag items into your application. App Deployment Area From here you can choose to deploy your application on the Windows Phone Emulator (a program that simulates a Windows Phone 7), or to a phone directly. Output Window From here you can view the Error List, where any coding errors will be listed. The Output section will display step by step information about your application whilst it’s being deployed either to the emulator or device.

Each page contains XAML code, some of which is automatically generated when you create a new page. The top section of this code will refer to system resource files and other system related elements. Normally, the only thing that you would change here is: Line 9 – You can change the viewable screen area here. Line 13 – You can change the application’s orientation here from portrait to landscape.

7

If line numbers do NOT display, click on Tools > Options.

On the Options window, expand Text Editor > All Languages and click on General. Under Display, tick the box beside Line Numbers. Click OK. Line Numbers should now appear.

8

The lower section is solely related to the application bar, which is an additional menu system. The code is in green here because it is commented out, meaning that it is visible, but the program cannot run it. To comment out a piece of code, enclose it in

We will primarily be working with the centre piece of code. Look carefully at the Designer View of your page. You will see some content is already there by default, “MY APPLICATION” and “page name”. If you look at the code in the XAML Code Window you will see that the code related to “MY APPLICATION” is on line 25 and the code related to “page name” is on line 26.

9

Adding content to your application. On the left hand side of the screen you should see the Toolbox window. If you don’t, click on View and Toolbox. This will bring up the Toolbox view.

Once the Toolbox view is displayed, scroll down to TextBlock. Whilst holding down the left mouse button on TextBlock, drag it into the Designer View and drop it anywhere on your application.

10

Your TextBlock is now movable and its dimensions can be changed directly from the Designer View.

11. Drag the TextBlock to roughly the area shown below and extend the size to the full width of the screen.

11

11

12. Once your TextBlock is selected you can use the Properties View to change any of its elements. Under the Common section change the Text from TextBlock to Hello World!.

Have a look at the other changeable items on the Properties Window.

13. Change the text size to 36. 14. Change the text alignment to Centre.

13

14

12

Notice that the Text element of your TextBlock has changed to Hello World! in the XAML view.

15

16

15. Change the text of MY APPLICATION to Language set to:. 16. Change the text of page name to English. 17. Drag another TextBlock into the Designer View and change its text to This is a brief sentence to show translation on this mobile device. 17 Notice how the text has vanished off the end of the TextBlock. We will fix this in the next step.

13

18. Select the TextBlock that contains your sentence and look at its code in the XAML Window. Add TextWrapping=”Wrap” to the end of the line. This will ensure that if text is too long, it will drop a line.





18

14

Localising your application. In order to localise your app we will need to store all our strings in a database called a Resource file. The strings we will need to save are anything that we will be translating. These are:  English  Hello World!  This is a brief sentence to show translation.

19. In Solution Explorer right click on myApp and select Add > New Item.

19

15

20. Select Resources File and change its name to AppResources.resx Note: It is not compulsory to name these files AppResources.

20

16

21.   

Add the following to the Name section by left clicking on each box: helloString langSetTo sentenceString

22.   

Add the following to the Value section: Hello World! English This is a brief sentence to show translation.

Make sure that helloString corresponds to Hello World! etc. What will happen in our program is that our page will only reference the Name section, from this it will be able to extract the Value associated with it. Name helloString langSetTo sentenceString

Value Hello World! English This is a brief sentence to show translation on this mobile device.

21

The Name section is where you will store the reference to your strings.

22

The Value section will hold the text itself that will be translated later.

17

The Comment section is just as the name suggests. A place to write any comments about the string.

23. This next step is VITAL. Change the Access Modifier to Public. If you don’t make this change your application will not be able to access the resource file.

23

We now have a database set up with all the strings we need. However, our app has no idea what a Resource File is so we need another file to act as a go-between. 24. Right click on myApp and select Add > Class…

18

24

25. Select Class and rename it to LocalizedStrings.cs

19

25

Notice that this new page has NO designer view and is composed of code that looks different to XAML. This file is NOT a page within our application, this is why the Designer Window is not available for this file. The code is C# (C sharp) and is the backbone of any Windows Phone 7 application. When you add an item to a page it will generate some XAML and the item is viewable in the Designer View. What you don’t see is the vast amount of C# code that is automatically generated. It is this C# code that makes your application function.

20

The LocalizedStrings.cs file that we have just created will allow our application to communicate directly with our AppResources file. To achieve this we must add the following lines of code to LocalizedStrings.cs public LocalizedStrings() { }

①

②

③

④

private static myApp.AppResources localizedResources = new myApp.AppResources(); public myApp.AppResources LocalizedResources { get { return localizedResources; } }

① myApp is the name of our project. ② AppResources is the name of the file we want to access. ③ localizedResources is just a name we give to this item of type myApp.AppResources. ④ = new myApp.AppResources() means that we want to create a new instance of this item. As this is a lot to get your head around let me put it another way. private static myApp.AppResources localizedResources = new myApp.AppResources();

Can be rephrased to… private static planetEarth.Human John = new planetEarth.Human();

Which can be read as… There is a planet called Earth that contains humans, call this one John = create this human on Earth. Or, if read backwards… Create a human on Earth, call him John, he is of type human and is on Earth.

21

26. Now go back to your mainPage file and highlight English. We will be changing this to refer to our AppResources database.

26

27. Replace English with the following: {Binding Path=LocalizedResources.langSetTo, Source={StaticResource LocalizedStrings}}

Notice that we are referring to langSetTo. This will refer to the langSetTo string in our AppResources file.

27

28 28. Replace Hello World! and This is a brief sentence to show translation with the same text as in point 27 above and change the langSetTo variable to helloString and sentenceString respectively.

22

You have now pointed all these TextBlock’s to point to your Resource File. However, if you look at the Designer View you will notice that nothing is displayed. The reason for this is that they are successfully accessing the Resource File, but your app hasn’t been told anything about the existence of the Resource File. What you’ve done so far is to create the Resource File and you have created the middle-man (LocalizedStrings.cs) that allows the TextBlock to talk to the Resource File.

23

Now we need to tell your application that the Resource File exists. To do this we point your application to the middle-man, LocalizedStrings.cs. 29. On Solution Explorer, double-click App.xaml to open it. We will add a line of code between and . Note: This file does not have a Designer View as it is a system file used for launching your application.

29

30. Add the following line of code between and .

30

24

31. You should get a blue line under local:LocalizedStrings. This means that there is an error. To get more info on the error hover your mouse pointer over local:LocalizedStrings. The following error appears: The type ‘local:LocalizedStrings’ was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. What’s happening here is that, you have added information pointing to your Resource File through its middle-man (LocalizedStrings.cs), but the program still doesn’t know what you’re talking about. What you need to do is build your application. During the build process it will now search for, and try to link up your Resource File to the rest of your application.

31

32. To build your application click on Build > Build myApp. 33. This action will effectively prepare your application for deployment on either the emulator or a physical device. 32

25

You will notice that the blue line will vanish and on the MainPage, in Designer View, all the variables now display.

You have just internationalised your application. But it’s only set up for English. We will add more languages in the next step.

26

34. Open Internet Explorer and navigate to the following URL: http://msdn.microsoft.com/en-us/library/hh487168(v=vs.92).aspx This site lists all supported languages for Windows Phone 7. What we will be interested in is the first part of the Culture code, as this is a code to signify a language. cs-CZ breaks down as cs (Czech) and CZ (Czech Republic). As we are only interested in the language we will be discounting the CZ. 34

We will NOT be working with any of the Asian character languages today as this involves importing new fonts and more work to help them display. Instead, we will be concentrating on: Czech (cs) Finnish (fi) Greek (el) Italian (it) Polish (pl) Spanish (es)

Danish (da) French (fr) Hungarian (hu) Malay (ms) Portuguese (pt) Swedish (sv)

Dutch (nl) German (de) Indonesian (id) Norwegian (nb) Russian (ru)

As this is a huge list of languages and a lot of work to do, we will only work with Czech (cs) today. However, you may translate into your preferred language if you wish. If you do choose a different language, for example French, please make sure that you substitute the language codes where you see them being used. So if you want to use French, wherever you see cs being used in the following steps, substitute fr. As an exercise you can add the remaining languages in your spare time. 27

35. Add a new Resource file by right clicking on myApp in Solution Explorer and selecting Add > New Item. Name your new file AppResources.cs.resx The cs part will tell the device that this is the Resource file associated with the Czech language. When your phone is set to Czech, it will access this file and when your phone is set to English it will access AppResources.resx file.

35

28

36. As we have done previously add the following string references to the Name field of our new Resource File: helloString langSetTo sentenceString Don’t forget to set the Access Modifier to Public.

36

We will be translating our English Values to Czech here.

29

37. Open Internet Explorer and go to Google Translate http://translate.google.com/# Note: I am using Google Translate here to save time but this would not happen in a real localisation situation. 38. Type in Hello World making sure NOT to type in the “!” as this can interfere with the translation. Under the Translate field change From: to English and To: to Czech. 39. Click Translate. 40. The phrase “Hello World” is university used by programmers and as a result it may not translate. When this happens just click on the translation and you will get other options. Select the first option to properly translate this phrase. 37 39

38 40

41. Copy this translation and paste it into the Value field that corresponds to helloString. 42. Type Czech into the Value field that corresponds to langSetTo. 43. Translate the sentence This is a brief sentence to show translation. and paste into the Value field that corresponds to sentenceString.

41 42

43

30

Now you need to tell your application that its default language is set to English. When you do this it will know that AppResources.resx contains English. 44. Right click on myApp and select Properties.

44

31

This will open up the main properties of your application. 45. Click on Application tab. 46. Click on Assembly Information.

45

46

47. On the Assembly Information window click on the drop-down menu under Neutral Language and select English. 48. Click OK.

48

47 32

Other things can be changed from this window but there is no need to change these in this course. Title This will be the title as it will display on the device and on the Windows Phone Marketplace. Description There is never a need to fill this in. Product This will be the same as Title. Copyright You can add your name or company name here to help protect your application. Trademark Only needs to be filled in if your own a registered trademark. Assembly Version / File Version This is the version of your application and will only need to be changed from 1.0.0 if you already have this application on the Marketplace and subsequently created an updated version. GUID This is an automatically generated variable that you must NEVER change. It uniquely identifies your application to Microsoft.

33

49. 50. 51. 52.

The next step is to tell your application that it should now support the Czech language. Close Visual Studio 2010. Locate the folder that contains your project files. Navigate into the folder myApp. Select the file myApp (this will be located above the file myApp.csproj).

Note: Some localization tutorials refer to editing the myApp.csproj file. This is incorrect and you should never edit the .csproj file. 51

52

34

53. Right click on the myApp file and open with Notepad, or any other text editer. 54. If Notepad is not listed as an option it should be located at C:\Windows\System32\notepad.exe 54

53

55. The myApp file should look like the image below. If it doesn’t then you have opened the wrong file. 56. We will be adding a small piece of code between and . 55

56

35

57. Add cs between and . This tells our program that we support the Czech language. Note: We are not adding English here as we have already set this as our default Neutral Language. For adding multiple languages here we separate them with “;”. So, if we support Czech and French it will be cs;fr

57

You now have an application that will display both English and Czech. The even better news is that all that horrible programming is finished. In the next section we will test your application in the emulator.

36

58. Open your project again. 59. When your project is opened make sure it is set to deploy in the emulator and set to debug. 60. Click on or press F5 to deploy the application.

60

59

When you select the environment to deploy in (step 59 above) you will be presented with the following options:  Windows Phone Device  Windows Phone Emulator – 512 MB  Windows Phone Emulator – 256 MB Select the last option, Windows Phone Emulator – 256 MB. This option is for testing your application for the lowend Windows Phone devices. If your app successfully runs in this environment it will run on the 512 MB versions.

37

Your application will now run in the Windows Phone Emulator. ①

The main emulator view. This is where your application displays.

②

The options pane will allow you to change the orientation of the emulator, zoom in and out changing the size of the emulator and several other options.

③

This is the Frame Counter. It can be used for checking the memory usage of your application, however, we don’t need this and it can be turned off.

②

③

①

61. To turn off the Frame Counter we first stop our emulator and under Solution Explorer, expand App.xaml. Double-click on App.xaml.cs to open the Code Behind view. This is the C# code that is automatically generated and is responsible for running your application. 61

38

62. Go to line 44. This line will display the Frame Counter. To turn it off simply comment it out by typing “//” at the start of the line. Now that line of code is available but because it is commented out the program will never read that line of code.

62

39

63. Deploy your application again by clicking on

or press F5.

Notice that the Frame Counter no longer displays.

?

40

Now we can test the application to make sure it displays the Czech language correctly. 64. Stop the application by clicking the stop button in Visual Studio 2010 or by tapping the back button in the emulator. 65. Press the arrow button on screen to navigate to the Application List.

65

64

66. On the Application List tap Settings to enter the settings menu.

66

41

67. On the Settings menu tap region+language.

67

68. Tap Display language and change the language to Czech. Note: The languages are displayed in their native form, Czech is:

68

42

In order for a new language to be displayed on either the emulator or device, you must restart it. 69. Tap on Tap here to accept changes and restart your phone.

69

70

70. When your emulator / device restarts, navigate to the Application List and locate your app. Tap on myApp to launch your application. Note: Settings has been translated to Czech.

43

Your application is now displaying in Czech. Well done. What is happening here is that your application has asked the phone what language it is set to. As it is set to Czech the application knows to reference the AppResources.cs.resx file.

①

②

Language set to: is not in any of our AppResource files because we want to keep this in English.

①

This is our langSetTo in our AppResources file.

③

This is our helloString in our AppResources file.

④

This is our sentenceString in our AppResources file.

②

③

④

44

The last thing we need to do is figure our an easy system for changing the language back to English. Bear in mind that all the settings menu items will now be displayed in whatever language you have changed to. The settings screen is different between the emulator and the device. I will be showing you here how to change the language back for the emulator.

71. Open settings again and now region+language will be the last option. Tap on this

71

72 72. The language setting will be the first option on the next screen.

45

The importance of planning your application. One of my own applications, Quick Facts – Weapons, is essentially a large reference source for different types of guns. The application consists of details of 628 different weapons. The only problem with it is that I never planned out the application properly before making it.

46

The advantages of resource files. Consider the page related to the AK-47 below. Each weapon has the same variables down the left-hand side, Type, Origin, Designer, etc. Originally these were just text written into TextBlock’s. But what would happen if I had spelt Origin wrong? I would have to change it on 628 different pages. To that end I created an AppResources.resx file, only for the default English language and stored all these variables in there. I then had to reference these, on all 628 pages. If I had planned properly I would have done this in the beginning. Now if I encounter a spelling error I only need to change this in one place, the AppResources.resx file.

I then added AppResource files for most of the languages supported by the Windows Phone 7. 47

Exercises Now that you have done the hard work I want you to localise your application to the following languages: Danish (da) French (fr) Hungarian (hu) Malay (ms) Portuguese (pt) Swedish (sv)

TIP:

Dutch (nl) German (de) Indonesian (id) Norwegian (nb) Russian (ru)

Finnish (fi) Greek (el) Italian (it) Polish (pl) Spanish (es)

You will only need to follow steps 35-43 and 49-57.

Resources List of supported languages http://msdn.microsoft.com/en-us/library/hh487168(v=vs.92).aspx Download Windows Phone 7 SDK http://create.msdn.com/en-us/home/getting_started Marketplace for submitting your applications http://create.msdn.com/en-US Tutorials and sample projects http://create.msdn.com/en-US/education/catalog/ Development quick start tutorials http://create.msdn.com/en-us/education/quickstarts

If you have any questions about what I’ve been teaching you today, feel free to eMail me (Tadhg O’Flaherty) at [email protected] 48

Buttons and Navigation In this short additional tutorial we will add a new page to your app and a button in order to navigate to this new page.

1.

To add a Button, drag it from the Toolbox into your page view.

In the .xmal window the code for a button is:

Content="Button"

This is the text of the button and you can change this to anything.

Name="button1"

This is a reference for the button and is very important. You can change this if you like. This reference MUST be unique. Having two buttons on a page that both reference “button1” will result in an error.

1

In order for the button to function it must be told what to do if the user taps (clicks) on it. Change the above .xaml line to: Click="button1_Click"

This is a unique identifier that is required when we create a button click event in the “Code Behind”.

1

2.

Expand and open MainPage.xaml.cs This file is known as “Code Behind” and is used for hard-coding on a Windows Phone Silverlight app.

3.

Add the button click event code.

2

3

This is the unique identifier for this event. This is the name of the new page that we will navigate to.

NOTE:

The “/” at the beginning of the page name is vital, as it tells the click event that the page will be located in the main folder with all the other pages.

2

4.

To create our new page, right-click on myApp in Solution Explorer and Add > New Item.

4

5.

On the Add New Item window select Windows Phone Portrait Page and name the file newPage.xaml This name MUST be identical to the name given in the button event above.

5

3

6.

On the new page, delete MY APPLICATION and change page name to NEW PAGE. This is so we can easily identify that we have successfully navigated to our newly created page.

6

7

7. Run the app in the emulator and tap the button.

You have just added a button to your application.

Exercises Now that you have added a button, add one to the new page that will navigate back to the main page. TIP:

Copy and Paste is your friend!!!

If you have any questions about what I’ve been teaching you today, feel free to eMail me (Tadhg O’Flaherty) at [email protected] 4