MVVM, Silverlight »

[26 Feb 2010 | 1 Comments]

One of the more common problems (or rather: challenges :)) you’ll run in to when working with the MVVM design pattern is binding from a DataTemplate of an ItemsControl to a command defined on your ViewModel.  For example: you might have a ListBox filled with items, and you want a button in every ListBox item which, on click, should execute a command (delete the item, for example).

 

When you look around the internet, you’ll find a few possible solutions to this problem.  One “easy” one is to simply define a command in each item of the collection you’re binding the ListBox to: as each ListBox item’s DataContext is exactly one item, each DataContext contains a command, so you can bind to it.  Needless to say, this is not the way to go (do you really want a separate command, or a reference to a common command, in each ListBox item?).

 

Another common solution (and a much better one) is using RelativeSource bindings.  You can find a few posts on that on the Silverlight forum and on CodeProject.  As you might notice while looking for info on that: it used to be a WPF-only feature, but it is now supported in Silverlight.  You can find the MSDN page on it here.

 

While that works, there’s actually a much, much easier solution: Element Binding.

 

Take this piece of code:

 

  1. <ItemsControl ItemsSource="{Binding MenuItems}" Grid.Column="1" >
  2.             <ItemsControl.ItemsPanel>
  3.                 <ItemsPanelTemplate>
  4.                     <StackPanel Orientation="Horizontal"></StackPanel>
  5.                 </ItemsPanelTemplate>
  6.             </ItemsControl.ItemsPanel>
  7.             <ItemsControl.ItemTemplate>
  8.                 <DataTemplate>
  9.                     <Button Width="50" Height="50" Content="{Binding Label}"
  10.                             Margin="15">
  11.                         <ToolTipService.ToolTip>
  12.                             <TextBlock Text="{Binding Description}"></TextBlock>
  13.                         </ToolTipService.ToolTip>
  14.                             <i:Interaction.Triggers>
  15.                                 <i:EventTrigger EventName="Click">
  16.                                     <rdmvvm:CommandTriggerAction
  17.                                         Command="{Binding DataContext.ShowView, ElementName=LayoutRoot}"
  18.                                         CommandParameter="{Binding Uri}" />
  19.                                 </i:EventTrigger>
  20.                         </i:Interaction.Triggers>
  21.                     </Button>
  22.                 </DataTemplate>
  23.             </ItemsControl.ItemTemplate>
  24.         </ItemsControl>

 

This is from a project I’m currently working on: the MenuViewModel defines a command, ShowView, which accepts a parameter (the Uri a button click should navigate to).  The menu consists of a (variable, depending on the profile of who logs in) list of buttons, which is created by binding a list of MenuItems to an ItemsControl defined on the View. 

 

So, how do you get the button click event bound to the command defined on your ViewModel?  All my views have a root Grid, LayoutRoot.  As the Views’ DataContext is the ViewModel, the DataContext of LayoutRoot is that same ViewModel – which contains the defined command.  Through element binding, I can now easily bind the command to my ListBox Item, as you can see in the provided code example.

 

I can’t share the complete code this time (that would require sharing most of the internal libraries for MVVM etc we’re using, and would probably violate numerous NDA’s/intellectual property rights :)), but I hope the code sample I provided helps some of you out. 

 

Happy coding! :)

 

General, .NET, Silverlight »

[10 Feb 2010 | 2 Comments]

As some of you might know, a new RC has just been released for VS2010 – it’s supposed to be much more stable and faster than the second beta.  However, as of now, there’s no Silverlight 4 support, we’ll have to wait for a new release of the Silverlight assemblies.  Which means those of you – including me – who use Visual Studio 2010 for Silverlight 4 development are stuck with the beta for now.

 

And the beta isn’t exactly crash-prone, especially in combination with Silverlight.  However, there are a few things you can do to improve your experience.  One of them comes down to disabling the Highlight References feature, which I just read about on the design-time writer’s block

 

I would like to add another tip to that, which greatly reduced the number of crashes (not just on startup, but throughout development) for me: start up Visual Studio 2010 beta 2 without the splash screen, by using devenv.exe /nosplash.

 

Hope these few tips help some of you out!

General, Silverlight »

[4 Feb 2010 | 2 Comments]

Hi there!  After long consideration, I decided to move away from my old blogger blog, buy a domain, ASP .NET webhosting, and start using BlogEngine .NET for a new, updated blog.  Which is what you are looking at right now ;-)

 

Why BlogEngine .NET?  Well, mainly because I’ve heard good things about it, and, as I’m a .NET programmer, I can change it if something doesn’t exactly suit my needs.  Next to that, there’s very nice integration with Windows Live Writer, which is what I use to write my blog posts. 

 

I’d like to give a quick shoutout to Aaron Lech, whose post on exporting blogger blog posts to import them into BlogEngine was really, really helpful.

 

Anyway, I hope you like the new look (I might change it around a bit here and there – and I nice logo wouldn’t be a bad idea either ;-)) - feel free to stick around.