Creating Windows Phone 7 Application

Fire up Visual Studio 2010, create a new project, select Silverlight for Windows Phone from the left tab and select the first template i.e. Windows Phone Application; give a name to the solution and click ok.

This would create a solution for Windows Phone 7 application.

About the Entities

We would add basic entities to the application, such as Category and QA.

Category holds CategoryName as the primary property. However you could add an ImageUri property which would take the path of the illustrative image of the category.

QA is the 2nd entity in our application, which was Question, Options (A-D), Answer and the CategoryName.

Designing the Application

The application should be simple enough to understand. The first thing we need to display is the list of Categories.

You could display in two ways:

• Using a List Picker control
• Using a ListBox with RadioButton as the data template.

To use ListPicker you need to add the Microsoft.Phone.Controls.Toolkit.dll to the application, which contains the control.

In our application I have used the 2nd option i.e. ListBox.

Let's open the Solution in Expression Blend 4, open the MainPage.xaml.

As you see above we have changed the Titlepanel as the Title of the application and the current view of the application.

We would create a UserControl named "CategoryUC"; this would be our first view where user could select the category.

As we discussed earlier that we are going to use ListBox to display all the categories, let's customize the ListBox in it.

The data template of the listbox would contain a RadioButton so let's add it.

Now that we have added the style for the ListBoxItem.

Let's create some sample data for Categories. For the purpose of sampling this data would be used, you could bind to real data through service or if you have xml data you could do that too.

Let's create a static class which would have a method that return an ObservableCollection of Category.

We would feed data to the ListBox in the following manner.

Let's create another UserControl named "TestUC" which would contain the list of question and options.

For this usercontrol's design I have used a Pivot control to the usercontrol, and the PivotItems would be loaded dynamically. As you know Pivot is a ItemsControl it could contain the collection of PivotItems.

Now we would create another UserControl named as "PivotUC", as the name suggests it would be the PivotItem of the Pivot control.

As you see from the above image display, we have a TextBlock for displaying the Question and the 4 RadioButtons for the options. The design would look like following.

To bind data we need to go the xaml behind and the following xaml display would explain you about the binding.

As you see from the binding above, we have the Answer bound to the Tag property of the RadioButton, this approach is taken so that whenever user clicks on the RadioButton the particular option with the correct answer would be checked at the same time. The following Click event would help you understand.

As our sample application is UserControl driven we need to load the UserControls on demand, to do that I have included MVVMLightSwitch.

The above dll has Messenger, which would enable us to load usercontrols on demand.

Let's implement this in MainPage.xaml.cs

And for loading the CategoryUC as our first screen we need to add the UserControl in the constructor of the MainPage.xaml.cs

When we press "go to test" the button click would call the Messenger.Send method to load the TestUC.

The calling goes like this.

I am using the delimiter # o avoid some kind of confusion.

If you run the application now, you would see the categories are listed as RadioButton List.

If you don't select any category the MessageBox would popup to inform you.

In the Messenger we would write another check for the TestUC to load.

As you see above, we are sending the Category Name as a parameter to the constructor of the UserControl.

As you see above, we have the constructor of the TestUC UserControl, we are first filtering data out of the collection based on the category selection.

Then we are adding PivotItems which would have the PivotUC to the Pivot control which would display all questions.

The integer count is taken so that the Questions are numbered Q1, Q2 ...

Now let's run the application again and see the flow.

As you see in above image, I have selected Animals as the Category and we would click on "go to test", which would load the TestUC as follows.

In the above image you could see that, we have loaded the questions related to animals, and the questions are now part of the pivot.

Also, you notice that I have a "submit test" button, let's say user wants to submit the test, then what; we would display the summary of the test as correct, incorrect and unattended.

So let's create another grid in the TestUC, which would be collapsed by default, on click of the "submit test" only it should be visible.

As you see in the above image, we have a MesasgeGrid, which contains the TextBlocks for dispaying the appropriate result.

On submit test click we would do the following.

As you see above, we are taking all the Items from the Pivot control and then converting the item as PivotItem and then it's content as the PivotUC UserControl. If you recollect; we are having a property isAnsweredCorrect in the PivotUC usercontrol. So we are checking it and based on that we are incrementing the integer values (correct, incorrect and unanswered).

So let's run the application again to test the summary page.

As you see above, we are displaying the result based on the user's activity. On click of ok, we would reload the category selection page to enable the user to appear the test again.

Conclusion

We have seen a very basic test application, further you could add some services to upload the points earned for each test. Also I have added the custom button style, which I have not discussed in article; you could check that in the app.xaml, which is very basic.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 13 articles on DotNetSlackers. View other articles or the complete profile here.