Universal App Tutorials Part 14 : Settings Page

Applications generally have a settings page, or similar allowing the user to configure the application.   We laid the groundwork for making the Translation Direction setting configurable in the previous post, let’s look at putting that in to practice.

Outcome

By the end of this tutorial we’ll have a really basic Settings Page, 2 Buttons allowing the user to pick between Morse to Alphabet and Alphabet to Morse, and a TextBlock displaying the current Translation Direction.

Prerequisites

Implementation

Baseline

We will need to create a SettingsPage and a SettingsViewModel, create an empty View and an empty ViewModel in the same way as we created our About Page.  Don’t forget to add reference to our new Page to the ViewModelLocator for the ViewModel instance, and the Navigation Service Configuration.

Let’s also add a navigation command to the MainPage so that we can access the new Page.

ViewModel

What do we want on our ViewModel?  We’ll need a:

  • constructor to inject our Settings Service;
  • an instance of our IMorseCoderSettings;
  • current TranslationDirection property for DataBinding;
  • current TranslationDirection field;
  • MorseToAlphabet TranslationDirection Command;
  • AlphabetToMorse TranslationDirection Command.

Let’s add these in…

public class SettingsViewModel : ViewModelBase
{
private IMorseCoderSettings _morseCoderSettings;

private TranslationDirection _currentTranslationDirection;

public TranslationDirection CurrentTranslationDirection
{
get
{
return _currentTranslationDirection;
}
set
{
Set(() => CurrentTranslationDirection, ref _currentTranslationDirection, value);
}
}

public SettingsViewModel(IMorseCoderSettings morseCoderSettings)
{
_morseCoderSettings = morseCoderSettings;

_currentTranslationDirection = morseCoderSettings.Direction;

MorseToAlphabetCommand = new RelayCommand(MorseToAlphabetCommandAction);
AlphabetToMorseCommand = new RelayCommand(AlphabetToMorseCommandAction);
}

public RelayCommand MorseToAlphabetCommand { get; private set; }

private void MorseToAlphabetCommandAction()
{

}

public RelayCommand AlphabetToMorseCommand { get; private set; }

private void AlphabetToMorseCommandAction()
{

}
}

This should look very familiar, note the constructor setting the initial state of the TranslationDirection field.

Let’s flesh out our commands, what should they be doing?

  • Setting the CurrentTranslationDirection;
  • Updating the Settings.

Let’s keep our ViewModel DRY, let’s create a new private method to help us out.

public RelayCommand MorseToAlphabetCommand { get; private set; }

private void MorseToAlphabetCommandAction()
{
SetTranslationDirection(TranslationDirection.MorseToAlphabet);
}

public RelayCommand AlphabetToMorseCommand { get; private set; }

private void AlphabetToMorseCommandAction()
{
SetTranslationDirection(TranslationDirection.AlphabetToMorse);
}

private void SetTranslationDirection(TranslationDirection translationDirection)
{
_morseCoderSettings.Direction = translationDirection;

CurrentTranslationDirection = _morseCoderSettings.Direction;
}

Note the pattern of saving the Direction to the Settings Service, then reading it back out to then use it.  It’s more effort to do this, but it’s often a good practice to ensure that what we are saving to settings is then being returned to the user.

Our ViewModel now let’s us update the Current Translation Direction in the ViewModel and in the Settings Service.  Let’s look at the View.

View

As mentioned, we’re looking for a really simple view, it should have:

  • a Button control to set the Translation Direction to MorseToAlphabet;
  • a Button control to set the Translation Direction to AlphabetToMorse;
  • a Converter Page Resource;
  • a TextBlock displaying the Current Translation Direction.

Let’s add those:

<Page.Resources>
<converters:TranslationDirectionToDisplayConverter x:Key="TranslationDirectionToDisplayConverter"/>
</Page.Resources>
<TextBlock Text="{Binding CurrentTranslationDirection, Converter={StaticResource TranslationDirectionToDisplayConverter}}" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="2" />
<Button Content="Morse To Alphabet" Command="{Binding MorseToAlphabetCommand}" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="30"/>
<Button Content="Alphabet To Morse" Command="{Binding AlphabetToMorseCommand}" Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="30"/>

Note the specification of the Converter in the DataBinding of the TextBlock to convert between the TranslationDirection enum and the associated Display String.

MorseCoderSettingsPage.png
Morse Coder Settings Page

We can now set our Translation Direction.

Summary

Where are we?

  • We created a Settings Page backed by a Settings View Model;
  • We made our Translation Direction configurable;
  • We used our Value Converter to display our Translation Direction as a string on the View.

We’ll look at:

  • MVVM Light Messaging;
  • methods of serialising POCOs to Application Settings.

One thought on “Universal App Tutorials Part 14 : Settings Page”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s