iPhone to Windows Phone 7 Application Preference Migration Part 2

Create Settings Page

Stop the application and right click on the ReadingPoetry project in Solution Explorer and click Add followed by New Item and select Windows Phone Portrait Page and change its name to "Settings.xaml". Settings.xaml should open up in Visual Studio.

Follow the above procedure to update the ApplicationTitle TextBlock to "SETTINGS" and PageTitle TextBlock to "reading poetry."

We will now migrate iPhone application preferences to our Windows Phone 7 application. We will use a check box instead of the toggle switch used for Night Mode. On the other hand, we will use radio buttons instead of multi-value control for font size.

Use TextBlock, CheckBox and RadioButtons to create the user interface for the settings page. The XAML should look like the following:

Now we will hook up the new page with the settings icon.

Go back to MainPage.xaml and in the ApplicationBarIconButton tag and type space at the end and select Click and type return at which time Visual Studio will offer to create a New Event Handler.

Select New Event Handler and it will create ApplicationBarIconButton_click event handler in the code behind. Your XAML for ApplicationBarIconButton should look like this

Right click on XAMLand select View Code which will open MainPage.xaml.cs file which should include a method ApplicationBarIconButton_Click. Add the following code so that your method look like this:

Hit F5 again to run the application. If you click on the settings icon, it will open the settings page as shown below. You can click on the settings but nothing will happen which is expected as we do not have code to save or retrieve settings.

Saving and Retrieving Application Settings

Right click on ReadingPoetry project in Solution Explorer and select Add followed by Class. In the add new item dialog, type AppSettings.cs as the name of the class.

Declare IsolatedStorageSettings as shown below and initialize it in the class constructor as shown below.

 

 

 

 

 

In the read routine, we will get the value from the isolateStoreSettings dictionary using our key

Finally, the save routine will save the settings to the persistent store.

With these routines in place, we will write two properties to save and retrieve our NightModeSettings and FontSizeSettings as shown below.

With this, we have the plumbing for retrieving and persisting preferences.

Saving the Settings

Open Settings.xaml.cs file using Solution Explorer and edit the Settings class constructor to create appSettings instance.

When the user navigates away from this page, by clicking back button, OnNavigatedFrom event is fired. In this event handler, we will save the user selections to our application settings.

Similarly when the user navigates to this page, by clicking settings icon, OnNavigatedTo event is fired. In this event handler, we will initialize the UI controls based on the application settings.

Using Application Preferences

Whenever the application main page is loaded, we will use the settings to update the font size and colors of the application.

Open MainPage.xaml and associate a new event handler for page load to the main PhoneApplicationPage. Type space in the Phone:PhoneApplicationPage node and select Loaded. Select <New Event Handler> which will added the following XAML at the end of Phone:PhoneApplicationPage node and also create a placeholder method in the MainPage class.

Just like before, declare AppSettings instance in the MainPage class and instantiate it in the class constructor as shown below.

Write the following utility methods and properties in the class. The first method returns a SolidColorBrush from hex values. The other two properties create and return dark and light brushes that will be used to paint the background and foreground.

The following routine returns the size of font based on the FontSize application setting.

Finally, we will update the font size and the application colors based on the settings. This event handler gets called when the page is loaded which happens when the application is loaded the first time or when we navigate from the settings page.

 

 

Now hit F5 to see the application react to application settings. Here is the behavior with small fonts and day mode.

On the other hand, if you select the night mode and large fonts, it should look like this.

Conclusions

In contrast to iPhone, Windows Phone 7 requires that the application settings be managed within the application itself. This provides a consistent experience across all third party applications. It also provides an ease of use as the user can change preferences without leaving the application.

While the two platforms differ in their presentation, both platforms use similar mechanism for managing the preferences. They use dictionaries to save preferences as key-value pairs. While iPhone uses application specific file store for persistence, Windows Phone 7 uses IsolatedStorage class to persist preferences in protected storage.

Windows Phone 7 platform provides necessary widgets that closely correspond to widgets used for iPhone application preferences. It is possible to migrate the application preferences from iPhone to Windows Phone 7.