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

问题描述

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

解决方案

我的意思是博客我的解决方案。
我将网格RowDetailsVisibilityMode设置为折叠，并使用带有样式的ToggleButton的DataGridTemplateColumn来切换行的可见性。

可以使用切换按钮进行连接，以使用绑定或通过TriggerAction切换行的可见性。

必须在代码中完成绑定，因为您尝试将ToggleButton.IsChecked绑定到生成并且不存在于XAML（DataGridRow.DetailsVisibility）中的元素
（这将在SL5中允许使用更强的RelativeSource绑定）

对于这两种解决方案，我有一个助手类的扩展方法：

  ///< ;摘要> 
 ///走上VisualTree，返回类型参数
 ///< / summary>提供的类型的第一个父对象。 
 public static T FindAncestor< T>（此DependencyObject obj）其中T：DependencyObject 
 {
 while（obj！= null）
 {
 T o = obj as T; 
 if（o！= null）
 return o; 
 
 obj = VisualTreeHelper.GetParent（obj）; 
} 
返回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中： p>

 < sdk：DataGridTemplateColumn.CellTemplate> 
< DataTemplate> 
< ToggleButton Style ={StaticResource PlusMinusToggleButtonStyle}> 
< i：Interaction.Triggers> 
< i：EventTrigger EventName =点击> 
< acts：ExpandRowAction /> 
< / i：EventTrigger> 
< / i：Interaction.Triggers> 
< / ToggleButton> 
< / DataTemplate> 
< / sdk：DataGridTemplateColumn.CellTemplate> 
  

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?

解决方案

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.

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

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

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屋！