Keith's Blog

Making multiple selection in a DataGrid bindable

2009-10-02T04:08:00Z

A customer recently asked how to change the selection of a row in the Silverlight 3 DataGrid based on the values of the columns. The brief answer is to add an event handler for LoadingRow and call dataGrid.SelectedItems.Add(e.Row.DataContext), but the customer did mention that he was using M-V-VM and that got me thinking. The selection state of a DataGrid should be pulled from the model, not calculated as part of the UI processing when the row gets loaded. The DataGrid supports this concept for single-item selection because DataGrid.SelectedItem is data-bindable. The problem is that DataGrid.SelectedItems is pre-populated with an internal collection which implements IList (the return type of DataGrid.SelectedItems). I turned to using attached properties - the trusty duct-tape of Silverlight - to fill the gap.

Below is the C# code for a class containing an attached property called SelectedItemsSource which can be applied to a DataGrid to keep its SelectedItems internal collection in-sync with a source list you specify. The synchronization is two-way and works with multiple DataGrid instances synced to the same source list. The only limitation is that the source list must implement IList and INotifyCollectionChanged. Disclaimer: This plays nice for the most part if the DataGrid.ItemsSource is bound to a collection implementing ICollectionView (which handles single-item currency). In my limited testing this workaround falls down when you have multiple DataGrids with the SelectedItemsSource attached property set to the same list and ItemsSource bound to the same ICollectionView instance.

The full source for the class is dowloadable from a link at the end of the post.

using System;

using System.Collections;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Diagnostics;

using System.Windows;

using System.Windows.Controls;

namespace Samples

