Introduction

In todays article I want to show how layout specifically one nicknamed as the “Traditional Box Model” comes in handy to know for those that like me come form a XAML background, a background which has a rich layout system, a background where panels are the kings of the realm. We’ll see how in HTML, yes this is a bit harder, but very achievable. We will also see how HTML5 and CSS3 introduces some really cool concepts and how layout becomes comparable to XAML layout and panels.

I remember back in the days when I used to do web (around 6 years ago) many would layout the page by using a <table />. Yes a table believe it or not! You might ask yourself “but a table is really for displaying lists of data no??”. Well layout is not really the most intuitive thing to figure out in HTML and devs love shortcuts thus yes; tables were (and in some cases still are) a tool to do layout. But is it the best way to do layout?? No, its not really… A more flexible way to do layout is by using divs. Enter the “Box Model”.

Box Model

Lets say we wanted to do something like this

One way of picturing this layout is that every box is a div (some might argue it doesn’t really need to be a div but really any element that has display: block, but for simplicity, let’s say divs for now). A div by default will occupy all the width available, so if we had the following HTML the output would not really resemble the layout we have in the image here.

This would actually render into something like this

Blue div == ‘mainSection’; Red div == ‘sideSection’;

In order to get these 2 divs side by side, we need to specify a CSS property called float. You can specify left, right, none or inherit. In our case we will want to set the mainSection to float: left and the sideSection to float: left. The piece that many forget to add, which then results in chaos is to set to the next element (in our case the footer) the css property clear: both. This will restore the flow of the document and basically in our case it will prevent the footer from going up on the side of the sideSection div.

So here is the CSS styling we have done so far

And here is the result we got

Nothing really changed did it?? Nope it did not. And the reason for that is that as I was saying before a div will occupy the full width available by default. What we can do here to make the mainSection and sideSection layout side by side is to set a width for the divs. And we finally get a result that looks like this

What is annoying here is that we had to specify a width to both divs… In all fairness the sideSection can stay without a width and this would make it occupy the reminder width inside the page. That’s cool BUT we want our mainSection to take the dynamic width and not really the sideSection, right? Yes you can do it with the Traditional Box Model BUT instead lets have a look at how we can do this and much more using the new hot stuff from HTML5 and CSS3.

Enter “Flexible Box Model”

The flexible box model is still something that browsers are experimenting with in fact you’ll find that you will need to annotate the properties for this with –webkit and –moz- and –ms . don’t you love experimental things Anyways, the idea with this is to be able to be more dynamic, to have a proper way how to specify layout. With this model you’ll be able to specify if you want the flow to be horizontal or vertical (just like orientation in StackPanel for those XAML guys reading) you’ll be able to specify how much “percentage” of the space available vertically/horizontal should a box take up (just like ColumnDefenitions and RowDefinitions in Grid for those XAML guys reading). You will also be able to specify the alignment and yes also the index you want each box to be in…

Does this feel more like panels in the XAML world. WUHUU now we are talking …. so let’s pimp up our screen with some hot and spicy HTML 5 / CSS3.

Let’s start fresh… here is some new HTML … Basically a parent div with 4 divs and lets start rocking!

The first thing we want to do is tell the container div that we want to use the new box model. To do so we set display: box. Since this is experimental still we need to specify display:-webkit-box;

As I was saying the new flexible box model supports orientation, you do this by specifying box-orient. As expected this takes horizontal and vertical . P.S do not forget to add the –webkit- and all the rest.

And this gives us

This might look like its nothing but hey we just started… Ok seems like these boxes are only using the width that the inside text measures, lets make them use all space available evenly (just like we would do with a XAML Grid)

To do so we use another cool CSS3 feature. The magic property is called box-flex.

And this gives us

Already very exciting isn’t it?! What was that 1 we set to box-flex. The 1 is basically being used in the following formula >> widthOfParent * 1/numberOfElements = widthForElement (ex: 600 * 1/4 = 150). For example if I set 3 for one of the boxes, I get this result which is Box3 is as big as the other 3 boxes all together. (doesn’t it sound like a * measure for ColumnDefinitions in XAML )

Yes resizing the browser window will nicely resize these boxes just like one would expect. AWESOMENESS on a stick!!!!!

What if I want that all boxes are 100px BUT (since I am a crazy evil designer that likes to bully developers) I want them to be all centred in the middle of the screen. Well to give each box a size we know what we have to do, set the width css property. To specify how to layout them there is a new CSS3 property called box-pack. This property will tell the Browser how to distribute the free space. You can set this to start, end, center and justify. Lets go for center (-webkit-box-pack:center;) and we get something like this

