Derik Whittaker

Syndication

News


Dynamically Changing Resources in a ListBox using Binding and Converters

While working on an application targeted towards WP7 I wanted to have the application change style resource which was attached to a border element based on a value (aka a status) in my view model.  After searching around for a bit I was not able to come up w/ a complete end to end solution, only bits and pieces.  In order to help the next poor newbie I thought I would post my solution (btw, there may be a MUCH better solution than this out there).

In this sample I simply created a test application based off of the Item List Template which comes out of the box with a few minor changes.

 

Setting up the XAML

image

 

The important item to pay attention to above is the highlighted line.  This is the line which will change the border brush via the converter based on the value in the ‘Color’ property in my view model. 

Changes to the View model

image

The code above is the property I added which will allow us to trigger the border brush to determine what style to use

 

Creating the Converter

image

 

The above is a pretty standard converter which uses the IValueConverter interface.  The Part in here it pay attention to is how I am grabbing the brush resources out of the App.xaml file (there may be a better way to do this, but i could not find this).  What this code does is basically determines which loaded resource to return based on the value passed into the converter

 

Registering the Converter

image

Once you create your converter class (see above) you do need to register it in your app.xaml class.  Do do this simply follow the logic above.

 

Creating the Brush Resources

image

The code above will create the various resources needed to allow us to change the color of our item in XAML

Populating the ‘live data’

 

 

 

 

image

The default template for the Item List project has all the data hard wired in the MainViewModel class.  I simply added the above logic to populate the color properties.

 

After you put all the above together you get….

image

Notice how the little colors next to each item change, this is our doing :) Now of course this is a simple example, but it does go to prove how you can accomplish this.

Till next time,


Posted 07-24-2010 1:51 PM by Derik Whittaker
Filed under: ,

[Advertisement]

Comments

Phil Ananin wrote re: Dynamically Changing Resources in a ListBox using Binding and Converters
on 07-25-2010 9:21 AM

Why not bind directly to a brush (e.g. a SolidColorBrush) in your ViewModel? Cuts out the need for messing around with a converter then.

Karl Shifflett wrote re: Dynamically Changing Resources in a ListBox using Binding and Converters
on 07-26-2010 12:42 AM

Hi Derik,

This is going to get developers into trouble at design-time when the Cider or Blend designer is designing the form.

Referencing Application at design-time will return a null reference exception.

Suggest adding a null reference check for Application and Application.Current before accessing it in your converter.

Cheers,

Karl

Jason wrote re: Dynamically Changing Resources in a ListBox using Binding and Converters
on 07-26-2010 1:02 AM
Derik Whittaker wrote re: Dynamically Changing Resources in a ListBox using Binding and Converters
on 07-26-2010 4:30 AM

@Karl,

Thanks I will add in that logic to avoid issues at design time.

HydroMan wrote re: Dynamically Changing Resources in a ListBox using Binding and Converters
on 07-26-2010 4:38 PM

@Phil Ananin

In the MVVM world, ViewModel is not suppose to be aware of the View. Yes what you say is correct and can be done but if you are following a pattern, the best way to do is stick to it and follow its rules. Converter in this case accompishes just that. SolidColorBrush is a view centric Type and ViewModel is not suppose to care how you display the info, as long as you have the means to do it. If this ViewModel was applied to WinForms, the SolidColorBrush will be irrelevant. Also becomes anti-pattern so hence the point :)

Phil Ananin wrote re: Dynamically Changing Resources in a ListBox using Binding and Converters
on 07-28-2010 3:57 PM

@HydroMan

Okay, so I see where you're coming from. Let me rephrase your point: MVVM is concerned only with the separation of designer and developer; your point is that by defining the property as a SolidColorBrush I would be specifying a view implementation detail in my ViewModel, correct? Well, I see no difference between exposing a Brush directly and using a magic string plus a converter. The designer still always gets given a SolidColorBrush to bind to at the end of the day. Now you do have a point, which is that SolidColorBrush is the wrong thing to expose. Instead we should be exposing something like a Color for the designer to bind to. This way they can choose their own brush in their design.

Alberto Silva wrote Windows Phone 7 – Experiência para programadores (XXVII)
on 07-29-2010 1:49 PM

Mais uma levada de links relacionados com o desenvolvimento para WP7: Performance Optimization on Windows

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)