Derik Whittaker



Leveraging your XAML MVVM Skills in HTML – Changing UI Apperances

This is a multi-part excerpt series from my PluralSight course Knockout for the XAML Developer 


Knockout for the XAML Developer

The Knockout for the XAML developer course helps XAML developers, whether you’re a WPF or Silverlight developer, take their existing MVVM skills and transition them to the exciting world of HTML development.

This series is going to be broken down into 6 parts and should be enough show you show you can leverage your existing MVVM Skills you acquired while building XAML based and apply those to building HTML application with Knockout JS

Series Table of Context

  1. Setting up the Data Context
  2. Working with Observable Properties
  3. Working with Observable Arrays
  4. Handling User Click Events
  5. Handling Binding Context Changes
  6. Changing UI Appearances based on Bindings (this post)

Anytime you build an application which has any type of visual complexity you are going to have the need to change the look and feel of UI elements based on data values.  Your need may be as simple as needing to show or hide elements.  It could also be as complicated as completely changing the appearance of the element. 

When building applications in HTML w/ Knockout we can accomplish both of these needs in very similar ways ways to how XAML accomplishes these.

How to change Visibility State:

When working with a XAML application you can change an elements visibility by setting the Visibility attribute of an element to either Collapsed or Visible.  Typically this is done via some sort of converter, normally one which converts a boolean to either visible or collapsed.  The code below is an example of how this may look in a XAML application


When working with HTML and Knockout we can accomplish the exact same result but with less code.  The reason we can use less code is because unlike XAML, Knockout uses a boolean to toggle state by default.  In fact to set an element’s visible state we simply need to use the visible binder as seen below


When you compare the 2 options above you can see that the intent is exactly the same and their implementation is almost as well.

How to change an Elements Appearance:

When working XAML we have the ability to define the look and feel as an external style.  We can then use binding and converters to dynamically apply a different style based on some setting.  The code below will illustrate how to do this.


You can see in the example above I am binding the Status.Description value to the Style attribute.  We are then are using a external converter to dynamically apply the style. 

When working with HTML and Knockout we can accomplish this same task by using the css binder.  See below for an example.


If you look at the example above, what we are doing is attempting to apply the ‘overdue’ css style to our element based on the evaluation of the bound Status property.  If this returns true our CSS will be applied to the element, if false it will not be applied.  Although CSS and Styles in XAML are not a 1 to 1 match they do expose the same basic concept, which is to apply styling information to a UI element.

If you want to learn more about how your XAML MVVM skills transfer to HTML Development watch my Pluralsight Course – Knockout for the XAML Developer

Till next time,

Posted 11-12-2013 8:34 AM by Derik Whittaker



Jason Haley wrote Interesting Finds: November 13, 2013
on 11-13-2013 7:30 AM

Interesting Finds: November 13, 2013

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)