Silverlight DataGrid 中的展开/折叠按钮 [英] Expand/Collapse button in a Silverlight DataGrid

问题描述

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

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 row can be expanded at a time, all rows cannot be collapsed). What's the easiest way to add an expand/collapse button on each row so that the rows can be expanded/collapsed independently?

推荐答案

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

I've been meaning to blog my solution to this. I set the grid RowDetailsVisibilityMode to Collapsed and use a DataGridTemplateColumn with a styled ToggleButton in it to toggle the row visibility.

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

The toggle button can be wired up to toggle the row visibility using either binding or through a TriggerAction.
Binding has to be done in code-behind since you are trying to bind ToggleButton.IsChecked to an element that is generated and does not exist in XAML (DataGridRow.DetailsVisibility) (This will be allowed in SL5 with a stronger RelativeSource binding)

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

For both solutions I have this extension method in a 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 code-behind 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 
        });
    }

对于 TriggerAction 方法:

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

然后在 XAML 中:

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>

这篇关于Silverlight DataGrid 中的展开/折叠按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！