Core Series Part 1 – XamlingCore – a cross platform MVVM framework for Silverlight

Get the code from Codeplex

Well I’m the first to admit I’ve been rather slack with my blog lately! It’s for good reason I promise!

We’ve started a new business (Xamling) which is running nicely now, with three or four decent sized projects behind us now. Oh, if you think our site is a little plain, there is a new site coming soon!

It’s been mega busy the last couple of months, two of our big projects have been Windows Phone 7 launch apps for *big* companies – explaining my lack of blogging!

But it’s not all bad…

XamlingCore!

I was tasked a while ago with building a demo for Remix Australia using MS Surface, Phone 7, desktop and touch based slate PC’s. It was a very big job, and that was without the 20 (yes twenty) day time limit!

With this in mind, I had to re-think the way I build applications. The tech included Silverlight, WPF (with Surface SDK) and Silverlight for Windows Phone 7…

The framework has since been used in a range of production projects in Silverlight desktop and WP7…

The end result is a little framework called XamlingCore which allows you to build MVVM based applications on all these platforms very quickly and simply.

It’s doesn’t have all the bells and whistles of other MVVM frameworks, but XamlingCore has pragmatism at it’s heart – think of it as the pragmatic MVVM framework. In fact, we suggest using something like MVVM light for most of the base level MVVM stuff, like commanding and event aggregation etc – in conjunction with XamlingCore… why re-invent the wheel.

Whaaaa?

At it’s most basic level, XamlingCore is a set of classes coupled with convention to allow simple view selection and navigation. It’s a lot more than that, but that is it’s most important feature. This series of posts will demonstrate the various abilities of the framework.

One of the biggest problems facing a good MVVM framework is how to perform view selection. Another problem facing MVVM frameworks is that they must be simple enough to pass off to “end” developers. XamlingCore addresses these two issues. It’s extremely easy to use, and makes developing multi view applications extremely simple.

View Selection?

One of the tricky bits with MVVM is what is view selection / pairing them up with a ViewModel. Some call it the “triad” – the Model – View – ViewModel triad process. This process can be difficult to understand…

Normally in applications, the developer will decide they want to show View X, lets for example use a Login screen. In MVVM, the login screen will need a ViewModel, which will expose properties that the View (Login.xaml) will databind to. The process needs to somehow address:

  • Creation of a view
  • Creation of a view model
  • Pass in parameters to the view model
  • Join the view to the view model
  • Navigate to the view (once it is ready)
  • Some how transition to the new view (slide, 3d spinny thingo etc.)
  • Navigate back
  • Plus a whole lot more

So, there is a built in navigation framework in Silverlight and WP7 SDK’s right? Yes… but…

The navigation framework I’m referring to here only allows the developer to navigate to a URI, which points to a XAML file. It’s difficult/un-intuitive to then pair up the ViewModel… especially when you start navigating around a complex application (like navigating back etc). It also precludes you from a few “tricks” to make your dev effort even easier.

Separation of concerns

Any good developer will tell you separation of concerns is very important. In Silverlight, two such concerns are the View and the ViewModel. Each have very different semantics.

The idea in XamlingCore is to draw a very thick line between these two areas – let the view side worry about what to show, and let the ViewModel side worry about itself. It might not be immediately obvious what we mean by this, so read on :)

ViewModel first versus View first navigation

We briefly mentioned above the navigation framework in Silverlight – this is a view first scenario… you select the view to navigate to. Selecting a view kicks off the navigation process.

In XamlingCore, you select (create) a ViewModel then navigate to it… strange? Maybe at first – until you see how the view side is configured to handle this. The view side consists of a “NavigationFrame” which takes the selected ViewModel and automatically picks up which XAML file to show (creating it in the process).

This allows you to code in your ViewModel agnostically (i.e. pretty much ignore the view) – at the same time creating a really strong workflow with sample data etc for designers is very easy too. You can create Views and ViewModels very quickly and easily

This series of posts will go through how to get XamlingCore up and running, and show you how it can help you in your development effort. Most of the series will be screen cast based, with some text articles.

For now, check out XamlingCore on Codeplex – review the FlickrSample application to get started… first video coming very soon!

About these ads

5 Responses to Core Series Part 1 – XamlingCore – a cross platform MVVM framework for Silverlight

  1. Corey Gaudin says:

    Looking forward to the video series of using it. Digging into the Flicker example to get my feet wet. But its a bigger project that focuses on alot of aspects. You really need a simpler example (think Northwind) of just navigating Orders/Products to dumb it down more to help reach a wider audience. It is quite a bit more different than the MVVM Light toolkit terms of approach. I am really liking the ViewModel first approach here. Can you display multiple Views at once? Or load a view into section? (Maybe through Databinding its content?)

    • Jordan says:

      Hey Corey,

      Thanks for your encouragement. You are right, the demo app is a bit full on.

      I will work on some far simpler examples as part of the post series.

      You can most definitely do sub frame navigation (to unlimited depth)… Each frame has its own navigation service too, so its nice and easy to navigate around.

      Cheers,

      Jordan.

  2. Jordan says:

    BTW – the navigation frame is a content control that checks the content type then uses an instance of IContentTemplateSelector to find the view (DataTemplate). You can also explicitly state which datatemplates to use by inheriting from ContentTemplateSelectorBase and calling the Register method (passing in the VM as the generic and DataTemplate name as the string parameter).

  3. [...] XamlingCore, that was developed by Jordan to make all of this possible has been documented over on his blog and has been open sourced over [...]

  4. [...] This is the second part of my series on a different approach to MVVM. I highly recommend you read part one to get some [...]

Follow

Get every new post delivered to your Inbox.

Join 32 other followers

%d bloggers like this: