MVVM binding a ListView to an Enum with translation

Sometimes we need to visualize a list of enum values to the user, so he can make a
selection and if possible we would like to make this reusable for any enum used in our app.

But there are some problems when we would try to get this done… Enums are great for storing some kind of selection, but they are not easy to use in an MVVM list binding scenario! Certainly not if they need to be presented in a readable manner nor while different languages are supported.

But there is a way to get this done! Let me show you a solution while using a Windows Phone 8.1 store app, but the code will also work in Windows 8 store app and most of it will also run in a Windows Phone Silverlight app.

The enum we will be using…

The setup of this example is simple, we have a page with a ListView that’s bound to an enum in our ViewModel.

You’ll notice that the ItemSource is not binding to some collection! It’s the actual type of the enum and through the user of a converter we will return the needed display values. We are also showing the selected value inside a textblock, to show you that we are really getting an enum value!

In our ViewModel we have following properties.

The actual enum will be returned through the SelectionType property and the return type is System.Type. Also when the ListView has a selected index change, you’ll see that we’re using that current selected index to determine what enum value was actually chosen and we set that to the SelectedValue property.

So how do you initialize this, just by getting the type of your enum! In this example we init it in our constructor.

Now a ListView can’t do anything with an enum type, so we need to convert this in our EnumTypeToListConverter. The actual convert part looks like this.

We get the enum type as value parameter and use this to get all values of the given type through use of the general Enum.GetValues method. With this we have all values that the given enum has, but these aren’t yet usable to present inside the app! To fix this, we use a resource loader to get a nice display value for each enum value from the current loaded language resource! Finally we convert this to a list and return it to the ListView.

For this all to work you’ll need to add some resource files for each language you are going to support and inside each resource file you’ll need to add a display value for each enum value.

In our case we are using following format [enum type name]_[enum value]. So for our gender enum this gives following resource entries. For adding these resources, take a look at this good explanation here…

image

With all this in place you’ll get following result

 

As always a complete working version can be found on my github here…

Use Bing Maps SetView method with MVVM – Windows Phone 7

Well when you are developing on the Windows Phone and are trying to use MVVM, you’ll notice not everything is ‘real’ MVVMable 🙂
You’ll notice it mostly when you are using controls that don’t have much bindable items… so sometimes you’ll loose control of the View – ViewModel link.

An example I came across, where I was stuck with using the normal MVVM way, was when I added some pushpins on a Bing Maps control and wanted to adjust the view of the Bing Maps so that it would show all pushpins just added!
There is a real nice method on the Bing Maps called SetView()! It accepts a LocationRect as parameter and you can create such a LocationRect from a IEnumerable list of Geocoördinates. In other words if you have the PushPin collection, you can pass this along and the Bing Map will zoom and center to an appropriate size / place to show all pushpins in the given collection.

But the bad part, the SetView is a method and there is no bindable property on the map to use to control this. So you are a bit stuck when you only want to use the MVVM pattern.

So how to solve this, well it’s actually very easy 😉
When you are using the MVVMLight Toolkit from Laurent Bugnion, you can use the Messaging feature for this!

So what do you need to do.
First create a class inside the Model folder ( or in the root of the project ) called PushPinModel and add a List<Geocoordinate> GeoCoordinateList property inside of it.
Then assuming you have a MainPage View, add following in the constructor of this MainPage.xaml.cs
Messenger.Default.Register<PushPinModel>(this, action => this.SetView(action));

Also add following private method inside the MainPage.xaml.cs, this method will be called each time the listener receives a message!

private void SetView(PushPinModel pushpinModel)
{
if (pushpinModel.GeoCoordinateList.Count > 0)
{
this.PointMap.SetView(LocationRect.CreateLocationRect(pushpinModel.GeoCoordinateList));
};
}

Now the only thing left to do is fill up this Geocoordinate list in the ViewModel and send out a message to the listeners!

PushPinModel pm = new PushPinModel();
pm.GeoCoordinateList.Add(new GeoCoordinate(51.10524, 4.54229));
pm.GeoCoordinateList.Add(new GeoCoordinate(51.3411, 3.2398));

Messenger.Default.Send<PushPinModel>(pm);

For a detailed example just download changeset 62756 from my WP7 codeplex project wp7cycling.codeplex.com

Windows Phone 7 development

Well my current cellphone is a new HTC smartphone with the Window Phone 7 OS! It’s the HTC Trophy and I have to say the OS and the device are just brilliant.
But to be honest, the fact that you can just code .Net apps for it, made it a winner in my books.

So let me introduce you in the Windows Phone 7 development area.
Here are some of my current findings with it.

The first thing to know is that when you are developing it will be in a WPF/Silverlight environment, so be sure to get the hang of XAML or even better, get your Expression Blend skills up to date.

Secondly, the best way to create good, manageable code, is by using the MVVM pattern. The fact that this pattern is not only restricted to the Windows Phone 7 environment makes it beneficial to learn it for other projects. MVVM is based on viewmodel property binding for your view data.
Now to get a good start with MVVM, you better use a framework that integrates well with the Windows Phone 7. My personal favourite is MVVM Light Toolkit from Laurent Bugnion!
Get the details here: http://www.galasoft.ch/mvvm/getstarted/ and here: http://mvvmlight.codeplex.com/.

The only drawback in my mind, is the fact that currently you are by default limited in possible api uses from the Phone itself. In other words, some of the nice controls or features used on the default up front installed phone apps are not available to the developers. So another good thing to know is what frameworks/libraries are out there to overcome this…

My current list of libraries are
* Silverlight for windows phone toolkit: http://silverlight.codeplex.com/
* Coding4Fun windows phone toolkit: http://coding4fun.codeplex.com/
* WP7 Contrib framework: http://wp7contrib.codeplex.com/ ( this is actually already a superset of other libraries with custom additions )

When you add these to your Windows Phone 7 tool set, you’ll get plenty of controls and helpers that are needed when you start developing.

To show of some of the features of these frameworks I started a CodePlex project, called WP7Cycling! http://wp7cycling.codeplex.com/
The main reason for this project is just for myself to get to know the development environment, but it will also benefit other developers in showing what can be done in combination with the given toolkits!
For now it doesn’t have any downloads, so just grab the source code to get the complete project if you want to see it running in the emulator: http://wp7cycling.codeplex.com/SourceControl/list/changesets

Currently I created a simple MainPage with an integrated Bing Maps control and when you press the Get current location button on the appbar, the map will center itself on the current GPS coordinate location of the phone.

Have fun coding and any tips or tricks are always welcome 🙂