Morse Coder Part 3 : Data Binding with MVVM Light in Universal Apps

Data Binding can be used to dynamically bind information from a set of objects (View Model) to controls on a page (View). Following from the previous post, Morse Coder Part 2, we will be adding some flesh to the User Interface to take input from the user, process, in our case ‘translate’, and return output back to the user via our ViewModel.

Outcome

By the end of this post we should have a basic, but functional User Interface, taking a sentence from the user via a TextBox, and returning a Morse translation via a TextBlock. We’ll also start to consider Background Colour bindings. As before, this will cover both Windows 8.1. and Windows Phone.

Prerequisites

Implementation

The intention is that the app will convert both between alphabet and morse and vice versa, in order to make it clear which way the user is currently translating we will make the Background Colour derivative of this. We can use DataBinding to achieve this.

Considerations:

  • A Public Brush Property to bind;
  • A Private Field to back our Property;
  • Raise a Property Changed Event.

With this in mind we’ll need to add the following to our MainViewModel class :


private Brush _backgroundBrush;

...

public Brush BackgroundBrush
{
get
{
return _backgroundBrush;
}

set
{
Set(() => BackgroundBrush, ref _backgroundBrush, value);
}
}

We can now bind our newly created BackgroundBrush property from our View by setting the Background Property of our Grid :

[xml][/xml]

Now we can set the BackgroundBrush in the constructor of our MainViewModel to whatever we want, for example :

BackgroundBrush = new SolidColorBrush(Colors.Green);

We can set this to a different colour depending on whether we are in design mode or not, similar logic could be applied to differentiate between direction of translation, this will be covered when we add the second translation direction.

Now let’s look at the real logic behind the application. Let’s start with the obvious, what does it actually need to do:

  1. Take text based input from the user;
  2. Translate user’s input;
  3. Return translated output to the user.

How can we achieve this?

  1. We’ll need to add a TextBox control to our view.
  2. This is where it get’s interesting…
    As above, we’ll need to create a Public Property and a Private Field to store the input. Keep it simple, call it Input for now.
    We can now bind this to our TextBox control:[csharp]Text=”{Binding Input, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}”[/csharp]

    Note: we’ve bound to Input, specified the mode as TwoWay, meaning that we want our ViewModel to update our View AND our View to update our ViewModel, and set the UpdateSourceTrigger as PropertyChanged, meaning that our ViewModel will be notified on each letter as opposed to, for example, on loss of focus.
    Our user’s input is now available in our View Model for translation, we can wire it up to the previously created Translation Property.

  3. When our Input changes we want to translate and update our User Interface, we can use the ‘setter’ of our Input property to achieve this.
    By including the following line we can set our Translation Property with a translation of what has been provided through the binding, our Input property should now look something like this:
public string Input
{
get
{
return _input;
}
set
{
Translation = _translator.Translate(value);
Set(() => Input, ref _input, value);
}
}

So at design time we have (with a little design time constructor embellishment)…

Design Time Input Red Background
Design Time Input

…and at run time, using a sample sentence containing all of the letters in the alphabet we have…

Run Time Input Green Background
Run Time Input

Summary

Where are we?

  • We’ve got a functional translation mechanism, we can take input, translate it via the ViewModel and DataBinding, and output back to a TextBlock through other data bound Properties;
  • We can change background colours via our View Model.

Where are we heading?

  • We still only have one way translation, so we need to add our second translation direction;
  • We will make use of dependency injection to resolve some design time services; we’ll need to store our translations and application settings somewhere, so we’ll be creating some services and some design time ‘stubs’;
  • Write a few unit tests to ensure that our translations are actually working.

One thought on “Morse Coder Part 3 : Data Binding with MVVM Light in Universal Apps”

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