if I specify –webkit-box-pack: justify I get this

What if we want to change the rendering order of the boxes? CSS3 to the rescue box-direction a new CSS property will do the trick by setting it to reverse. –webkit-box-direction:reverse

And yes you can even change the order of the boxes (just like a XAML Panel) by specifying the box-ordinal-group

Last but not least is box-align which can be center, left, right and also stretch.

Conclusion

Check out more details on this over here. I hope that this article really shows you that HTML5 and CSS3 are really making some very cool and exciting things for us devs. If like me you come from a background where layout is something really rich (which in any XAML technology, layout is super easy to work with) HTML5 and CSS3 are building mechanisms to be leveraged and easily build awesome web applications.

I am very excited about this, layout sometimes is taken for granted but what is a good UI platform without a good and flexible layout system. Thankfully HTML5 and CSS3 are here to rescue us from the evil designer requests

Developers right this second are at some bar / restaurant / lounge / god knows where else being “social” i.e. having geeky discussions about technology, what language/platform is best to use or even better “what’s coolest right now”

I am one of those developers and I must say, when it comes to such discussions I am always biased towards XAML technologies. Yet recently I started diving in what I used to call the “darker side” i.e. HTML5, JS and CSS3 (the “dark side” is reserved for things like Java ). It’s been years (6 to be exact) since I was doing some HTML and Co and I must say; I am really impressed. HTML5 just takes everything to a whole new level BUT what impresses me most is JS and CSS3.

JS because the browsers are natively exposing APIs such as GeoLocation, Canvas drawing, local storage and also indexed DB (and more APIs). BESIDES THAT, what sells JS for me, is the new libraries developers are building such as JQuery and Knockout.js. Working with javascript today is just loads and loads of fun !!

CSS3 because WOW its frekin cool!! The new box modelling with the Flexible box model, the gardients, the transforms, the transitions and I can go on and on…

So yea I must admit, web development (presentation layer) of today is becoming loads of fun! Backend for Web with MVC its also frekin cool! so I guess the questions that readers of my blog / people who know me would ask “Is Marlon turning his back on XAML?” The answer is simple and its NO, my car number plate still says WPF so I guess I cannot change everything now Joking aside, I see both technologies as super awesome and both of them have a different realms (to a certain extend). “to a certain extend” for the reason that WinRT will also support HTML5 JS and CSS3 as a first class citizen just like it will for XAML and C# / C++.

Does this mean we should say bye bye to XAML and just focus on HTML5 and Co?? If it can do web + desktop why bother looking at XAML??

Ok so lets be a bit metaphoric about this and let’s compare technologies with cars. There are many different brands, there is Audi, there is Honda and you can go on and on… They all take you from place A – B. How they take you is a bit different, some are super confortable, some are fast. Some are perfect for one thing some are perfect for another! You buy a car that fits your needs and the same can be said to technology you decide to use. There are those scenarios, for example when you are moving house, where you do not have the luxury to use your “preferred car” because hey; if its a sports car, it will be no good when you are moving, so in such a case you are coerced to use a specific type. Such an example for developers is the web / mobile phones … Yet again just like in real life there are many different trucks for moving there is HTML5, and then there are the plugins (Flash, Silverlight) …

Which one should you go for? HTML5 or Plugins?

Looking at web tech today I would say go for HTML5. It will work on devices such as phones, if done properly it will be super fast. On the other hand I would strongly suggest you consider SL / Flash if your users cannot install/already have a browser that supports HTML5. In that case then yea I would not go for the HTML < 5 because you’re in for nightmares! Maybe mix and match! Some things are better done with plugins some other with HTML. Do not be afraid to try both worlds, it will not hurt.

What about WPF??

WPF will still have a place but I guess we will slowly see it being used lesser and lesser, reason being with WinRT you are not using WPF you are using WinRT, yes its XAML but NO it is not WPF. There are cases such as VS and similar heavy weight products that would require something like WPF. Trading applications and internal banking applications is another example for WPF apps. But yea if you are building a simple app, going forward one would be better off with something Metro style i.e. WinRT based. So should WPF developers say “cr*p I wasted a lot of time learning something I will not use anymore”?? Whoever says that is really talking bull***t! WPF thought us a lot, WPF gave us so many concepts and ideas… WPF will always continue living in other technologies… Its concepts that really are hard to learn not how to use a framework, example DataTemplates, ControlTemplates, Binding and many other concepts … For me WPF showed me what an awesome API should look like! Besides that you learnt XAML that is something that is not a waste of time since XAML is here to stay !

