Expand / Collapse Button in Silverlight DataGrid

Question

I am using a RowDetailsTemplate in a Silverlight DataGrid to show row details. Setting RowDetailsVisibilityMode = "VisibleWhenSelected" does not give a good user experience (only one line can be expanded at a time, all lines cannot be collapsed). What is the easiest way to add an expand / collapse button to each row so that you can expand or collapse the rows yourself?

Answer 1

I mean, to write my solution for this. I set the RowDetailsVisibilityMode grid to Collapsed and used a DataGridTemplateColumn with a stylized ToggleButton to toggle row visibility.

A toggle button can be connected to toggle row visibility using bindings or through TriggerAction.
The binding should be done in code as you are trying to bind ToggleButton.IsChecked to an element that is generated and does not exist in XAML (DataGridRow.DetailsVisibility) (This will be resolved in SL5 with a stronger RelativeSource binding)

For both solutions, I have this extension method in the helper class:

    /// <summary>
    /// Walk up the VisualTree, returning first parent object of the type supplied as type parameter
    /// </summary>
    public static T FindAncestor<T>(this DependencyObject obj) where T : DependencyObject
    {
        while (obj != null)
        {
            T o = obj as T;
            if (o != null)
                return o;

            obj = VisualTreeHelper.GetParent(obj);
        }
        return null;
    }

For the code binding method:

    private void ToggleButton_Loaded(object sender, RoutedEventArgs e)
    {
        ToggleButton button = sender as ToggleButton;
        DataGridRow row = button.FindAncestor<DataGridRow>();  //Custom Extension
        row.SetBinding(DataGridRow.DetailsVisibilityProperty, new Binding() 
        {   
            Source = button, 
            Path = new PropertyPath("IsChecked"), 
            Converter = new VisibilityConverter(), 
            Mode = BindingMode.TwoWay 
        });
    }

For the TriggerAction method:

public class ExpandRowAction : TriggerAction<ToggleButton>
{
    protected override void Invoke(object o)
    {
        var row = this.AssociatedObject.FindAncestor<DataGridRow>();
        if (row != null)
        {
            if (this.AssociatedObject.IsChecked == true)
                row.DetailsVisibility = Visibility.Visible;
            else
                row.DetailsVisibility = Visibility.Collapsed;
        }
    }
}

Then in XAML:

<sdk:DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ToggleButton Style="{StaticResource PlusMinusToggleButtonStyle}" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <behaviors:ExpandRowAction/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ToggleButton>
    </DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>