Breaking MVVM: Change the background color of a control in a LightSwitch desktop app

A couple of months ago I was faced with the following hacking challenge:

One of our entities has pairs of properties: StreetName and StreetNameAdv, City and CityAdv, Name and NameAdv, …  For each of these pairs, the screen should clearly color the background of the xx property, if the value does not match the xxAdv property.

Or, put in pixels:
fieldhighlighting

If you happen to be familiar with the LightSwitch MVVM implementation, you’ll realize this is not a walk in the park, because the controls that form the View layer are tucked away in a LightSwitch theme extension.  Trust me, that’s one area you’ll want to stay away from unless you’re really experienced with LightSwitch extensibility.

So the easier way, in this case… Is to break our MVVM layering…

[Audience gasps]

Breaking MVVM: episode one: Finding ViewModel ContentItems bound to a particular property on the Model.

This code snippet contains an extension method to track all ContentItems that are displaying a particular property.  The first step is to retrieve an IScreenPresentationView from an IScreenObject.  We do this with the help of the ScreenViewService, a class intended to help out people with their custom shells.  From there, it’s a recursive walk down the children of this root, and find out who’s displaying what.

Breaking MVVM: episode two: Finding ContentPresenters and their controls.

Once you have a ContentItem, it’s a walk in the park to get all associated presenters (the’View’ layer): call the GetAssociatedPresenters method.

Almost there.  What you have now is a bunch of IContentItemPresenters, which give you access to the Silverlight controls used by your selected LightSwitch theme via their .Visual property.  However, these Silverlight controls are usually a lot more complex than a mere ‘TextBox’ or ‘Label’ here and there.  Hence, you’ll have to take a recursive dive in the visual tree to find the real control you need to color:

Mission accomplished!  Well, these code snippets are really only the ‘helper methods’ to help you break your MVVM layering.  Depending on your needs, you’ll need some additional code.  I have a sample that demonstrates the entire thing in action.  Feel free to grab it from my skydrive!  

Keep rocking LS!

Jan

Advertisements

3 thoughts on “Breaking MVVM: Change the background color of a control in a LightSwitch desktop app

  1. Pingback: LightSwitch Community & Content Rollup–January 2014 - Beth Massi - Sharing the goodness - Site Home - MSDN Blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s