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

Telenet telemeter for Windows Phone 7

Well, maybe you noticed when reading my last post… I’ve been busy developing for my Windows Phone 7!
The best way for me to learn a new environment is to try out some real scenario. This way I have a good focus on what I’m trying to do/learn.
So also when I started with WP7 development, I had an idea I wanted to work out and that idea was to create a Telemeter ( Telenet bandwidth usage tool ) for the Windows Phone.

At first, it was not easy to get this thing going… Everything was actually new for me! XAML, MVVM, Silverlight controls many different things!
But in the end, I’m glad I did take a look at this platform, because I think it has lot of potential!

So for the app itself, I just got notice today it passed Microsoft certification, so I guess it will be downloadable soon from the Marktplace.
When you start up the app for the first time, you’ll need to enter your Telenet credentials ( the actual first account given, not aliases you created yourself afterwards ) in the settings screen.
After that, you’ll be able to refresh the data graph available on the main screen… when everything goes well ( sometimes the Telenet service is not available ), you’ll get a nice looking graph with all the bandwidth details of each day.
But an image says more than words, so here is a preview of the app itself.

[Update] It’s downloadable 🙂 http://www.appsfuze.com/applications/windowsphone.tools/wp7telemeter,9329

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 🙂