Tag Archives: Prism

Introducing the Prism Navigation Framework for Silverlight MVVM Applications

Another framework? But why?

After receiving a lot of positive feedback and requests for source code for my previous post on Prism navigation i decided to release the code i had as open source project.

This is how Prism Navigation Framework project was born.

My intention was to create simple-to-use but powerful-and-feature-full Navigation Framework for building Silverlight MVVM applications with Prism.

This is the first introductory post (from series of planned similar posts) that will try to explain what this Navigation Framework for Prism can do to make your life as developer easier.

If you are too anxious to read the whole article you can just open the Sample Silverlight Navigation Application Application (for the Beta 1 version of the Framework) and try out some of the features and then read on if you find it to be interesting (in the demo you can see loading Views and their ViewModels to Prism Regions, visual transitions when loading Views, Browser URL and History integration – deep linking, deferred module loading, passing parameters to views etc).

If you are interested in the source of the Prism Navigation Framework and the Sample Application shown here you can download it on the Downloads section on the project site.

Note: Its important to say here that in this post I will not try to explain in detail how Microsoft Patterns and Practices Team Prism works – you must already be familiar with it, and if you never used it to develop Silverlight or WPF MVVM applications, i recommend you to try it out, also make sure to check Prism excellent documentation if you need to refresh your memory.

Basic Concepts

Since Prism Navigation Framework is based on the Prism guidance, naturally it is leaning on and reusing all of Prism main concepts:

  • Modules – packages of application functionality (packaged as .dll or .xap) – they can be loaded immediately on application start or on demand (so called deferred module loading) – this framework completely supports loading of modules implicitly or explicitly.
  • Views and their ViewModels that are packaged in those Modules (each View has its ViewModel set as value of its DataContext property) – this framework allows you to register Views and their ViewModels and then easily load them in many ways, initialize them with parameters etc.
  • Regions - are actually Controls that are used as placeholders on the Views where you can load content – other Views of the application – this framework supports Regions and extends them in practical way – read more below.

One Region To Rule Them All

If you ever built Prism applications you know that by convention each Prism application has one Main View – called the ‘ShellView‘.

Shell View is created on the application start and loaded to represent the main screen of the application.

This main View has multiple Regions – this is where you can load your Views.

Prism Navigation Framework takes Prism’s concept of Regions a little further and defines two types of regions:

  1. Single Main Region – there is only one Main Region in the Application and its usually large region in the center of the Shell View. This Region is meant to be placeholder where we will load other Views – Pages of the Application with the main content. Only one View can be shown in Main Region at one time. This region is represented by dropping instance of PrismNavigationMainFrame control in your ShellView and setting its RegionName.
  2. Multiple Secondary Regions – represented by PrismNavigationSecondaryFrame control – you can place as many of them as you like in the Shell View and load any of application Views into any of those Secondary Regions – Secondary Region can (unlike the Main Region) show multiple Views at the same time (widgets, control etc).

Here is how you would add the single Main Region to your Shell View:

                    <Controls:PrismNavigationMainFrame cal:RegionManager.RegionName="MainRegion" />

And here is how you can add multiple Secondary Regions:

                    <Controls:PrismNavigationSecondaryFrame cal:RegionManager.RegionName="WidgetsRegion" />

                    <Controls:PrismNavigationSecondaryFrame cal:RegionManager.RegionName="OpenedDocumentsRegion" />

Loading Views

We have seen how we can define Main and Secondary Regions so lets see what are our options for loading our Views into those Regions:

  1. First and most useful way to load View into Main region is by typing meaningful URLs in the Browser. Our Framework supports convention over configuration so some defaults work out of the box, for example if you have View control called DetailsView in Module called ProductsModule, then to load this DetailsView into the Main Region of the application just point your browser to this URL:   http://yourapplication.com/index.html#/Products/Details/ (Off course you can pass parameters through the url like this: http://yourapplication.com/index.html#/Products/Details/ProductId/1234  or http://yourapplication.com/index.html#/Products/Details/)
  2. you can also use standard Silverlight HyperlinkButton control and its NavigateUri property to specify URL of the View you want to load (for example “/Products/Details/Id/1″) and its TargetName property to specify to which Region you want View to be loaded
  3. and from your code in ViewModel use the framework’s IPrismViewLoadingService and load Views to any Region in multiple ways: by specifying the View type, or View interface type or just a string name of the View – choice is on you (more on that later). Its important to mention here that when view is loaded via URL – Prism Navigation Framework automatically checks from the URL what is the name of its Module and loads the module if its not already loaded before loading the View, but more on that later.