Final verdict – Who will be the last technology standing?

None probably technology evolves … sorry my fellow geeks, I like you used to treat a technology stack (and must admit still do sometimes) as my one and true love and I could not use another technology without feeling that I am being MARLONCHANGE… well its not the case, when it comes to technology you can mix and match as much as you want and no you will not be called a “Cheater”

Take it from me, if you did not have a look at HTML5 and co, maybe its time for you to do so. Maybe you will not use it but I am sure you’ll get something out of it. I am learning so much, getting so many new ideas (that yea I can even apply for WPF) from doing some HTML5 and Co.

Hope I did not bore you to death with this post but I felt I needed to share this with you guys! I’ll be posting more on HTML5 and Co this year but yea of course I will also do the same for XAML and Co.

Long live XAML

Long live HTML5 (and co)

>> No source code to download just thoughts …

Here is a diagram that show the structure of the request response stack I have.

The reason why I went for an AsyncController is that the long running operation is not CPU-bound processing thus the thread that would be waiting for the response would be wasting its time waiting. More info on why and how to use Async Controllers in MVC3 can be found here.

All is fine and good until my I hit a request that took more than 1 minute, and then the nightmare of timeouts begun… So first thing I did is make sure I make the timeout for the WCF service longer. You can do this by setting the sendTimeout and the receiveTimeout of the binding in the binding configuration.

Don’t forget to do the same thing on the client side otherwise you’ll get in trouble (the config is the same as the server, and if you are using VS to generate the config then this will be done for you when you refresh the ServiceReference).

At this stage I said, wuhooo, it’s all done… but nope… it was still timing out … I was confused and puzzled… WHY WHY WHY!!!!!

Well AsyncController also have a timeout (or 90seconds as per MSDN doc), you also need to set the timeout to the async controller action in order for this to work. You do this by setting the AsyncTimeout attribute on the action that you want to extend its timeout.

With this in place all started working… but yea the errors don’t really help !

Hope this helps…

“Easy task”, I said, me Mr.Optimistic; “I will just load it up in XElement and using Linq to XML to get the data I want”. BUT guess what the web is filled with crazy HTML that a standard .NET parser such as XElement just gives up on and blows up in flames.

After some heavy head banging to walls and ceilings, I found the solution, HtmlAgilityPack. This open source project lets you load HTML even if it is not in a good shape. With some options HTMLAgilityPack will fix these errors and then you can query the HTML to get elements and their attributes as you please.

Here is the code I used to load the HTML and find the data I need

Kudos to the guys from HTMLAgilityPack!!!

Here’s an excerpt:

London Olympic Stadium holds 80,000 people. This blog was viewed about 350,000 times in 2011. If it were competing at London Olympic Stadium, it would take about 4 sold-out events for that many people to see it.

Click here to see the complete report.

I wanted to be careful adding this feature to make sure the ViewModel stays clean. So lets see what we need to do this

Lets first rewind and look at the current MEFedMVVM NavigationExtensions… It has 3 Attached properties

The properties are

- NavigateTo – which is the uri for the view
- NavigationHost – which is the UI element to host the view rendering
- NavigationParameter – which is a parameter to be passed

There is a lot of UI specific stuff in the above so we need to be careful not to make the ViewModel dirty. The ViewModel needs some kind of “UI service “ so that it can ask this service to navigate to a view and pass a parameter (something like the IVisualStateManager of MEFedMVVM); something like this >> Navigate(string viewName, object parameter) . It also need to pass the host so that the NavigationExtensions know where to render this view.

Here is what we came up with ..

As you know (or maybe not, in that case please read this) MEFedMVVM has support for UI Services, if your service implement IContextAware, MEFedMVVM will inject your service with the View instance that asked for the ViewModel to be injected. We leverage this and have an INavigationInvokerFactory. The INavigationInvokerFactory exposes a method that takes a string which should be the name of the host element. Internally the INavigationInvokerFactory will call the FindName(“[your parameter]”) on the element that was sent by MEFedMVVM IContextAware. The CreateNavigationInvoker method will return an INavigationInvoker which can be used to Navigate to a view.

From here you now have an INavigationInvoker and all you have to do is call the Navigate method passing the uri for the View you want to render and the parameter you want to pass

