Category Archives: MVVM


Throttling Immediate TextBox Binding Behavior for Windows Phone

The learning curve of a Windows Phone developer

While developing Offline Web Browser for Windows Phone i had to build a small MVVM framework in order to keep the logic out of the views.

One of the first thing i found missing was a way to force immediate propagation of text entered in TextBox control to the databound property of my ViewModel.

By default, TextBox binding is triggered only when control loses focus, and this is kind of lame.

Code reuse is not a myth!

This is really old problem. It existed in desktop Silverlight from the beginning. And it made its way to the Windows Phone platform.

Fortunately I remembered that back in the days while experimenting with Silverlight MVVM framework i already solved this problem by creating a custom silverlight TextBox control so i decided to just reuse that code and create a Behavior that will force binding update to fire on each keystroke in TextBox.

That’s the beauty of developing a Windows Phone app – you can reuse most of the Silverlight code you built over the years :)

But then i noticed another problem. Because now each keystroke was propagating changes to my ViewModel, if user would type fast and i do for example some web service call on each property change – then i can have too many requests to the web service (one for each keystroke) but in fact i want to do a call only when user stopped typing for a while.

Fortunately, solution is very simple – we will use Reactive Extensions (Rx) since its perfect fit and its already built-in into Windows Phone.

We just need to reference Microsoft.Phone.Reactive.dll from GAC (no additional download needed) and we are half-way there.

OK, but show us some code!

Yes lets see how the code for the ThrottledImmediateBindingBehavior looks like:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Interactivity;
using Microsoft.Phone.Reactive;

namespace Roboblob.Mvvm.Behaviors
    public class ThrottledImmediateBindingBehavior : Behavior
        private BindingExpression _expression;

        public bool Throttle { get; set; }

        private double _throttleDelayInSeconds = 0.5;
        private IDisposable _currentObservable;

        public double ThrottleDelayInSeconds
            get { return _throttleDelayInSeconds; }
            set { _throttleDelayInSeconds = value; }

        protected override void OnAttached()

            if (Throttle)
                this._expression = this.AssociatedObject.GetBindingExpression(TextBox.TextProperty);
                var keys = Observable.FromEvent(AssociatedObject, "TextChanged").Throttle(TimeSpan.FromSeconds(ThrottleDelayInSeconds));
                _currentObservable = keys.ObserveOn(Deployment.Current.Dispatcher).Subscribe(evt => OnTextChanged(evt.Sender, evt.EventArgs));
                this._expression = this.AssociatedObject.GetBindingExpression(TextBox.TextProperty);
                this.AssociatedObject.TextChanged += this.OnTextChanged;

        protected override void OnDetaching()

            if (Throttle)
                if (_currentObservable != null)
                    this._expression = null;
                this.AssociatedObject.TextChanged -= this.OnTextChanged;
                this._expression = null;

        private void OnTextChanged(object sender, EventArgs args)
            if (_expression != null)

Simple Is Beautiful

Our Binding class has bool property Throttle where we can enable/disable throttling and also a ThrottleDelayInSeconds where we specify after how many seconds later after user stops typing our property is updated.

In the OnAttached – we just hook to the TextChanged and each time user types something we update the binding source.

But if Throttle is set to true, we hook to the TextChanged event over Reactive Extensions and we setup throttling so that binding do not trigger if changes are too fast.

In this only after changes stop firing for the time defined in ThrottleDelayInSeconds, only then binding update is triggered.

Off course we do a little cleanup in the OnDetaching as all good coders :)

What about the Xaml???

Yes in Xaml we can use it like this:

            <TextBox Text="{Binding SearchCriteriaText, Mode=TwoWay}">
                    <RoboblobBehaviors:ThrottledImmediateBindingBehavior Throttle="True" ThrottleDelayInSeconds="1" />

For those who are lazy to type I’m attaching a zipped source code of simple Windows Phone Mango project that is demonstrating the usage of the behavior.

Btw does somebody even remember how it was to type source code from printed computer magazines int your 8bit computer?

Probably not :D

Well at least I hope that someone will find this useful.

Until next time, happy coding!

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: (Off course you can pass parameters through the url like this:  or
  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 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:


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()

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

        protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog CreateModuleCatalog()
                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.

Custom Silverlight TextBox control that immediately updates DataBound Text property in TwoWay binding

Standard Silverlight TextBox control is very useful but has one strange behavior: if you use TwoWay data binding and bind some property to controls Text property, when users type text into the control, this change is not propagated to the bound property until the control loses its focus.

This can be very annoying if you have MVVM application and you have some kind of real-time filter that needs to update some data as-you-type.

Problem is that TextBox control does not call BindingExpression.UpdateSource when its Text property is changed so we have to do that manually in order to fix this issue.

To fix this once and for all I have created simple custom control ImmediateTextBox that inherits the standard TextBox and just calls BindingExpression.UpdateSource for TextBox.TextProperty whenever text is changed.

Here is all the code that is in our custom control:

using System.Windows.Controls;

namespace ImmediateDataBindingTextBox
    public class ImmediateTextBox : TextBox
        public ImmediateTextBox()
            this.Loaded += ImmediateTextBox_Loaded;

        void ImmediateTextBox_Loaded(object sender, System.Windows.RoutedEventArgs e)
            this.TextChanged += ImmediateTextBox_TextChanged;

        void ImmediateTextBox_TextChanged(object sender, TextChangedEventArgs e)
            var tb = sender as TextBox;
            if (tb != null)
                var be = tb.GetBindingExpression(TextBox.TextProperty);
                if (be != null)

And here is the demo application that shows this in action.
In sample app you have standard TextBox and our custom ImmediateTextBox that are both bound to some property in ViewModel using TwoWay binding.

Below is TextBlock also bound to same property to show the current value of the property.

If you type text into standard TextBox the text in TextBlock will not be updated until TextBox loses its focus and if you type text into our custom control you will see the changes propagated to the underlying property immediately.

If you want to use this control you can download sample Visual Studio 2010 Solution

Hope someone can find this useful when doing MVVM style applications where you cannot just reach for the code in code-behind to fix problems like this :)