MVVM

Impressions, slides and code from TechDays Belgium and Netherlands

Laurent Bugnion — Sun, 19 Feb 2012 22:30:25 GMT

Update: Posted the video of “MVVM Applied” below.

This week I was “on tour” in Belgium and Netherlands and presented 3 times:

“MVVM Applied, From Silverlight to Windows Phone to Windows 8”

(in Belgium and Netherlands)

The goal of this session was to make people feel confident that the skills they acquired working in various XAML frameworks (Silverlight, Windows Phone, WPF, Surface, etc) are going to help them tremendously when developing Windows 8 applications. It was a session packed with code, where we went from a Silverlight 5 application, added design time experience, reworked the design in Expression Blend, then created an application reusing most of the code in Windows Phone (including design time experience in Blend), and then created a WinRT application which, again, reused most of the code (including design time experience in the Visual Studio Designer). Of course the sample code uses the MVVM Light Toolkit in order to make the coding easier, and to maximize code reuse.

I also showed techniques to keep as much compatible code as possible between the frameworks, and abstract the differences. For instance, Windows 8 is more asynchronous than Silverlight (which was already more asynchronous than WPF, remember the discussions around the lack of synchronous web requests in Silverlight?). In Windows 8, operations such as file system access and stream access (read/write) are asynchronous now. Using techniques such as callbacks, you can quite easily isolate the code that is Windows 8-specific, and call into it from shared code (more about this technique in a following blog post). It was an interesting session that gathered quite a lot of positive feedback.

You can download the following from Skydrive:

Start solution (PictureUploader-0-Start, running Silverlight 5 application, without design time data)
Silverlight 5 (PictureUploader-1-SL5) design time data complete
Windows Phone 7 (PictureUploader-2-WP7) application complete
Windows 8 (PictureUploader-3-Win8) application complete
Code snippets for VS10 (Snippets.vssettings, Silverlight 5 and Windows Phone)
Code snippets for VS11 (SnippetsWin8.vssetings, Windows 8)
Slides (MVVMApplied)

To import the code snippets in Visual Studio’s toolbox, select the menu Tools, Import and Export Settings, and select the snippets file. This will import the snippets into your toolbox. Note that if you had snippets in your toolbox before, it will add the new ones instead of overwriting the old ones.

Note about the Windows 8 sample: For some reason the sample refuses to start if you include the GalaSoft.MvvmLight.Extras DLL for Windows 8. It does however run just fine if you include the project instead. For that reason, I included a copy of that project’s source code and referenced it directly. Given the current state of Windows RT (developer preview), I won’t even waste any time looking for a fix. We’ll see about that in the Consumer preview ;)

The video of this talk, also available at Channel 9

“100 Fidelity: From comps to apps, tips and tricks for XAML integration”

(in Netherlands only)

The purpose of this session was to show the audience usage of various tools (of course mainly Expression Blend) to create user experience that is as close from the designers’ vision as possible. Nowadays with XAML and Blend, it is possible to reach 100% fidelity. I also talked about the integrator role, a role that we fully embrace at IdentityMine. The integrator’s main tool is Blend, and Blend is used to integrate the design assets into the application. We talked about and demoed the features that make Blend truly shine, such a gradient creation, resource management, animations, etc.

Even though this session was in the graveyard shift (Friday afternoon, 4PM), I was positively surprised to see quite a few people attending. Also, when asked who in the audience is a designer, I saw approximately 10 hands raising, which is more than usual. Are we seeing more interest from designers in Blend due to Metro? One can only wish so!

You can download the following from Skydrive:

Slides (100%Fidelity)

There is no source code for this session, because most of the demos were about creating and integrating assets in Blend. Refer to the video for more details.

Screenshots

These screenshots are taken from the “MVVM Applied” session

Silverlight 5 application with a beginning of styling

Windows Phone application start screen

Windows Phone application during upload

Windows Phone application, upload completed

Windows 8 application, start screen with application bar

Windows 8 picture picker

Windows 8 application during upload

A few impressions

The room where I presented MVVM Applied in Netherlands

They had my book (and Brennon’s) at the conference bookstore :)