And that’s all folks… Enjoy

So Microsoft unveiled how they are planning to change the world. Why such a big statement? Am I exaggerating? I believe I am not. We live in a world of desktops and laptops today; yea we see some tablets that introduce touch but is it mainstream? are there a replacement to your desktop/laptop? I guess the answer is, No it is not, in order to do such a radical change you need to “push” hardware manufactures into producing these devices mainstream. mmm I wonder who could be that company that can have such an influence? By committing to touch and in fact developing Windows as a touch-first operating system, Microsoft will drive hardware manufactures to give us the touch devices and change how we interact with software today. And yes this is what has been announced at BUILD.

What does touch mean to us? We need to change our way of looking at software, it will not be OK to just have buttons and textboxes; it will not be ok to press a button and your app stalls. Touch is a much more direct way for a user to interact with your application and if one disregards this then that application is destined for failure. I really enjoyed the keynote session from Jensen Harris. He talked about the user experience and how us developers have to embrace the new ideas and concepts coming with Metro style apps. He talked about how Windows 8 is alive, how Windows 8 is personal. These 2 factors create (and yes you might think I am crazy but still I will say it) an intimate relation between you and your device. Windows 8 gives you that “home” \ “friend” sort of feel.

Jensen also made a very good point about apps. Without apps what is Windows 8? without apps there would be no tiles, no tiles empty OS. Even when you look at Metro style apps, you can see how Windows is all about apps… Apps are now chrome-less, your app uses the stage that Windows 8 provides; your app is now the centre of attraction. Windows 8 will also introduce an App Store, this will make your application easier to be discovered and installed by users. App store is probably one of the biggest opportunities for us developers because it gives us a reach of millions of people that will be running Windows 8.

Ok so lets see at what we have till now… We have | 1. a new OS | 2. which is touch first | 3. and will bring new hardware | 4. and amazing new apps

This is all awesome, but let’s not miss the number 1. Its a new OS and with Windows 8 besides many new features (and yes there are many), new concepts are born. Features are very important but concepts are what really change how Windows 8 differentiate itself from other OSs.

One of the concepts Windows 8 brings is Contracts. These are different ways how you application can contribute to Windows; its a way how Windows opens up and let third party applications interact with each other. Some examples of contracts are the Picker contract, Search contract and Share contract.

Picker Contract is a way how you can register your app with Windows and start exposing your data to other applications to consume.

If your application implements the Picker contract whenever an open file dialog is started the user can choose files from your application just like it can choose a file from the hard disk. So for example facebook could have an app that implements the Picker contract and any other application / the user can pick a file from facebook just like it can pick a file from the file system.

Search Contract is a way how you can expose your data via the Search charm (charms are the right hand menu items in windows). If you implement the Search Contract then whenever the user executes a search from the search charm your app will be invoked to contribute to the search results. Think of this as 1 standard way how the user can search.

Share Contract is a way how you can share a piece of information from your application to another application. The application exposing the info would be the source and the application consuming the info would be the target. Imagine the share contract (which is a charm just like search contract) as a sophisticated clipboard. So for example let’s say you are in Paint and you draw something, if paint implements the source share contract it can expose the image you drew. The user can then click the Share charm and all apps that implement the target Share contract can use that data. Just like the screen shot below.

My personal favourites are the share and the picker because those 2 just add so much to Windows applications…. With these charms we can have applications that reuse each other and that can efficiently interact which each other seamlessly.

Besides these there are tons and tones of other features, not to mention tiles, notifications, surprisingly enough keyboard shortcuts, and many more…

Last but not least what about us developers? What is this new Windows Runtime everyone is talking about?
Well in this blog post I will not do a deep dive but here is a summary. Windows Runtime (or as they call it WinRT). WinRT is the API for Windows Metro Style application (aka Immersive apps). WinRT will support

XAML UI definition
- with C# / VB.Net
- with C++

OR

HTML (with some custom attributes) UI definition
- with Javascript

WinRT is written in native code but it exposes the API with metadata files (under C:\windows\system32\WinMetadata) which is very similar to MSIL (in fact you can open these files in ILDASM) so that it can project the APIs to the other languages i.e. JS, C# and C++. Each language has a different runtime so C# still has a CLR running and JS has a runtime that I forgot its name, I think its WinJS  You can also expose libraries to WinRT so that they can be consumed by another language (there is a new output type just like Class library but called MD library). For example you write a library in C++ and it can be consumed by C# or vice versa (or even JS). There are some rules for doing this such as collections must be of type IList<T> (in C#) etc…

