It’s been a while since the last time I published some useful code sample. I apologize!
Today I found what I qualify as a bug in Silverlight 4.0. Those who know me are aware that I’m working on a big Silverlight project for about a year now. As you also know I’m a big fan of patterns and for Silverlight, the obvious one is MVVM.
Every pattern has its own standard and often its own framework. With MVVM the omnipresent framework feature is Databinding. In XAML, Databinding is really powerful. Of course Silverlight doesn’t have all the power WPF has but almost. I’m already used to deal with the limitation of Silverlight binding and the lack of Markup extension for example. But today I it a wall with something I didn’t expect, data binding to the SelectedItems property of a ListBox.
If you look closely at ListBox’s properties you will find that almost all of them are DependencyProperty except for SelectedItems (don’t miss the “s”). SelectedItem (without an “s”) is a ok but not SelectedItems. Why? I suppose its was forgotten.
How to fix that? I found many complex implementation of solution to solve this issue but I didn’t found one I was satisfied with. When trying to debug this “bug” I realized that if I inspect the content of the SelectedItems property in the debug view then the binding was working. So I came up with a solution around that strange side effect.
First let’s try to reproduce the problem. The first thing you need to do is to create a new Silverlight application. Accept all the default, it doesn’t matter. Next put this code in the MainPage.xaml
<UserControl x:Class="ListBoxSelecteItemsBug.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:fix="clr-namespace:ListBoxSelecteItemsBug"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid x:Name="LayoutRoot"
Background="White">
<StackPanel Orientation="Vertical">
<ListBox x:Name="myListBox"
Height="200"
SelectionMode="Extended"
ItemsSource="{Binding MyItems}" />
<Button Content="Click me"
Command="{Binding DoItCommand}"
CommandParameter="{Binding SelectedItems, ElementName=myListBox}" />
<Button Content="Make it work"
Click="ButtonBase_OnClick" />
</StackPanel>
</Grid>
</UserControl>
Notice the “CommandParameter” binding at line 22 binding to “SelectedItems” on “myListBox”. Then Put the following code in the MainPage.xaml.cs (code behind).
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Input;
namespace ListBoxSelecteItemsBug
{
public partial class MainPage : UserControl
{
private readonly ICommand _doItCommand = new MyCommand();
private readonly ObservableCollection<string> _myItems = new ObservableCollection<string>();
public MainPage()
{
_myItems.Add("test1");
_myItems.Add("test2");
_myItems.Add("test3");
_myItems.Add("test4");
_myItems.Add("test5");
_myItems.Add("test6");
_myItems.Add("test7");
InitializeComponent();
DataContext = this;
}
public ICommand DoItCommand
{
get { return _doItCommand; }
}
public ObservableCollection<string> MyItems
{
get { return _myItems; }
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
MessageBox.Show(string.Format("{0} actual selected items", myListBox.SelectedItems.Count));
}
}
public class MyCommand : ICommand
{
#region ICommand Members
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
var list = (ICollection<object>) parameter;
MessageBox.Show(string.Format("{0} items selected", list.Count()));
}
public event EventHandler CanExecuteChanged;
#endregion
}
}
For simplicity purpose I put everything in the same file but wouldn’t do that normally.
The concept here is simple. If you run this application you will see a ListBox with 7 items in it. You can select one or more of these items and click on “Click me” button. If you do that you should see a popup with “0 items selected” displayed. This proves that the “SelectedItems” is not working. Now if you click on “Make it work” button you should see the actual number of item you have selected previously. Now click again on “Click me” and the number should also be right.
What happened in this sequence of event is simple. The first time you click on “Click me” button you see the initial binding value of number of “SelectedItems” which is 0. The next time you click on it will display the right number because accessing “SelectedItems” outside of data binding seems to refresh its value.
How can we trigger that refresh automatically? With an attached property.
Now add a new file to the Silverlight project call it ListBoxFix and paste it this content:
using System.Windows;
namespace ListBoxSelecteItemsBug
{
public static class ListBoxFix
{
public static bool GetSelectedItemsBinding(System.Windows.Controls.ListBox element)
{
return (bool)element.GetValue(SelectedItemsBindingProperty);
}
public static void SetSelectedItemsBinding(System.Windows.Controls.ListBox element, bool value)
{
element.SetValue(SelectedItemsBindingProperty, value);
if (value)
{
element.SelectionChanged += (sender, args) =>
{
// Dummy code to refresh SelectedItems value
var x = element.SelectedItems;
};
}
}
public static readonly DependencyProperty SelectedItemsBindingProperty =
DependencyProperty.RegisterAttached("FixSlecetedItemsBinding",
typeof(bool), typeof(FrameworkElement), new PropertyMetadata(false));
}
}
The key here is the line 20. The only thing it does is accessing the “SelectedItems”. The last thing to do is to use that AttachedProperty in our ListBox:
<ListBox x:Name="myListBox"
Height="200"
fix:ListBox.SelectedItemsBinding="True"
SelectionMode="Extended"
ItemsSource="{Binding MyItems}" />
Doing that, triggers the binding to be refreshed and everything should work.
Posts