{

/// <summary>

/// Class providing support to faux-bind the SelectedItems for a DataGrid to an IList implementing INotifyCollectionChanged

/// </summary>

public static class DataGridMultipleSelection

{

/// <summary>

/// Used in the selectedItemsSources private registry to hold state

/// </summary>

private class DataGridsAndInitiatedSelectionChange

{

public readonly List<WeakReference> BoundDataGridReferences = new List<WeakReference>();

public bool InitiatedSelectionChange { get; set; }

}

// Use each source list's hashcode as the key so that we don't hold on

// to any references in case the DataGrid gets disposed without telling

// to remove the source list from our registry.

private static Dictionary<int, DataGridsAndInitiatedSelectionChange> selectedItemsSources = new Dictionary<int, DataGridsAndInitiatedSelectionChange>();

#region InitiatedSelectionChangeProperty

/// <summary>

/// For use only by this implementation to track if a DataGrid is the one changing the selection

/// </summary>

private static readonly DependencyProperty InitiatedSelectionChangeProperty = DependencyProperty.RegisterAttached("InitiatedSelectionChange", typeof(bool), typeof(DataGridMultipleSelection), new PropertyMetadata(false));

/// <summary>

/// Accessor to get the InitiatedSelectionChange DependencyProperty

/// </summary>

private static bool GetInitiatedSelectionChange(DataGrid element)

{

return (bool)element.GetValue(DataGridMultipleSelection.InitiatedSelectionChangeProperty);

}

/// <summary>

/// Accessor to set the InitiatedSelectionChange DependencyProperty

/// </summary>

private static void SetInitiatedSelectionChange(DataGrid element, bool value)

{

element.SetValue(DataGridMultipleSelection.InitiatedSelectionChangeProperty, value);

}

#endregion

#region SelectedItemsSourceProperty

/// <summary>

/// Holds an IList implementing INotifyCollectionChanged to use as an items source for DataGrid.SelectedItems

/// </summary>

public static readonly DependencyProperty SelectedItemsSourceProperty = DependencyProperty.RegisterAttached("SelectedItemsSource", typeof(INotifyCollectionChanged), typeof(DataGridMultipleSelection), new PropertyMetadata(null, SelectedItemsSourceChanged));

/// <summary>

/// Accessor to get the SelectedItemsSource DependencyProperty

/// </summary>

public static INotifyCollectionChanged GetSelectedItemsSource(DataGrid element)

{

return element.GetValue(DataGridMultipleSelection.SelectedItemsSourceProperty) as INotifyCollectionChanged;

}

/// <summary>

/// Accessor to set the SelectedItemsSource DependencyProperty

/// </summary>

public static void SetSelectedItemsSource(DataGrid element, INotifyCollectionChanged value)

{

element.SetValue(DataGridMultipleSelection.SelectedItemsSourceProperty, value);

}

/// <summary>

/// Updates the items source registry when the SelectedItemsSource for a DataGrid changes

/// </summary>

private static void SelectedItemsSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)

{

DataGrid dataGrid = sender as DataGrid;

IList selectedItemsSource = null;

// Check if the app is setting the source to a new or different list, or if it is removing the binding

if (args.NewValue != null)

{

selectedItemsSource = args.NewValue as IList;

if (selectedItemsSource == null)

{

throw new ArgumentException("The value for SelectedItemsSource must implement IList.");

}

INotifyCollectionChanged collection = args.NewValue as INotifyCollectionChanged;

if (collection == null)

{

throw new ArgumentException("The value for SelectedItemsSource must implement INotifyCollectionChanged.");

}

// Don't add the event handler if the DataGrid is not setting its SelectedItemsSource for the first time

if (args.OldValue == null)

{

// Sign up for changes to the DataGrid's selected items to enable a two-way binding effect

dataGrid.SelectionChanged += UpdateSourceListOnDataGridSelectionChanged;

}

// Track this DataGrid instance for the specified source list

DataGridsAndInitiatedSelectionChange sourceListInfo = null;

if (DataGridMultipleSelection.selectedItemsSources.TryGetValue(selectedItemsSource.GetHashCode(), out sourceListInfo))

{

sourceListInfo.BoundDataGridReferences.Add(new WeakReference(dataGrid));

}

else

{

// This is a new source collection

sourceListInfo = new DataGridsAndInitiatedSelectionChange() { InitiatedSelectionChange = false };

sourceListInfo.BoundDataGridReferences.Add(new WeakReference(dataGrid));

DataGridMultipleSelection.selectedItemsSources.Add(selectedItemsSource.GetHashCode(), sourceListInfo);

// Sign up for changes to the source only on the first time the source is added

collection.CollectionChanged += UpdateDataGridsOnSourceCollectionChanged;

}

// Now force the DataGrid to update its SelectedItems to match the current

// contents of the source list

sourceListInfo.InitiatedSelectionChange = true;

UpdateDataGrid(dataGrid, selectedItemsSource, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));

sourceListInfo.InitiatedSelectionChange = false;

}

else

{

// This DataGrid is removing its SelectedItems binding to any list

dataGrid.SelectionChanged -= UpdateSourceListOnDataGridSelectionChanged;

dataGrid.SelectedItems.Clear();

}

if (args.OldValue != null)

{

// Clean up the items source that was the old value

// Remove the DataGrid from the source list's registry and remove the source list

// if there are no more DataGrids bound to it.

DataGridsAndInitiatedSelectionChange sourceListInfo = DataGridMultipleSelection.selectedItemsSources[args.OldValue.GetHashCode()];

WeakReference dataGridReferenceNeedingRemoval = null;

foreach (WeakReference dataGridReference in sourceListInfo.BoundDataGridReferences)

{

if (dataGridReference.IsAlive && (dataGridReference.Target == dataGrid))

{

dataGridReferenceNeedingRemoval = dataGridReference;

break;

}

sourceListInfo.BoundDataGridReferences.Remove(dataGridReferenceNeedingRemoval);

if (sourceListInfo.BoundDataGridReferences.Count == 0)

{

DataGridMultipleSelection.selectedItemsSources.Remove(args.OldValue.GetHashCode());

// Detach the event handlers and clear DataGrid.SelectedItems since the source is now null

INotifyCollectionChanged collection = args.OldValue as INotifyCollectionChanged;

if (collection != null)

{

collection.CollectionChanged -= UpdateDataGridsOnSourceCollectionChanged;

}

/// <summary>

/// INotifyCollectionChanged.CollectionChanged handler for updating DataGrid.SelectedItems when the source list changes

/// </summary>

private static void UpdateDataGridsOnSourceCollectionChanged(object source, NotifyCollectionChangedEventArgs collectionChangedArgs)

{

DataGridsAndInitiatedSelectionChange sourceListInfo = DataGridMultipleSelection.selectedItemsSources[source.GetHashCode()];

// For each DataGrid that is bound to this list, is alive, and did not initate selection changes, update its selection

sourceListInfo.InitiatedSelectionChange = true;

IList sourceList = source as IList;

Debug.Assert(sourceList != null, "SelectedItemsSource must be of type IList");

DataGrid dataGrid = null;

foreach (WeakReference dataGridReference in sourceListInfo.BoundDataGridReferences)

{

if (dataGridReference.IsAlive && !DataGridMultipleSelection.GetInitiatedSelectionChange(dataGridReference.Target as DataGrid))

{

dataGrid = dataGridReference.Target as DataGrid;

UpdateDataGrid(dataGrid, sourceList, collectionChangedArgs);

}

sourceListInfo.InitiatedSelectionChange = false;

}

/// <summary>

/// Helper method to update the items in DataGrid.SelectedItems based on the changes defined in the given NotifyCollectionChangedEventArgs

/// </summary>

/// <param name="dataGrid">DataGrid which owns the SelectedItems collection to update</param>

/// <param name="sourceList">IList which is the SelectedItemsSource</param>

/// <param name="collectionChangedArgs">The NotifyCollectionChangedEventArgs that was passed into the CollectionChanged event handler</param>

private static void UpdateDataGrid(DataGrid dataGrid, IList sourceList, NotifyCollectionChangedEventArgs collectionChangedArgs)

{

switch (collectionChangedArgs.Action)

{

case NotifyCollectionChangedAction.Add:

foreach (object newItem in collectionChangedArgs.NewItems)

{

dataGrid.SelectedItems.Add(newItem);

}

break;

case NotifyCollectionChangedAction.Remove:

foreach (object oldItem in collectionChangedArgs.OldItems)

{

dataGrid.SelectedItems.Remove(oldItem);

}

break;

case NotifyCollectionChangedAction.Reset:

// Unfortunately can not do the following two steps as an atomic change

// so the target list could raise multiple notifications as it gets updated

dataGrid.SelectedItems.Clear();

foreach (object item in sourceList)

{

dataGrid.SelectedItems.Add(item);

}

break;

default:

throw new NotImplementedException("Only Add, Remove, and Reset actions are implemented.");

}

/// <summary>

/// DataGrid.SelectionChanged handler to update the source list given the SelectionChangedEventArgs

/// </summary>

private static void UpdateSourceListOnDataGridSelectionChanged(object sender, SelectionChangedEventArgs selectionChangedArgs)

{

DataGrid dataGrid = sender as DataGrid;

IList selectedItemsSource = DataGridMultipleSelection.GetSelectedItemsSource(dataGrid) as IList;

Debug.Assert(selectedItemsSource != null, "SelectedItemsSource must be of type IList");

// If the source list initiated the changes then don't pass the DataGrid's changes back down to the source list

if (!DataGridMultipleSelection.selectedItemsSources[selectedItemsSource.GetHashCode()].InitiatedSelectionChange)

{

DataGridMultipleSelection.SetInitiatedSelectionChange(dataGrid, true);

foreach (object removedItem in selectionChangedArgs.RemovedItems)

{

selectedItemsSource.Remove(removedItem);

}

foreach (object addedItem in selectionChangedArgs.AddedItems)

{

selectedItemsSource.Add(addedItem);

}

DataGridMultipleSelection.SetInitiatedSelectionChange(dataGrid, false);

}

#endregion

}

Usage of the attached property is extremely simple. In the first example, the view model is assumed to be already set as the DataGrid's DataContext. The second example assumes that the view model has been instantiated as a static resource either for the App or some other container. Remember to set SelectionMode="Extended" to enable multiple selection in the DataGrid.

<data:DataGrid ... SelectionMode="Extended" samples:DataGridMultipleSelection.SelectedItemsSource="{Binding SelectedProducts}" />

<data:DataGrid ... SelectionMode="Extended" samples:DataGridMultipleSelection.SelectedItemsSource="{Binding SelectedProducts, Source={StaticResource CatalogModel}}" />

Failures in .NET RIA Services are silent by default

2009-03-19T23:57:00Z

Due to the async nature of the .NET RIA Services programming model, exceptions and errors during load and submits aren't thrown on the client. Instead, the errors are exposed through an Error property which can be found in the event args instances passed in to handlers for the Loaded and Submitted events.

So, the first thing I do whenever I create a new DomainContext instance on the client is add a simple handler for the Loaded event. If I am going to be doing submits, then I add a handler for the Submitted event.

For example,

myDomainContext.Loaded += delegate(object sender, LoadedDataEventArgs e)
{
    if (e.Error != null)
    {
        throw e.Error;
    }
};
myDomainContext.Submitted += delegate(object sender, SubmittedChangesEventArgs e)
{
    if (e.Error != null)
    {
        throw e.Error;
    }
};

Later on, I might to do more complex things on those event handlers, but at beginning using anonymous methods are just fine.

Building a dual thumb slider for Silverlight 2 Beta 1

2008-04-09T04:06:00Z

hosted by Silverlight Streaming - the source is available as an attachment at the bottom of this post.

The Slider control that shipped with the Silverlight 2 Beta 1 SDK only supports picking a single value. Back at Mix08 in March I threw together a control that allows selecting a range using two thumbs, but I haven't had a chance to talk about it until now. So, without further ado let me introduce the RangeFinder control.

[TemplatePart(Name = RangeFinder.RootElementName, Type = typeof(FrameworkElement))]

[TemplatePart(Name = RangeFinder.TrackGridElementName, Type = typeof(Grid))]

[TemplatePart(Name = RangeFinder.LeftTrackElementName, Type = typeof(Rectangle))]

[TemplatePart(Name = RangeFinder.RightTrackElementName, Type = typeof(Rectangle))]

[TemplatePart(Name = RangeFinder.LeftGridSplitterElementName, Type = typeof(GridSplitter))]

[TemplatePart(Name = RangeFinder.RightGridSplitterElementName, Type = typeof(GridSplitter))]

public class RangeFinder : RangeBase

{

/// <summary>

/// Raised when the UpperValue dependency property changes

/// </summary>

public event RoutedPropertyChangedEventHandler<double> UpperValueChanged;

/// <summary>

/// Constructor for the RangeFinder class

/// </summary>

public RangeFinder() {}

/// <summary>

/// Gets/sets the UpperValue dependency property for the upper value of the selected range

/// </summary>

public double UpperValue {get; set;}

/// <summary>

/// Gets/sets the ThumbWidth dependency property for width of the individual thumbs

/// </summary>

public double ThumbWidth {get; set;}

/// <summary>

/// Gets/sets the TrackMargin dependency property for the distance from the edges of the control that track should be displayed

/// </summary>

public Thickness TrackMargin {get; set;}

/// <summary>

/// Gets/sets the Background dependency property for the background of the control

/// </summary>

public Brush Background {get; set;}

/// <summary>

/// Gets/sets the Foreground dependency property for the foreground of the control

/// </summary>

public Brush Foreground {get; set;}

/// <summary>

/// Gets/sets the MinimumRange dependency property for the minimum allowable difference

/// between the Value and UpperValue properties

/// </summary>

public double MinimumRange {get; set;}

}

The first decision to make was whether or not I could extend the existing Slider control. I think I could have restyled the thumb by inserting a custom control that would have allowed me to expand it, but that seemed really complex. Instead, I chose to inherit directly from RangeBase and implement the UI of the control from scratch.

The Slider class uses a grid with three columns to lay out the UI. Moving the thumb actually changes the dimensions of the first and third columns. When the size of the first column changes, a rectangle in that column invokes a SizeChanged event handler which updates the Value based on the new size.

I thought that was a pretty slick approach so I borrowed the concept for RangeFinder. I had a problem though; I needed two independent values. Instead of creating a second thumb and trying to coordinate it with the first, I decided to use a control whose sole purpose in life is resizing grids - the GridSplitter.

Here is the general concept:

A three-column Grid
Two Rectangles, one filling the first column and the other filling the third.
Two GridSplitters, one aligned-right in the first column and the other aligned-left in the third.
Dragging one of the GridSplitters resizes the adjacent columns causing a rectangle in one of the columns to invoke its SizeChanged event handler which updates the Value or UpperValue property, as appropriate.
There is a little math behind the scenes to convert the value range (e.g. 1 to 100) to visual coordinates (e.g. 0 to 50 pixels).

Creating a default RangeFinder

Creating an instance of the control on a Silverlight page is very easy. The first RangeFinder shown in the example above just sticks with default colors and a Minimum of 0 and a Maximum of 1.

<local:RangeFinder x:Name="rangeFinder0" />

Seeing the RangeFinder's values

The RangeFinder isn't very fun though if you can't see what the Value and UpperValue properties actually are. Silverlight 2 Beta 1 doesn't dynamically update any UI data bound to dependency properties so you need to create a little Data Transfer Object (DTO) to fill the gap. The ValueDataObject class in the attached project serves this purpose.

/// <summary>

/// Data transport object for binding the UI to the actual values selected

/// </summary>

/// <remarks>

/// When dependency properties change in Silverlight 2 Beta 1, they do not

/// update the targets of any data binding made to those properties. One

/// way to do this is to use a data transport object that implements the

/// INotifyPropertyChanged interface as the source of the bindings as

/// demonstrated by this ValueDataObject class.

/// </remarks>

public class ValueDataObject : INotifyPropertyChanged

{

/// <summary>

/// Implementation of the INotifyPropertyChanged.PropertyChanged event

/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

/// <summary>

/// Constructor for the ValueDataObject class

/// </summary>

/// <param name="instance">RangeFinder object to associate this instance with</param>

public ValueDataObject(RangeFinder instance, string valueFormat) {}

/// <summary>

/// Gets the Value property of the associated RangeFinder object

/// </summary>

public Double Value {get; }

/// <summary>

/// Gets a formatted string for the Value property of the associated RangeFinder object

/// </summary>

public string FormattedValue {get; }

/// <summary>

/// Gets the UpperValue property of the associated RangeFinder object

/// </summary>

public Double UpperValue {get; }

/// <summary>

/// Gets a formatted string for the UpperValue property of the associated RangeFinder object

/// </summary>

public string FormattedUpperValue {get; }

/// <summary>

/// Gets/sets the string format to be used when formatting the Value and UpperValue properties

/// </summary>

public string ValueFormat { get; set; }

}

Now, you want to set up the UI to be able to show the values. I used two TextBlocks in the second RangeFinder in the example above. Note that the example code binds the Text property of the TextBlocks to the FormattedValue and FormattedUpperValue properties of ValueDataObject. This allows it to change the formatting when converting the value to a string.

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<local:RangeFinder x:Name="rangeFinder1" Grid.Column="1"

Minimum="0" Maximum="5.5" Value=".5" UpperValue="5.0" MinimumRange="1.5"

Background="DarkGray" Foreground="Brown" />

</Grid>

It was very easy to change the default Background and Foreground colors, the Minimum and Maximum properties, and the initial Value and UpperValue properties. It is also easy to set a minimum range.

One last piece is needed to hook it all up. You need to set the DataContext of some parent UI element to be an instance of ValueDataObject. In the example code this is done in the code-behind for Page.xaml.

protected override void OnApplyTemplate()

{

base.OnApplyTemplate();

this.customRangeFinderContainer.DataContext = new ValueDataObject(this.rangeFinder1, "'$'0.00");

...

}

Customizing the RangeFinder

The third RangeFinder example from above re-templates the whole RangeFinder control and re-styles the GridSplitters. Even though the TextBlocks showing the Value and UpperValue properties are part of the GridSplitter style, the ValueDataObject instance in the parent's DataContext gives them something to bind to.

<local:RangeFinder x:Name="rangeFinder2" Height="70" Width="200" VerticalAlignment="Bottom" HorizontalAlignment="Center"

Minimum="10" Maximum="90" Value="20" UpperValue="70"

Background="Green">

<local:RangeFinder.Style>

<Setter.Value>

<Grid.Resources>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</Style>

<Setter.Value>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</local:RangeFinder.Style>

</local:RangeFinder>

</Grid>

There are some things the RangeFinder sample code is missing - fancy state transitions, rock-solid coercion, and thorough testing. The code is provided as-is but feel free to party away and mutate it in to your own concoction.

Re-templating a WatermarkedTextBox

2008-04-04T21:32:00Z

Hosted by Silverlight Streaming

Ta-da! Here's a new look for the WatermarkedTextBox (a.k.a. WTB) in Silverlight 2 Beta 1. This was relatively simple to do just by changing the template.

Here is the XAML for the template:

<Grid.Resources>

<DoubleAnimation Storyboard.TargetName="DisabledVisual"