WinRT is all about performance and making apps “fast and fluid”. In fact most of the WinRT API are expose Async. WinRT does not use GDI, it only uses DirectX for rendering.

All in all WinRT is something impressive, its what we UI developers where waiting for to build the next generation of applications… I will deep dive in WinRT very soon so stay tuned

Conclusion

So what is really coming at out?? its not just another version of Windows, Its new hardware, New way of interacting with devices, a whole new set of amazing apps. For me, yes, that is enough to say, Windows 8 changes everything!

Most of the MEFedMVVM features so far were all around discoverability of ViewModels, yet when building MVVM application sometimes you want to also have a mechanism to discover and launch views. If we look at web development its all about resources sitting on a server and you can launch/load a specific resource via a URI (Unique Resource Identifier). This mechanism proved to be a very easy and scalable way of locating views and within a Web Page you can link to other pages very easily. When building WPF applications that are purely content based such a mechanism would really come in handy, and if you think about it MEFedMVVM is all about discoverability so why not support this scenario.

Since this is not really part of the core MEFedMVVM I created an extension that you can use to accomplish this, MEFedMVVM NavigationExtension.

MEFedMVVM.NavigationExtension support both WPF and Silverlight 4.

Enter MEFedMVVM Navigation Extensions

The idea is to be able to specify to a View that it can be located by a unique identifier (a string) and then you can have someway of launching that view and render it in some container/host. Something like this

And you make the view discoverable by decorating it with this attribute

As you can see in the figure above, there are 3 magic attached properties that are attached to the “Invoker”

• NavigationExtensions.NavigateTo
  • Specify the unique identifier (string) to locate the view. I use a URI format but you can use whatever you like as long as its unique
• NavigationExtensions.NavigationHost
  • Specify where you want the View to be rendered
• NavigationExtensions.NavigationParameter
  • Specify a Parameter to be passed to the ViewModel of the View. The reason why the parameter is passed to its ViewModel is because if you are doing MVVM then your View has no need for parameters, its the ViewModel that needs the parameter(after all the ViewModel controls the logic). We will see how you can still cheat and do whatever you like at the end of the day, the parameter can be passed to the View.

So one might wonder how will my ViewModel receive the parameter. This is done by your ViewModel being set as DataContext of the View (if you are using MEFedMVVM to link the View to the ViewModel this happens automatically) and also your ViewModel has to implement the INavigationInfoSubscriber interface. This interface defines 1 method OnNavigationChanged which will pass along the parameter and also give you an instance of the INavigationManager responsible for starting the Navigation.

Recap

So till now we can

1. Make a View discoverable by specifying a Unique Identifier
2. Specify an Invoker and give it enough information on what to render and where to render it
3. And also specify a parameter to be passed

This pretty much covers the bare basics, let’s get a better understanding of what is a Host and what is an Invoker before we deep dive in more complex scenarios.

Host and Invoker Deep Dive

When building the NavigationExtensions I wanted to make sure that you can create your own handlers both for Hosts and Invokers, and what is the best way to do so if not with MEF

There are 2 base classes you need to write in order to create your own handlers.

• ControlNavigationHost
  • This is to create your own hosting control. Out of the box you get one which is ContentControlNavigationHost (it handles any ContentControl)
• ControlNavigationHandler
  • This is to create your own invoker for a control. Out of the box you get one which is the ButtonNavigationHandler (it handles any ButtonBase)

The ControlNavigationHost has 4 methods that you need to implement (all method implementation would be usually one liners)

In order to make your own ControlNavigationHost discoverable by the NavigationExtensions simple Export it like this

The ControlNavigationHandler has 3 methods you need to implement

In the implementation you simple have to register to the Event you want and then call the OnEventFired protected method of the base class. here is an example

And again to make the handler discoverable you Export it like so

Please note: that its up to you how you want the creation policy to be (i.e. If MEF should create a new instance of the NavigationHandler or not but in this case you should always make it NonShared so that for each invoker in your application you have a different ControlNavigationHandler instance)

Apps are usually more complicated, so let’s dive into more complicated scenarios

Before we start going through these scenarios let’s have a look at some interfaces and classes that MEFedMVVM exposes for you to consume/implement

INavigationManager 

INavigationManagerProvider

Implement this interface on a class that will be passed as NavigationParameter and you will get injected with a INavigationManager responsible for that Navigation

