Silverlight DataGrid 中的展开/折叠按钮答案

【问题标题】：Expand/Collapse button in a Silverlight DataGridSilverlight DataGrid 中的展开/折叠按钮
【发布时间】：2011-07-11 02:24:51
【问题描述】：

我在 Silverlight DataGrid 中使用 RowDetailsTemplate 来显示行详细信息。设置 RowDetailsVisibilityMode="VisibleWhenSelected" 并不能提供良好的用户体验（一次只能展开一行，不能折叠所有行）。在每行上添加展开/折叠按钮以便可以独立展开/折叠行的最简单方法是什么？

【问题讨论】：

标签： silverlight datagrid

【解决方案1】：

我一直想在博客上写下我对此的解决方案。我将网格 RowDetailsVisibilityMode 设置为 Collapsed 并使用带有样式的 ToggleButton 的 DataGridTemplateColumn 来切换行可见性。

可以使用绑定或通过 TriggerAction 连接切换按钮以切换行可见性。
绑定必须在代码隐藏中完成，因为您尝试将 ToggleButton.IsChecked 绑定到在 XAML (DataGridRow.DetailsVisibility) 中生成但不存在的元素（这将在具有更强 RelativeSource 绑定的 SL5 中被允许）

对于这两种解决方案，我在帮助类中都有这个扩展方法：

    /// <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;
    }

对于代码隐藏绑定方法：

    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 
        });
    }

对于 TriggerAction 方法：

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;
        }
    }
}

然后在 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>

【讨论】：

谢谢。这就像一个魅力！我遇到的唯一问题是 PlusMinusToggleButtonStyle。我创建了一种切换两个图像的样式，但这不起作用。我将为此发布一个单独的问题。
无耻的自我推销：在我的网站上写博客解决方案mikeherman.net。