A cool clownfish

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Solving the ObservableCollection bug on Windows 8

Laurent Bugnion — Sun, 19 Feb 2012 17:11:24 GMT

If you tried to build applications for Windows 8 with XAML/C#, you may have noticed an annoying issue: If you have a list controls (for example a GridView) and you bind the ItemsSource property to a property of type ObservableCollection<Something> on your ViewModel, the GridView is not updated when the collection’s content changes. The CollectionChanged event is raised properly, but it is not honored by the binding system.

Thankfully, this is a temporary bug, and it should be solved in the Consumer Preview version of Windows 8, due for release end of February. In the meantime, however, it is easy to circumvent this bug.

To find a solution, I researched the web and found a class named ObservableVector, for which changes are honored by the binding system. However this class had a major flaw: it forces the original ObservableCollection to be <object> instead of being strongly typed. This is of course super annoying when you are trying to share code with Silverlight/WPF/Windows Phone. So I took a good look at it, and I came up with what I think is a better implementation.

Download the improved ObservableVector class from here.

With this implementation, the original ObservableCollection can remain untouched. For instance, if you have this in the original, shared MainViewModel.cs file:

public partial class MainViewModel : ViewModelBase
{
    public ObservableCollection<UploadFileInfoViewModel> Files
    {
        get;
        set;
    }

    // ...
}

Notice that the MainViewModel class is partial. This allows easily adding the following code only into the Win8 project, into another file added only to the Win8 project, named MainViewModel.Win8.cs:

public partial class MainViewModel
{
    private ObservableVector<object, UploadFileInfoViewModel> _filesWin8;
    public ObservableVector<object, UploadFileInfoViewModel> FilesWin8
    {
        get
        {
            if (_filesWin8 == null)
            {
                Files.CollectionChanged += (s, e) =>
                {
                    if (e.NewItems != null)
                    {
                        foreach (var file in e.NewItems)
                        {
                            FilesWin8.Add(file);
                        }
                    }

                    if (e.OldItems != null)
                    {
                        foreach (var file in e.OldItems)
                        {
                            FilesWin8.Remove(file);
                        }
                    }
                };

                _filesWin8 = Files.ToObservableVector<object, UploadFileInfoViewModel>();
            }

            return _filesWin8;
        }
    }
}

This adds a new property to the MainViewModel class, which observes the old property’s CollectionChanged event. This way, by binding the GridView’s ItemsSource property to FilesWin8 instead of Files, your UI will react properly to the event.

Hopefully this little trick will help the readers while waiting for the Consumer Preview!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Screenshots of my #mvvm demo at #techdaysbe

Laurent Bugnion — Wed, 15 Feb 2012 22:52:35 GMT

Today I gave a talk in TechDays in Belgium about MVVM in Silverlight 5, Windows Phone 7 and Windows 8. This was the first time I gave that particular talk, and in addition keep in mind this is a developer preview, meaning that it is not finished, and not always stable.

I had a few surprises with this build. For example from time to time, the new “Metro style applications” just cannot be launched anymore. Nothing that a simple reboot cannot fix… but I’ll come back to that in a moment.

A couple of hours before my session started, I was notified by Windows 8 that it wanted to install updates. I even joked about it on Twitter. No way was I going to install updates just before a talk! Everyone knows you shouldn’t do that, it can change your computer configuration and cause unexpected effects during the talk! Yeah I thought I was clever.

The presentation went well, but towards the end I wanted to run the application to show it to my audience. Unfortunately when I clicked the shortcut on the Start screen, nothing happened. I tried launching another Metro app and it also failed. I immediately thought it was the effect I mentioned before, where Metro apps stop working and you need to reboot. Turns out I was wrong. Of course the decision I had to take, with more than 100 people waiting for my next move, was tough. I decided to reboot. And yep, at that moment I had totally forgotten about the pending updates.

And this is what happened:

Damn well I have to say the audience was really nice and supportive. I took the occasion to take a few questions (THANK YOU to those who asked something and gave me the chance to fill that void with content!!)

What was the issue actually?

