Expand/Collapse of a nested WPF Grid

Question

I have created a nested WPF Datagrid. I see you can expand it by clicking on the row, but it doesn't collapse when you do the same thing.

Few questions:

How can the user collapse the grid?
Is there a way to get Expand/Collapse buttons on the parent rows?
Whenever you click on a different parent to expand, it collapses the previous one you are on. Is there a way to get the grid to stay the way you make it. i.e. If I expand row 1 then go to row 3, row 1 will stay where I expanded it to.

Thanks, Greg

score 0 · Answer 1 · answered Jun 01 '12 at 12:54

0

Use WPF Expander. So that you can expand the inner DataGrid.

answered Jun 01 '12 at 12:54

Kishore Kumar

12,675
27
97
154

I tried the expander, but it looks like crap. Where do you put it? – g.t.w.d Jun 01 '12 at 13:16
you have to create a xaml style for wpf and in that you place your expander. – Kishore Kumar Jun 01 '12 at 13:24

score 0 · Accepted Answer · edited May 23 '17 at 11:49

There are couple approaches to reach such behavior. For example Expand/Collapse button in a Silverlight DataGrid.

If you prefer xaml then use:

<Style x:Key="ExpandableDataGridRowHeaderStyle"
           TargetType="sdk:DataGridRowHeader">
    <Setter Property="Background"
                Value="#99E9EEF4" />
    <Setter Property="IsTabStop"
                Value="False" />
    <Setter Property="SeparatorBrush"
                Value="#FFFFFFFF" />
    <Setter Property="SeparatorVisibility"
                Value="Collapsed" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="sdk:DataGridRowHeader">
                <Grid x:Name="Root">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>                           
                    <Border BorderBrush="#FFFFFFFF"
                                BorderThickness="1,0,1,0"
                                Grid.ColumnSpan="2"
                                Grid.RowSpan="3">
                        <Grid>
                            <Rectangle x:Name="RowInvalidVisualElement"
                                           Grid.ColumnSpan="2"
                                           Fill="#FFF7D8DB"
                                           Opacity="0"
                                           Grid.RowSpan="3"
                                           Stretch="Fill" />
                            <Rectangle x:Name="BackgroundRectangle"
                                           Grid.ColumnSpan="2"
                                           Fill="Transparent"
                                           Grid.RowSpan="3"
                                           Stretch="Fill" />
                        </Grid>
                    </Border>
                    <Button Background="{x:Null}"
                                BorderBrush="{x:Null}"
                                BorderThickness="0"
                                Padding="0"
                                Grid.RowSpan="1"
                                HorizontalAlignment="Stretch">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <AttachedBehaviors:ExpandButtonAction/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Button>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And AttachedBehavior that actually will change DetailsVisibility:

public class ExpandButtonAction : TargetedTriggerAction<FrameworkElement>
{
    #region Invoke

    protected override void Invoke(object parameter)
    {
        RoutedEventArgs eventArgs = (RoutedEventArgs) parameter;
        Button bsender = eventArgs.OriginalSource as Button;
        var row = DataGridRow.GetRowContainingElement(eventArgs.OriginalSource as FrameworkElement);
        if (row.DetailsVisibility == Visibility.Visible)
        {
            row.DetailsVisibility = Visibility.Collapsed;
        }
        else
        {
            row.DetailsVisibility = Visibility.Visible;
        }
    }

    #endregion
}

And apply this for RowHeaderStyle of DataGrid where you want to expand/collapse DetailsTemplate.

@GregoryDodd It is xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" — Anatolii Gabuza, Jun 01 '12 at 13:20
Do i have to have something installed for that? It can't find DataGridFrozenGrid. — g.t.w.d, Jun 01 '12 at 13:25
[DataGridFrozenGrid](http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.datagridfrozengrid(v=vs.95).aspx) — Anatolii Gabuza, Jun 01 '12 at 13:29
Yes, I found that. But my xaml says it can't find DataGridFrozenGrid for that namespace you provided above. I wonder if it is because I am doing WPF, not Silverlight. — g.t.w.d, Jun 01 '12 at 13:31
@GregoryDodd Updated with something pretty similar by without `DataGridFrozenGrid`. — Anatolii Gabuza, Jun 01 '12 at 13:40
Is there some SDK that has to be installed for this stuff? I can't find a reference for this: xmlns:i ="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" Can't find System.Windows.Interactivity in my reference list. — g.t.w.d, Jun 01 '12 at 13:48
SDK should be installed on your machine. Look here: http://stackoverflow.com/questions/7548780/system-windows-interactivity-could-not-load-file-or-assembly-system-windows-v — Anatolii Gabuza, Jun 01 '12 at 13:58

Expand/Collapse of a nested WPF Grid

2 Answers2