INavigationInfoSubscriber

Implement this interface in your ViewModel to get passed the NavigationParameter.

NavigationCommand<T>

A NavigationCommand is just a DelegateCommand<T> BUT it implements the INavigationManagerProvider interface. When used as a NavigationParameter it will hold the instance of the INavigationManager so that you can do things such as Closing a navigation. We will see the NavigationCommand<T> being used in the first scenario below.

Scenario 1

Let’s say you have a dialog that shows some settings and when you are done you want to get those settings back to the original ViewModel that “started” the navigation to the Settings screen. Here are a couple of screen shots for such a scenario.

In order to do this we need the MainViewModel to expose a NavigationCommand<T>

and the Execute handler for this would be something like this

We will revisit the code inside the Execute Handler in a bit**…

Now we can specify that the NavigationParameter is this command so that the SettingsViewModel can execute this command when it is done and give us the ApplicationSettings object instance.

The Settings ViewModel implements the INavigationInfoSubscriber thus it will get injected with the NavigationCommand that we are passing to it via the NavigationParameter attached property

Once the Settings ViewModel calls the Execute on the _onSettingChangedCommand it will invoke the method inside the MainViewModel (OnSettingChangedExecuted) passing the new ApplicationSettings.

**One thing to note is that the MainViewModel is also calling CloseNavigation on the NavigationManager of the NavigationCommand. This is so that as soon as its done applying the new settings the Settings screen disappears.

Download the sample and play around with it to get a better feel of how this all works together (its under Samples/TestNavigation)

Scenario 2

Let’s say you have a sort of Wizard Step by Step UI.

In this case we want to chain the Navigation so that the CreateUserProfileViewModel send the UserProfile not to the MainViewModel (the ViewModel that started the Navigation) but to the ViewModel next in the chain i.e. the RenderUserProfileViewModel.

In order to do so both “Invokers” (i.e. the button for the CreateUserProfile and the button for the RenderUserProfile) must have the same navigation “invoker”. You do so by explicitly setting the NavigationHander attached property (this is an attached property that exposes the Navigation handler for an “invoker”).

Ok so now we have both “invokers” using the same NavigationHandler; because of this we can register to the NavigatingAway event of the INavigationManager inside the CreateProfileViewModel and pass the data we want to the RenderUserProfileViewModel (which is the NewNavigationInfoSubsciber in the NavigationEventArgs passed by the event)

So basically the CreateUserProfileViewModel (Step 1) could pass along data to RenderUserProfileViewModel (Step 2) and you can continue chaining like this one step after another.

NOTE: For Silverlight you instead of using the NavigationExtensions.NavigationHandler use the NavigationExtensions.ChainToElement and specify the other button (this is because there are issues around binding to custom attached properties in SL). This approach can also be used in WPF.

Download the sample and play around with it to get a better feel of how this all works together (its under Samples/TestNavigation)

Conclusion

One thing I love about this Extension is that it enables you to use View-First approach to MVVM in nearly any scenario. Yes granted sometimes its better to have ViewModel-First approach but in my experience if you can always work using View-First life becomes much more easy because your code is more loosely coupled. In fact this is one of the things I love about MVC and Web in general… Controllers never reference each other, A View has a controller and thats it. In MVVM we tend to complicate things by having Parent ViewModels that have Child ViewModels yada yada yada… just my 2 cents…

This is all still work in progress, it needs more testing from my end to make sure there are no side effects such as memory leaks etc yet feel free to poke around and play around with it. As always feedback/bug reports are very welcome.

Download the code from http://mefedmvvm.codeplex.com/SourceControl/list/changesets

Mole also have some really cool WPF only features such as Visual tree and Logical tree visualization. You can search for a specific object in the object graph… I am not gonna say much more because all this info is already on the Mole site. Go and have a go with it….

Once you go Mole you never go back

http://www.molosoft.com/

Easy have the ViewModel Y expose the command as a property just like you would have it for binding from the View, but also add an Export attribute on the property and give it a name

Now from ViewModel X simple imports the ICommand by specifying that same name (yes you can have the string as a constant, also I would advice to use constants to avoid conflicts in strings)

MEF will automatically get the command from ViewModel Y into ViewModel X for you. This works very nicely with MEFedMVVM since MEFedMVVM resolves all ViewModels via MEF thus you do not need to do anything to resolve the ViewModel or anything. You simply decorate the properties for Export and Import and viola you can start drinking beer

Happy coding