After reboot I tried again, and the same result happened: No Metro apps could be started. From the room, I got the suggestion that it was a resolution problem. And indeed: You cannot run Metro applications with less than 768 pixels vertical resolution. And because of the projector, I was running at 1280x720. So I thought OK, let’s try it, increased the resolution to 1280x768 and indeed I could start the Metro apps… but then the projector stopped showing the image!

That’s really a tough problem to solve, and I must say I am not quite sure yet how to make this work. Projectors nowadays are, for the most part, limited to 1024x768 resolution. If you want to go 16:9, you often get 1280x720. My tests after my session show that at 1024x768, Metro apps seem to run but I am not sure what will happen when I attach the projector again in my next session… I guess I will find out tomorrow

Screenshots

I thought I would take this occasion to show my excellent audience what I wanted to actually show them, and how the finished Metro application looks like. So here are some screenshots. First you will recognize the Silverlight 5 version of the uploader, then the Windows Phone one, and finally the Metro application. I will post the code and the presentation in the following few days, and the video of the presentation will follow shortly after the Windows 8 beta is released. I want to really thank everyone for their attention and support, and for the many kind words I received after my session.

Silverlight 5 version

Windows Phone initial screen

Windows Phone picture selection

Windows Phone during upload

Windows Phone upload completed

Windows 8 initial screen with Application Bar

Windows 8 Picture Picker

Windows 8 during upload

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Bug fix: WPF4 project template for #MVVMLight V3

Laurent Bugnion — Tue, 24 Jan 2012 23:40:09 GMT

Ironically, my last release of MVVM Light V3 was about fixing bugs in templates and making them better. In the process however, seems that I introduced a regression bug in the WPF4 project templates. Yep shit happens.

How do I know if I have the bug?

Check the Programs and Features control panel, and look for MVVM Light. If the “Version” column shows 3.0.2.19, you have the bug. If it shows anything higher, you don’t. For instance, the new version with the bug correction is 3.0.3.19. Also, any version 4.*.*.* does not have this bug.

Alternatively, simply try to create a new WPF4 MVVM Light application in Studio. If you see the following warning, you have the bug.

Upgrading

To fix the bug, simply download V3.0.3.19 from Codeplex and install. You don’t need to uninstall the previous version.

What’s next?

I am working hard on V4 and have some nice improvements coming up. Many people have asked me when the “beta” will come out of MVVM Light, and the answer is “soon”. In the coming few days, I will publish a temporary release that corrects a few memory leaks, notably in the Messenger and in the RelayCommand. This will give expert users time to test and report issues. Then I still have a couple of fixes and I will release a release candidate. I won’t add any new feature after the RC, but will merely fix bugs if people find some. Once the RC is deemed stable, I will release V4 and take a deep breath!

And yes, there will be a V5

Happy coding,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

New MVVM Light templates with bug fixes

Laurent Bugnion — Mon, 02 Jan 2012 20:13:28 GMT

The current version of MVVM Light had a couple of issues in the project templates. The most annoying one was causing a problem when creating new projects: The GUIDs used to uniquely identify the project were in fact not re-generated properly every time, and we ended up with the same GUID in every new project. The symptoms are the following: If you side-load an MVVM Light application, and then side-load another one, you will see that the first one is overwritten. Note however that this is only an issue when side-loading applications: The GUIDs are properly re-generated and overwritten by Microsoft during the app approval process.

This was not really an issue with WPF and Silverlight applications (which is why the bug was never found until now), however the Windows Phone uses these GUIDs to check if the application is already installed on the Windows Phone device or not.

I also took this occasion to update the templates with some information in the AssemblyInfo.cs, so that should make it even easier to fill the assembly information.

I just published a new MSI that corrects the issue. You can install the new MSI on top of the existing one. As usual, there is an MSI for MVVM Light V3 and one for MVVM Light V4 beta.

Fixing the issue in existing applications

If you encounter this issue in existing application, you can use the following steps to correct it. Note that I recommend you to follow these steps for every MVVM Light application.

Start the GUID generator installed with Visual Studio (open the Start menu and type GUID to find it).
In the GUID generator, select the Registry Format.
Press the New GUID button and then the Copy button.