Modules And How They Relate To Their Views And ViewModels

Now that we covered how to load Views, lets see how the Views and ViewModels are defined, created, registered and initialized in your MVVM application done with Prism Navigation Framework:

Views and ViewModels are in Prism applications packaged in Modules - each module is Silverlight Library (packaged in .dll) or Silverlight Application (packaged in .XAP) that supports some application functionality.

View is usually a UserControl that is just a visual representation of the functionality and its bound to its ViewModel for the data and application logic.

Each module in Prism has to implement IModule interface and it contains InitModule method that is called by the Prism when the Module is loaded.

This is where you need to register your Views and ViewModels so that Prism Navigation Framework can help you instantiate them and load them into Regions.

So here is how your typical Module initialization would look like:

    public class InitModule : IModule
    {
        private readonly IViewRegistrationService _viewRegistrationService;

        public InitModule(IViewRegistrationService viewRegistrationService)
        {
            _viewRegistrationService = viewRegistrationService;
        }

        public void Initialize()
        {
            this._viewRegistrationService.RegisterViewsAndTheirViewModels();
        }
    }

This is possible because each ViewModel needs to inherit the generic type ViewModel<IView> and therefore carries the type (or interface) its View.

This way RegisterViewsAndTheirViewModels method can automagically scan the calling Assembly and look for the types that inherit ViewModel<TView> and registers them for you.

Here is how typical ViewModel definition looks like if you tie your ViewModel to the View interface type:

    public class IndexViewModel : ViewModel<IIndexView>
    {

    }

But off course you can also tie your ViewModel directly to the View type if you want (but i don’t recommend that you do this, tying ViewModel to View interface is much cleaner):

    public class IndexViewModel : ViewModel<IndexView>
    {

    }

Naturally, nothing stops you from manually registering your Views and ViewModels in your Module initialization like this:

    public class InitModule : IModule
    {
        private readonly IViewRegistrationService _viewRegistrationService;

        public InitModule(IViewRegistrationService viewRegistrationService)
        {
            _viewRegistrationService = viewRegistrationService;
        }

        public void Initialize()
        {
            this._viewRegistrationService.RegisterViewAndViewModel<IUserDetailsView, UserDetailsViewModel>();
        }
    }

As long as you use any of these methods of View-ViewModel registrations – your navigation will work.

View Initialization

So now that we know how to register our Views and ViewModels lets see how ViewModel initialization looks like.

Since base class ViewModel implements IAcceptInitializationData interface it is ready to accept initialization data like this:

    public interface IAcceptInitializationData
    {
        void Initialize(ViewInitializationData initializationData);
    }

So whenever some View needs to be shown, behind the scenes its ViewModel will be created, and its Initialize method will be invoked with initialization data (that includes parameters from URLs or directly passed if its done via code) and afterwards this ViewModel will be set as DataContext of the View and then View will be shown in desired prism Region by our Navigation Framework.

Lets take a look at the ViewInitializationData class that is passed to the ViewModel:

    public class ViewInitializationData
    {
        public string Url { get; set; }

        public string RegionName { get; set; }

        public Dictionary<string,string> Parameters = new Dictionary<string, string>();
    }

As you see its enough data for the ViewModel to start functioning – it knows where its loaded – RegionName, how (if via URL then corresponding Url property is filled), and it gets its parameters via Parameters dictionary.
Parameters are parsed from the URL automatically by the framework so you dont have to worry about it.

Can I Show Views From Code in ViewModel?

If you are showing the View from the code, you can pass to it new instance of ViewInitializationData type where you can set your parameters etc.

Also its worth mentioning that if you show some View from code into the Main Region and pass parameters to it, then Browser URL will be updated to show the Url of the View showing the Module name, View name and parameters if any.

For example if you loaded DetalsView from ProductsModule with parameters ProductId = 1234 browser URL would change to something like this: http://yourapplication.com/index.html#/Products/Details/ProductId/1234).

Plumbing