Open the CSPROJ file in Notepad (or any text editor).
Locate the <ProjectGuid> attribute.
Select its content and paste the GUID you previously copied.

For Windows Phone projects only, in addition:

In the GUID generator, press the New GUID button and then the Copy button.
Open the file WMAppManifest.xml (in the Properties folder).
Find the ProductID attribute and replace its content with the GUID you previously copied.

Projects exposed to COM

Some project also have a GUID in the AssemblyInfo.cs. Open this file in Visual Studio or in Notepad and check if you can see a GUID there. If there is one, copy a new GUID from the GUID generator and replace the old one with the one you just copied. Be careful to remove the opening ‘{‘ and closing ‘}’.

That’s it

Apologies for this bug, and thanks to everyone who reported it and helped make MVVM Light better.

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light installers and Nuget (including Silverlight 5) #mvvmlight

Laurent Bugnion — Sun, 18 Dec 2011 21:10:12 GMT

I just pushed two big updates to MVVM Light setup components.

MSI installers with Silverlight 5 support

The MSI installers are available on Codeplex. The current version supports Silverlight 3, Silverlight 4, Silverlight 5 (new), WPF 3.5 SP1, WPF 4, Windows Phone 7.0 and Windows Phone 7.1. The installer for V3 is available, as well as the one for V4 beta.

NuGet support including Silverlight 5

I also pushed a new version of the NuGet packages which includes Silverlight 5. To install MVVM Light into an existing application with the help of the NuGet package manager in Visual Studio, check the instructions.

If you look for “mvvmlight” on NuGet, you will find four packages:

MVVM Light: The whole package, libraries + ViewModelLocator + MainViewModel. Installing this also modifies App.xaml to install the ViewModelLocator. This package is for V3 of MVVM Light!
MVVM Light libraries only: Installs only the DLLs and references them. This package is for V3 of MVVM Light!
MVVM Light [Preview]: This is the whole package too, but for V4 beta.
MVVM Light libraries only [Preview]: Just the DLLs, for V4 beta.

Update on V4’s availability

One of the most annoying issues in V3 is a memory leak that can appear in the Messenger component in certain circumstances. I will post details in due time, but there is indeed a risk that an instance is not garbage collected if it is registered with the Messenger with a non-static method, and if the developer omits to unregister the instance before deleting it.

Because of the promise of a “weak” registration, I really want to solve this issue. Currently, I am able to completely solve it in WPF, and to solve it in most cases in Silverlight (including Windows Phone). There is still one special case in Silverlight where a memory leak may remain, and I am currently working on handling this. I am not sure that there is a solution for this last scenario, but there are other alternatives that it is not a blocking issue anymore.

Once this fix is fully tested, I still have a few things I would like to add in V4. However I am also aware that we have been in beta (and alpha) for quite some time already, and it is very possible that I procrastinate some of these features into V5.

Happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light for Silverlight 5 is on Codeplex #mvvmlight

Laurent Bugnion — Sat, 10 Dec 2011 19:29:43 GMT

Here we go! After the Microsoft team released version 5 of Silverlight yesterday, MVVM Light is available for this version of the framework too. I did not create the installer yet (that will take a few more days), but you can download the source code and build it yourself easily.

With this latest release, this puts the number of supported frameworks to 8: .NET 3.5 SP1, .NET 4, Silverlight 3, Silverlight 4, Silverlight 5, Windows Phone 7.0, Windows Phone 7.1 and Windows 8 (preview).

Dropping Silverlight 3 and WP7.0?

That said, I am considering dropping old frameworks now for new development. So here is a chance to make yourself heard, tell me if you think that it is OK to drop Silverlight 3 and/or Windows Phone 7.0 and to concentrate on the 6 other supported frameworks:

Thanks and happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Silverlight 5 is released!

Laurent Bugnion — Fri, 09 Dec 2011 19:59:03 GMT

Microsoft just released the version 5 of Silverlight! It’s a great news and I really want to congratulate the whole team on this impressive collective effort. The official announcement is on the Silverlight team blog!

The purpose of this article is not to be exhaustive about the list of features (there have been, and will be, many more very detailed articles such as this series on the Silverlight blog) but rather to explain why this version in particular makes me happy to be a Silverlight developer (features listed in no particular order!).