As you can see the Prism Navigation Framework can do a lot of plumbing for you, so that you can focus on the implementation of the application functionality (don’t we all want to do that?).

In order to achieve all this framework is extending the Prism so it needs to call some initialization code in the Bootstrapper class.

To avoid forcing users to manually call that code in every application there is special class PrismNavigationFrameworkUnityBootstrapper that you can use instead of the regular UnityBootstrapper that will do all this initialization for you (for now MEF is not supported by this framework but maybe we will include it later).

So in your application bootstrapper that inherits PrismNavigationFrameworkUnityBootstrapper you don’t need to do anything other than what you would usually do, just create your Shell and register Modules etc, something like this maybe:

    public class Bootstrapper : PrismNavigationFrameworkUnityBootstrapper
    {
        protected override DependencyObject CreateShell()
        {
            this.Container.Resolve<IViewRegistrationService>().RegisterViewAndViewModel<ShellView, ShellViewModel>();
            return Container.Resolve<IViewCreationService>().CreateView<ShellView>() as DependencyObject;
        }

        protected override void InitializeShell()
        {
            base.InitializeShell();

            Application.Current.RootVisual = (UIElement)this.Shell;
        }

        protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog CreateModuleCatalog()
        {
            return
                Microsoft.Practices.Composite.Modularity.ModuleCatalog.CreateFromXaml(new Uri(
                    "PrismNavigation.App;component/ModuleCatalog.xaml", UriKind.Relative));
        }
    }

Wrap Up

This is just an introductory post and here you could see only part of what you can expect from this Framework.

I wont go into further details for now, so expect in the future more posts covering every feature of the Prism Navigation Framework in more details.

In the meantime check out the Prism Application Framework Sample Application just to get a feel of what it can do, or browse the latest Source Code or download it and use freely for building your next big Prism Silverlight MVVM application.

Your feedback (both positive and negative) and participation in the development of the project is very welcome!

Combining Silverlight Navigation Framework and Prism to create MVVM Applications – Introduction

This is introductory post for a series of posts where i will try to tackle the holy grail of MVVM applications – Navigation.

To do this I will be using Prism from Microsoft’s Patterns and Practices team (Silverlight version – latest drop) combined with Silverlight Navigation Framework and i will build small navigation framework on top of that.

If you are too busy to read this post and just want to see the result take a look at the current state of the sample Silverlight Prism Navigation application where you can see most of the important features of this small navigation framework (PrismExtensions.dll that contains all the framework code is 35.5 KB in size).

And for those of you with stronger nerves here is the real story:

Lately i have been playing with my old friend Prism and re-discovering how good it is for building MVVM Silverlight and WPF applications.

Out of the box you get a lot of things (and only few months ago i was trying to build all of this from scratch – you can see that from my earlier MVVM blog posts).

One of the things i like the most in Prism is the modularity concept and support for loading application modules dynamically from local/remote servers – on users/application request.

This allows developers to cut the application in modules with isolated functionality and on start load only mandatory parts and then load other modules only if users really needs/request them.

What really surprised me is that nobody has so far managed to combine Prism with Silverlight’s excellent Navigation Framework in a successful way so that is usable for real-life MVVM applications (at least i could not find any good examples on the web).

Prism has a concept of Regions and allows easy loading of Views into them but this is where it ends – there are no higher level concepts of navigation – this is why i decided to build some kind of Navigation framework on top of Prism – to fill that gap.

This is where the very important concept of Deep Linking comes into the story. I cannot imagine any serious Silverlight application without allowing users to bookmark pages in the browser, and to use the Back and Forward browser button to navigate though the UI, to manually ‘hack’ the URLs to load different data etc…

So this is something where Silverlight Navigation Framework can help us. It has built in support for all major browsers for browser history, it notifies the application about the browser URL change, there is HyperlinkButton control that has NavigateUri property where you can specify the application URL that will be loaded when user clicks on it (without full page reload off course – because only the fragment of the URL after # sign is changed) etc.

The only problem is that there is no easy way to combine Prism and Silverlight Navigation Framework.

Yes we can implement INavigationContentLoader and plug it into the Frame control but still we don’t have full control over the page/view loading process, we need additional Frame for each Region where we want to show Views etc.

So i decided to do a little research on how to simplify things and to create a small framework for Prism that will use Silverlight Navigation Framework to load Views into Prism Regions and enable Deep Linking, passing parameters to views, to allow integration with Prism modularity and allow deferred module loading etc – in other words all the features that one would expect to have in modern RIA Silverlight application.

Here are some features that i already support or will in near future:

  • it must be a simple (for the end user-developer) but full blown Navigation Framework for Prism Silverlight MVVM applications
  • it will support this main MVVM scenario: application will have one Main View (so called ‘Shell’) that will be loaded on start of the application and this will be the main ‘screen’ of the application that will have multiple regions where we can load Views. Only one region will be considered as Main Region and it will be ‘tied’ to the URL typed in the browser. Other regions will not update browsers URL or be affected by changes in the URL but application will be able to load Views into other regions – for example Widgets etc (i decided not to support Regions inside Views loaded into Regions on Main Region as this greatly simplifies the implementation and i don’t see a real usage scenario anyway –  instead of using Sub-Regions you can always use child Views inside of your View for that).
  • support for passing the parameters to the Views via browsers URL – every update in the URL of the browser will load appropriate view in Main Region (and pass parameters from URL to the Views ViewModel) and on the other hand, if some View is loaded to Main Region from code, this will reflect on the browser URL (including the parameters passed to View).
  • when View is loaded into region it will be connected to its ViewModel (set as its DataContext) – this is done automagically by the framework, user just needs to define the mapping between Views and View Models in the Module initialization – more details on that in later posts.
  • support for manually loading Views from ViewModels via code (not only via URLs) using the same framework – via some service like IPrismViewLoadingService
  • framework should include support for Prism deferred loading of application Modules – there should be easy way to load Prism Modules that are marked as OnDemand and they should be loaded either manually – from code or automagically – when user navigates to URL that should show View that is in module marked as ‘OnDemand’
  • there should be a way to define User Friendly URL’s – aliases for specific Views and Modules but some smart defaults should work out of the box by default like: “/Products/Detail/1234″  or “/ProductsModule/Details/1234″ etc – user should just type the URL in browser and Framework must load the Module if needed and then show the View (bound to its initialized ViewModel)
  • full support for navigation between Views using HyperlinkButton controls – for loading Views to Main Region and to other Regions
  • framework should be ‘opinionated’ regarding the way how it initializes and binds Views and their ViewModels – in our case it will be View-ViewModel-Marriage approach: there is separate service that initializes ViewModel and set it as DataContext of the View.
  • it should be simple to use for the end user-developer – smart defaults should work without any user configuration yet customization should be possible for advanced scenarios
  • whole solution should be based on services that implement defined interfaces – so that they can be easily changed with different implementations that user could plug via IOC – for example to easily change the parameters format from ‘parameterA/value1/parameterB/value2′ into ‘?parameterA=value1&parameterB/value2′ etc.

So this features should be enough to get us started but we can change this along the way if we see that its appropriate – if you have some suggestions – do let me know!

As you can see from the Sample Application I already have implemented most of these features and I will be finishing along the way as i write more posts in the future – what you can see in the demo right now is: Browser URL history integration (Deep Linking and Back/Forward buttons support), Loading Views with their corresponding ViewModels to Main Region and to secondary Regions, passing parameters to Views, asynchronous deferred loading of Modules/Views etc.

If some you know of some other Prism Navigation Framework that already has most of these features please let me know so i can stop doing this and enjoy real life :)

Otherwise see ya soon in the next part of this article series where i will explain all about this framework and share some code with usage scenarios.

Wiring up View and Viewmodel in MVVM and Silverlight 4 – Blendability included

Im a BIG fan of  Silverlight and also i really like the Model View ViewModel pattern. Nice part is that those two fit perfectly. The downside is that everyone is doing MVVM the way they like it or the way they think they like it. There is no strict guidance,  there are no ‘Bible’ kind of books written on the subject, there is only a enormous pile of information (of varying quality) on the web contributed by developers all over the world trying to (ab)use this pattern in their everyday practice.

(probably you can take this post as just another small contribution to that information pile on the MVVM).

Yes, there are many mature MVVM frameworks for Silverlight and WPF out there (Prism, MVVMLight, Caliburn etc) and they try to provide standardized ways of doing things but they either lack features or they are overly complex for my taste. Also problem with frameworks is that each of them solves some problems in good or excellent way yet other things are not covered or they are done in way that is not acceptable for each need.

So i guess if you could just merge them all to one solid framework it would be a hell of a tool.

One of the features that most of Silverlight MVVM frameworks are actively trying to solve is the process of wiring up Views and Viewmodels and related to this problem is so-called Blendability.  Blendability is just a fancy word for enabling designers to see the correct preview of their Views in Visual Studio and/or Expression Blend.

And this is not easy task that’s for sure.  Here is why:

As soon as your View Models become more complex and if you start using Dependency Injection with Constructor Injection – because IDE is trying to instantiate your ViewModel in designtime and fails – design surface will blow up in your face and instead of the preview you will just see some error message (if you are lucky enough and your IDE did not crashed already).

I do like how MVVMLight framework is preserving Blendability by using concept of the ViewModelLocator.

Basically this class is some sort of ViewModel factory that returns different ViewModel if its called in runtime or designtime. This keeps the IDE happy and it does not crash because it gets some dummy model when in designtime and when application is trully running it then gets realt ViewModel so everyone is happy :)

While this is pretty smart concept, i don’t like how it is implemented in practice.

In MVVMLight ViewModelLocator  is usaully defined in App.Xaml.cs as global resource (and therefore created on application startup).

Also designtime and runtime versions of ViewModel instances in ViewModelClass are defined as static properties and therefore also created when ViewModelLocator class is first used. Also those static ViewModels are then shared between multiple views which is in my opinion simply  wrong.

Every view should have its own ViewModel instance created for it in runtime.

For example what if i want to show same view multiple times on a single page? (lets say its case of multiple RSS feed widgets on one page each of them showing different RSS feed etc).

Each ViewModel should be instantiated at the same time as its View or at least i should have the freedom to choose when its created depending on the situation and also i should be able to choose if it is shared between multiple instances of same view or not.

So inspired by the concept of ViewModelLocator from MVVMLight i created my own variation of this class and i will be presenting this solution in this post.

So enough talk  lets first show some code. This is my current version of the ViewModelLocatorBase class:

ViewModelLocatorBase.cs:

using System.ComponentModel;
using Framework.Abstractions.Silverlight.ServiceLocation;

namespace Framework.Implementors.Silverlight.MVVM
{
  public abstract class ViewModelLocatorBase<TViewModel> : NotifyPropertyChangedEnabledBase where TViewModel : class
  {
    private static bool? isInDesignMode;
    private TViewModel runtimeViewModel;
    private TViewModel designtimeViewModel;

    /// <summary>
    /// Gets a value indicating whether the control is in design mode
    /// (running in Blend or Visual Studio).
    /// </summary>
    public static bool IsInDesignMode
    {
      get
      {
        if (!isInDesignMode.HasValue)
        {
          isInDesignMode = DesignerProperties.IsInDesignTool;
        }

        return isInDesignMode.Value;
      }
    }

    /// <summary>
    /// Holds the intance of the runtime version of the ViewModel that is instantiated only when application is really running by retrieving the instance from IOC container
    /// </summary>
    protected TViewModel RuntimeViewModel
    {
      get
      {
        if (this.runtimeViewModel == null)
        {
          this.RuntimeViewModel = SimpleServiceLocator.Instance.Get<TViewModel>();
        }
        return runtimeViewModel;
      }

      set
      {
        runtimeViewModel = value;
        this.OnPropertyChanged("ViewModel");
      }
    }

    /// <summary>
    /// Gets current ViewModel instance so if we are in designer its <see cref="DesigntimeViewModel"/> and if its runtime then its <see cref="RuntimeViewModel"/>.
    /// </summary>
    public TViewModel ViewModel
    {
      get
      {
        return IsInDesignMode ? this.DesigntimeViewModel : this.RuntimeViewModel;
      }
    }

    /// <summary>
    /// Holds the intance of the designtime version of the ViewModel that is instantiated only when application is opened in IDE designer (VisualStudio, Blend etc).
    /// </summary>
    public TViewModel DesigntimeViewModel
    {
      get
      {
        return designtimeViewModel;
      }

      set
      {
        designtimeViewModel = value;
        this.OnPropertyChanged("ViewModel");
      }
    }
  }
}

As you can see ViewModelLocatorBase is generic and abstract class that should be inherited by concrete ViewModelLocators, usually one for each View but this is not necessarily the case and you can have as many ViewModel locators for single view as you like (or you can share same ViewModelLocator between multiple instances of same View on one page if that is really what you need, also each view can have its own if needed).

Generic type TViewModel is usually the interface that your ViewModel is implementing (you could use concrete class type there but i strongly disagree with that – Views should bind to interfaces and later you can easily mock them etc).
ViewModelLocatorBase inside its static property IsInDesignMode determines if its instantiated inside aome IDE designer or inside the real running application.

I have tested it in Blend 3 and Visual Studio 2010 Beta 2 and it works fine.

Based on that fact (runtime or designtime) ViewModelLocatorBase.ViewModel property returns appropriate ViewModel instance.
If its designtime it returns value of DesignTimeViewModel property and if its runtime it returns RuntimeViewModel property value.
Now as you can see in the getter of RuntimeViewModel property, when its first time accessed it retrieves the concrete instance of our generic TViewModel type (it uses my home grown IOC adapter called SimpleServiceLocator but you can plugin any IOC you want behind it).

This instance is then saved to private property so its created only once.

So this way on runtime you will get there whichever concrete implementation you set up in your IOC for the TViewModel type.

Here is how i setup IOC in Bootstrapper class:

  public class Bootstrapper
  {
    public static void InitializeIoc()
    {
      SimpleServiceLocator.SetServiceLocatorProvider(new UnityServiceLocator());
      SimpleServiceLocator.Instance.Register<IMessageBoxService, MessageBoxService>();
      SimpleServiceLocator.Instance.Register<IEditUsersViewModel, EditUsersViewModel>();
    }
  }

To have something returned from the getter of the ViewModel in designtime we need to set the DesigntimeViewModel property.
We do that in the concrete ViewModelLocator class that is inheriting from ViewModelLocatorBase so that in design time IDE will get this instance.

Here is one simple concrete ViewModelLocator implementation:

  public class EditUsersViewModelLocator : ViewModelLocatorBase<IEditUsersViewModel>
  {
    public EditUsersViewModelLocator()
    {
      this.DesigntimeViewModel = new DummyEditUsersViewModel();
    }
  }

So the concrete EditUsersViewModelLocator class simply inherits the ViewModelLocatorBase and for the generic type it specifies the interface IEditUsersViewModel that ViewModels for the EditUsersView should implement and after this it sets the value of the DesigntimeViewModel property to a instance of DummyEditUsersViewModel which is a (as its name clearly states) just some dummy implementation of the IEditUsersViewModel with some test data to be displayed on the screen when editing this view in Blend or VisualStudio designer.

Sounds simple? well that was the original goal :)

Lets paste some more code. This is how the IEditUsersViewModel interface looks like:

  public interface IEditUsersViewModel
  {
    ObservableCollection<User> Users { get; }
    ICommand DeleteUserCommand { get; }
  }

Here is the dummy ViewModel for the design time that has test data to be displayed in designtime:
(it uses static properties to prevent VS2010 with r# from crashing if you open the views without first compiling the whole solution)

  public class DummyEditUsersViewModel : ViewModel, IEditUsersViewModel
  {
    private static ObservableCollection<User> users = new ObservableCollection<User>();

    static DummyEditUsersViewModel()
    {
      users = new ObservableCollection<User>
                     {
                       new User {Username = "Designtime User a", IsAdmin = true},
                       new User {Username = "Designtime User b", IsAdmin = true},
                       new User {Username = "Designtime Admin User c", IsAdmin = true},
                       new User {Username = "Designtime Admin User d", IsAdmin = true}
                     };
       deleteUserCommand = new DelegateCommand<object>(p => {});
    }

      private static ICommand deleteUserCommand;
      public ICommand DeleteUserCommand
      {
          get { return deleteUserCommand; }
          private set { deleteUserCommand = value; }
      }

      public ObservableCollection<User> Users
    {
      get { return users; }
      set { users = value;}
    }
  }

And here is how we would use this concrete ViewModelLocator in our view:

<UserControl x:Class="MvvmBlendability.Views.EditUsersView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ViewModels="clr-namespace:MvvmBlendability.ViewModels" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"  d:DataContext="{Binding Source={StaticResource viewModelLocator}, Path=ViewModel}"  >
    <UserControl.Resources>
        <ViewModels:EditUsersViewModelLocator x:Key="viewModelLocator"  />
    </UserControl.Resources>

    <UserControl.DataContext>
        <Binding Source="{StaticResource viewModelLocator}" Path="ViewModel" />
    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Background="Silver" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Right" Text="Edit Users"  FontSize="18" Margin="0,10,10,5" FontFamily="Arial Black" />
        <ListBox Grid.Row="1" ItemsSource="{Binding Path=Users}" Background="AliceBlue" HorizontalAlignment="Stretch" >

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="300"></ColumnDefinition>
                            <ColumnDefinition Width="21*"></ColumnDefinition>
                            <ColumnDefinition Width="21*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=Username}" />
                        <Button Grid.Column="2" Content="Del" Command="{Binding Source={StaticResource viewModelLocator}, Path=ViewModel.DeleteUserCommand}" CommandParameter="{Binding}" />

                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

</UserControl>

In the Xaml its very important that you notice this part of the code in the UserControl definition:

d:DataContext="{Binding Source={StaticResource viewModelLocator}, Path=ViewModel}"

Its the very important part and if you miss this out you will not see much in the designer. This actually tells the designer what to use as DataContext of the UserControl (this is our view) in designtime and we will point it to the ViewModel property of our ViewModelLocator instance we defined in the UserControl.Resources section on top of the view.

Yet this code sets the DataContext binding for view for runtime:

    <UserControl.Resources>
        <ViewModels:EditUsersViewModelLocator x:Key="viewModelLocator"  />
    </UserControl.Resources>

    <UserControl.DataContext>
        <Binding Source="{StaticResource viewModelLocator}" Path="ViewModel" />
    </UserControl.DataContext>

We first create instance of out ViewModelLocator in resources of the UserControl (View) and then we set this as DataContext.
And in the design time in VisualStudio when we open EditUsersView we will get this:

As you can see design surface is working and we can see our View showing data from our  DummyEditUsersViewModel.

I have created one more View called ShellView and placed in its Xaml two instances of EditUsersView so that we can be sure it will work in this scenario also.

As i mentioned each instance of the view will get its own ViewModel created and wired up (in this case since its designtime each view will get its own instance of designtime view mode – DummyEditUsersViewModel).

First lets look at the xaml of the ShellView:

<UserControl x:Class="MvvmBlendability.Views.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Views="clr-namespace:MvvmBlendability.Views" mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Views:EditUsersView Grid.Row="0" />
        <Views:EditUsersView Grid.Row="1" />
    </Grid>
</UserControl>

In the ShellView we have two instances of the EditUsersView and both of  them will be assigned with separate ViewModel instance as we declared it in the Xaml of those views via ViewModelLocator so we dont need any ViewModelLocator for ShellView.

Basically EditUsersViews are here used as a component that we dropped on another view and this component takes care of its own DataContext without having to worry about it again. Off course we could also create view that does not have ViewModel assigned via ViewModel locator and place it on ShellView and set its DataContext directly via DataBinding.

All possibilities  are there we just need to choose the appropriate one.

So lets see how ShellView looks in the VS2010 Beta 2 designer:

And its working in Blend also (but be sure to use Microsoft Expression Blend Preview for .NET 4 version to be able to open this solution. Its not working in plain Blend 3 because this version is not supporting VS 2010 projects/solutions).

So here is the ShellView in Blend:

On the other hand, when we actually run our application in browser then ViewModelLocator sets ViewModel property to the real ViewModel instance (runtime version) and view is populated with real data from EditUsersViewModel just as we would expect:
Here is how it looks when we start our application in the browser:

As you can see each instance of the View has different data shown that proves that each has different instance of ViewModel set to its DataContext.

So we have accomplished our three main design goals:

  1. Simple yet powerful View to ViewModel wireup
  2. Blendability
  3. simplicity :)

Im attaching the VisualStudio 2010 solution with full source code of project used in this post.
You can see the live demo of this app here.

Hopefully this has given you some ideas on how to start with MVVM without having to learn frameworks before you event start programming. Later when you realize that you cannot accomplish all your ideas you can always switch to some framework and use it.

Unitl then: Happy DataBinding!