3D!

One thing is making me really happy and excited: the 3D integration. It is now possible to include and manipulate 3D models within a Silverlight application. This model is very similar to what XNA offers, which means that existing XNA developers will feel at home very fast with this new platform. It also means that existing 3D models can quite easily be run in Silverlight 3D. I am sure we all have in mind the pretty amazing demo with Scott Gu’s avatar during the Silverlight 5 firestarter (jump to 51:11).

I am really happy to have 3D integration in Silverlight now, because I have been working for the past few weeks on a new application for Kinect for Windows involving a 3D human avatar integrated in a Windows Presentation Foundation. The integration is completely seamless, and it looks like the avatar is completely part of the rest of the application. However, the rest of the application is WPF, with all the XAML, binding and MVVM goodness that it brings. This kind of seamless integration is now also possible in Silverlight, and that opens the door to a lot of pretty cool applications and a new kind of user experience.

In-browser trusted applications

We all know (or heard of) the Out-Of-Browser (OOB) application model which allows Silverlight to run outside of a web browser, just like a Windows application in its own windows, with its own shortcut, etc. There is also an elevated trust model for OOB, declared at build time, which allows such applications to perform tasks that are usually not allowed (such as saving or reading files from certain locations on the computer, run in full-screen with full keyboard support (ideal for kiosk applications!), host HTML pages within the Silverlight application, etc.

These features were already available in Silverlight 4, however in Silverlight 5 they are also possible inside the web browser. This makes the delivery of such applications a little easier, since the user does not have to “install” them and deal with a shorcut.

Trickplay

This feature allows to play video at various speeds, and even includes pitch correction to avoid that the speaker sounds like a chipmunk! This is especially useful when watching conference sessions: watch a whole 60 minute session in 30 minutes, and use the rest of the hour to be with your family instead

Breakpoints in bindings

This one is pretty cool: Who has never had to debug a binding, because the binding expression had a typo, or the value was not what you expected? it was pretty cumbersome before! Well with Silverlight 5, you can set a breakpoint right in the XAML binding expression, and the debugger will break and allow you to inspect the expression!.

Performance, profiling

A lot of work has been put into performance too, and a new set of tools helps to profile the application and identify critical areas that need perf tuning.

Pinvoke

This is like COM on steroid: This allows your Silverlight application to access pretty much any of the Win32 APIs directly from within your app. There are even ways to listen to Win32 messages, for example to be notified when a new USB drive is inserted (this is only an example!). There is a good article on pinvoke by Alexandra Rusina (one of Silverlight’s PMs) here.

Note that pinvoke only works with elevated permissions, which really makes sense (I wouldn’t want any script kiddy to be able to format my hard drives without saying “OK” first)!!.

And more…

There are a lot of other improvements, notably useful when you use the MVVM pattern in Silverlight. For example, the ability to search for an Ancestor in a RelativeSource binding (something we had since the beginning in WPF, and because it was missing here led to some cruel workarounds in some applications in Silverlight…) is a good example of these apparently small changes, but that will mean a lot when you do need them.

With version 5, we have a super mature version of the framework!

What about Mac? What about other browsers? What about delays? What about Maryjo?

As usual it is interesting to witness the drama around the (perceived) delay in the delivery of this massive new version. It is important however to remember that there had not been any official announcement about a delivery date (the only thing we had heard was Scott Guthrie – who is not in charge of this product anymore by the way - talk about “end of November”). With a delivery in the first half of December, and considering that much time has been spent on last minute bugs, making this version as stable as can be, and (again) considering the massive additions to this new version, I say kudos to the team!

Edit: Maryjo felt insulted and I am a nice guy, so let me rework that paragraph a bit. Yeah I went too far and personal, so hopefully this is better.

Maryjo Foley, who seems to be reporting and speculating on a lot of bad news these days, reported that Mac OS would not be supported for Silverlight 5, and even worse that only Internet Explorer would be supported on Windows.

Side note: She actually reported that “One of my contacts said he believed that the final version of Silverlight 5 may only work with Internet Explorer on Windows and won’t work on Mac OS platforms or with other browsers at all. (Silverlight 4 supports Windows and Mac OS X and the IE, Chrome and Safari browsers.)”. Notice the lack of named reference, the “he believed” and the “may work”.

It’s a good example of why we should take this kind of “journalism” with a grain of salt. We are very rational people, fond of science and technology, and yet we seem sometimes to act like schoolgirls when someone writes something on the web. At this point, I think it is good to remember that Maryjo often reports hearsay and rumors. I don’t mean that she is always wrong, not at all, and in fact I do read her column with interest. But I always take it with a (large) grain of salt, and I remember that until a product is released, we don’t know what it will support. Everything else, really, is conjectures. A good thing to remember while Windows 8 is in preparation!

Side note again: It is very painful to insiders to read this kind of articles (if you can call it that) while we knew very well that it was completely wrong. Unfortunately, the non-disclosure agreement that binds us to Microsoft prevents us from correcting assertions like this, and we had to sit down and watch. This is very unfortunate and painful. I really hope that people learn, some day, to be reasonable when it comes to technology (but I am not holding my breath).

To be clear: the list of supported web browsers and operating systems did not change. It is available at http://www.microsoft.com/silverlight/what-is-silverlight/.

Some restrictions

There are a few restrictions around the 3D rendering, for security reasons. The best summary I found so far is on David Catuhe’s blog. Security restrictions are always annoying but the alternative is letting unsafe code run on the user’s computer, and we all know how Microsoft handled that in the past (ActiveX anyone?) so I guess that we need to accept that they err on the side of security this time. (Edit: updated on 12/10/2011).

Also, like previously, COM access does not work on Mac OSX and as I mentioned above, p/invoke is also only available on Windows. Both these features require elevated permissions by the way.

What about MVVM Light?

MVVM Light will of course support Silverlight 5, and I will release a version soon. I just need a little more time running my tests and making sure that everything is working as expected. Stay tuned to this blog for an announcement about the release of MVVM Light for Silverlight 5!

A few additional updates

Well there was a nice storm on Twitter, and within the noise I managed to grab a few useful facts.

First, the Blend preview for Silverlight 5 is available here. I did not verify that it works with Silverlight 5 RTM, but I think it should.

Then, Silverlight 5 will be supported until December 2021. That’s 10 years of support.

The offline documentation can also be downloaded.

Finally there was a lot of passionate discussions on Twitter tonight. I think it was especially interesting to confront the view of tech journalists versus MVPs vs developers. Bottom line is that there is a lot of passion around tech these days. I personally think it is too much passion, but some disagree and I think we will have to live with that for years to come…

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light template and WCF services (or any ASP.NET application for that matter)

Laurent Bugnion — Wed, 07 Dec 2011 21:36:33 GMT

I was recently made aware of a couple of people having issues with WCF services (or ASP.NET applications) when using the MVVM Light project template for Silverlight. There is a blog post and a StackOverflow question, so what exactly is happening there?

Well in fact it is pretty simple when you know how Silverlight connects to web services. Due to the security model of Silverlight, the application cannot connect to a web site if it is not originating of this very website. In laymen’s terms, it means that the application can only connect to a web server if it also comes from the same webserver. For example, if the Silverlight application is served by http://www.galasoft.com, it won’t be able to connect to, say, http://www.cnn.com without getting an exception. We talk about cross-domain access restrictions.

Of course there are ways around that, for instance a website can specifically give access to Silverlight applications through a configuration file.

In the case that concerns us, it is exactly what is happening. You see, the MVVM Light Silverlight project template creates a Silverlight application without an ASP.NET host. I didn’t add one because I didn’t want to complicate the template too much. And also, to be honest, because adding a web project is super easy, but of course only if you know how to do, and this is exactly what we will do here!

Creating the application

The steps to create the application and the WCF service are as follows:

Create the MVVM Light application using the MVVM Light project template for Silverlight.
Right click on the solution in the Solution Explorer and select "Add, New Project from the context menu.
From the WCF category, select a WCF Service Application and create it.
Build the application.
Right click on the MVVM Light project and select Add Service Reference from the context menu.
In the Add Service Reference dialog, click on Discover.
Make sure that the found service is the one you want to connect to, and click on OK.
In the MVVM Light application, open the file Model/DataService.cs and modify the code as follows:

public class DataService : IDataService
{
    public void GetData(Action<DataItem, Exception> callback)
    {
        var client = new ServiceReference1.Service1Client();
        client.GetDataCompleted += ClientGetDataCompleted;

        client.GetDataAsync(1234, callback);
    }

    void ClientGetDataCompleted(
        object sender, 
        ServiceReference1.GetDataCompletedEventArgs e)
    {
        var callback = e.UserState as Action<DataItem, Exception>;

        if (callback == null)
        {
            return;
        }

        if (e.Error != null)
        {
            callback(null, e.Error);
        }

        callback(new DataItem(e.Result), null);
    }
}

This code uses an asynchronous service call pattern where the callback (a reference to a method passed as Action by the caller) is saved in the service call. Then when the asychronous call returns (in the Completed event), the callback is retrieved from the UserState. If an error occurred, the callback can be used to pass this error to the caller. Otherwise, a new DataItem class is created and passed to the called.

Details about this pattern can be found in my talks Understanding the MVVM pattern and Deep Dive MVVM.

So why doesn’t it work?

If you run the application now (making sure that the MVVM Light project is selected as Startup Project), you will first see a warning dialog and then an exception. What happened?

What happened here is exactly the cross-domain issue I mentioned: The Silverlight application is not explicitly hosted into a web application, so Visual Studio is using an auto-generated HTML page instead, and running it from the embedded web server (“Cassini”). In fact, unless you explicitly specified otherwise, the test page is run in “file mode” instead of HTTP mode. The URI in the web browser window starts with C:\ for instance, instead of http://.

In those conditions, the access to the WCF service is (justly) denied, and you get a security exception.

Correcting the error

In order to correct the error, you can either add a cross-domain policy file to your WCF application, or host the Silverlight application in the same web project as the WCF service. Let’s do that now:

Right click on the WCF Service application in the Solution Explorer, and select Properties from the context menu.
On the left, select the Silverlight Applications tab.
Click on Add.
Select Use an existing Silverlight project in the solution and make sure that your MVVM Light application is selected in the combo box.
Make sure that Add a test page that references the control is checked, as well as Enable Silverlight debugging.
Press Add.

This creates two new files in your WCF Service application: One is suffixed TestPage.html and the other is suffixed TestPage.aspx. We typically don’t need the ASPX one so you can safely delete it.

Right click on the WCF Service application and select Set as StartUp Project from the context menu.
Right click about the HTML test page and select Set as Start Page from the context menu.

By doing this, we force Visual Studio to serve the HTML page and the Silverlight application from the same URL as the WCF Service, and to serve it as HTTP. This is possible because a WCF Service application is nothing else than an ASP.NET web server running WCF. So the same web server can deliver HTML, Silverlight and of course WCF.

If you run the application now, you will see the following result:

Note that the warning shown earlier will still appear, but it is really just a warning, and you can safely turn it off. Just remember the cross-domain restriction when you publish your Silverlight application to another web server!

Success, we hit the WCF service and returned with a valid result! In fact, you can verify by placing breakpoints in the DataService.GetData method on the client, and in the Service1.GetData method on the server. Then press F5 to run the application in Debug mode and notice how you can easily debug both the client and the server at the same time.

What about the opposite way?

It is also possible to add a new MVVM Light application to an existing WCF Service application with the following steps (I am going a bit faster now, I am sure you will get it easily):

Open the existing WCF Service application.
Right click on the Solution and select Add New Project.
Select the MVVM Light project template for Silverlight and add a new project.
Build the application.
Just like before, add a Service Reference to the Silverlight application.
Again, just like before, add the Silverlight application to the WCF Service application (WCF Project Properties, Silverlight Applications, Add…).

Summary

Hopefully the confusion around this is cleared now. In summary:

Silverlight applications are restricted to access cross-domain web servers (unless explicitly authorized to do so).
The default MVVM Light application does not have an explicit host, so it runs off the default test page.
You can however easily add the MVVM Light application to the WCF Service application and then run it and debug it.

Note that the steps above can be used to add an MVVM Light application (or any Silverlight application) to any ASP.NET application, be it WCF Service application, ASP.NET MVC application or “classic” ASP.NET application.

Happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit for Windows 8 (preview) #mvvmlight #win8

Laurent Bugnion — Mon, 03 Oct 2011 19:28:19 GMT

I was very optimistic when I first saw Metro style apps coded in C# on Windows 8, because for the most part they are not much different than the well known XAML/C# pair on Silverlight or WPF. This led me to brag a bit about probably having a port of MVVM Light ready “in a few days”. Of course I didn’t take in account that I would have a great time the week after //build in Seattle, with fantastic weather and tons of friends to have dinner and conversations with. Needless to say, the few days turned out, in fact, to be a couple of weeks.

Nonetheless, I am proud and happy to announce the availability of MVVM Light Toolkit for Windows 8. Let’s be clear, this is a preview version. All the unit tests are green for the selected components (there are a couple of components not ported yet, see the section below titled “Missing components”). However, a green unit test does not quite mean that the tested component is completely safe to use, so please be careful with that material and send me your feedback if you find issues.

Installation

MVVM Light for Windows 8 is a side-by-side install with the standard MVVM Light V3 or V4 beta. Simply download and run the MSI from Codeplex. As usual, the last step of the installation performs a “/setup” of Visual Studio to actualize the project template cache, and unfortunately this last step can last very long. Please be patient and don’t cancel before the end! The installation process is very similar to that described on the MVVM Light installation page (except that there is no NuGet installer for VS11 yet).

Note however that if you uninstall MVVM Light V3/V4b, but still want to keep MVVM Light for Win8, you may have to repair MVVM Light for Win8. Simply run the installer again and select “Repair”.

Ported components

Almost all MVVM Light components are also available in the Windows 8 version. The ported components are:

ObservableObject including all ways to raise PropertyChanged.
ViewModelBase including all ways to raise PropertyChanged.
Messenger including all message types except DialogMessage (see below).
RelayCommand with and without parameter.
SimpleIoc which might well be the very first IOC container working on Windows 8.

File, New Project

I also created a Metro style version of the MVVM Light project template. To create a new MVVM Light-powered Metro Style application, follow the steps:

Select the menu File, New, Project.
In the New Project dialog, select the category Visual C# / Wndows Metro style and double click the MvvmLight (Win8) template.

The created application is a very simple MVVM application, very similar to the ones that get created in Silverlight, WPF or Windows Phone 7: it contains a model with IDataService, a dummy runtime implementation and a design time implementation. The ViewModelLocator is available and “wired” (using the SimpleIoc container) as well as a MainViewModel that is set as DataContext on the MainPage.

Missing components

Skins: There is a small change in the way that resource dictionaries are handled in Windows 8. I need to sort things out, so right now there is no “MainSkin.xaml” in the project template.
DialogMessage: This type is bugging me in V3/V4b because it is bringing the MessageBoxResult type into the ViewModel. I am looking at ways to make it better by converting the MessageBoxResult into a vanilla Boolean. In Windows 8, MessageBoxResult does not exist anymore (there is no MessageBox or popups of any kinds in Metro style apps). Consequently, the DialogMessage does not build, and I decided to just remove it for now. I will add it again when I refactor to the “vanilla” version.
EventToCommand: There are no Blend behaviors in Windows 8 yet (important word: yet). I am looking at ways to have behaviors on Windows 8 before Blend 5 for XAML gets released. Stay tuned.
DispatcherHelper: The Dispatcher object has changed quite a lot in Windows 8, and I am looking at ways to keep the DispatcherHelper compatible with previous versions of MVVM Light by wrapping these differences. It shouldn’t be a big deal, but I want to give myself a little time to get it right (hopefully).

Next steps

I intend to build a small sample application (very similar to the one I built for my MIX11 talk) to try the various components in real life conditions. This will of course be the topic of an upcoming blog post.

I encourage everyone to try these components in Windows 8 preview, and please don’t be shy with your feedback!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn