Expander performance in listview

[DaRochaRomain]

Using a ListView with thousand of items, and grouping them in an expander cause massive cpu usage, with UI freeze. Removing the expander style seems to fix the issue. What could be the cause of this issue?

[jespersh]

I use a DataGrid with expanders and I don't remember how I fixed my issues, but I suspect you can use some of the same things I added:

<Datagrid
...
  EnableRowVirtualization="True"
  VirtualizingPanel.IsVirtualizingWhenGrouping="True"
  VirtualizingPanel.CacheLengthUnit="Item"
  VirtualizingPanel.CacheLength="2"
  VirtualizingStackPanel.ScrollUnit="Pixel"
...>
  ...
    <DataGrid.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GroupItem}">
                                <Expander IsExpanded="True">
                                    <Expander.Header>
                                        <DockPanel>
                                            <TextBlock Style="{StaticResource MaterialDesignBody2TextBlock}"
                                                       Text="{Binding Path=Name}" />
                                        </DockPanel>
                                    </Expander.Header>
                                    <Expander.Content>
                                        <StackPanel>
                                            <ItemsPresenter />
                                            ...
                                        </StackPanel>
                                    </Expander.Content>
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </DataGrid.GroupStyle>
   ...
</DataGrid>

[DaRochaRomain]

Sorry, but I didn't find anything that could solve my issue with your code.

[DaRochaRomain]

The dockpanel helps a little, but it's still freezing when using the scrollbar.

[DaRochaRomain]

Spent some time trying to fix this issue. The template was the culprit. The visual state transitions and converters caused too much computing for little changes.

<ControlTemplate x:Key="ExpanderControlTemplate"
                     TargetType="Expander">
        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
            <DockPanel Background="{TemplateBinding Background}">
                <ToggleButton Name="HeaderSite"
                              Focusable="False"
                              IsTabStop="False"
                              DockPanel.Dock="Top"
                              BorderThickness="0" Cursor="Hand"
                              IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                              Style="{StaticResource MaterialDesignExpanderDownHeaderStyle}"
                              TextElement.FontSize="15"
                              Opacity=".87"
                              Foreground="{TemplateBinding Foreground}"
                              Content="{TemplateBinding Header}"
                              ContentTemplate="{TemplateBinding HeaderTemplate}"
                              ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                              ContentStringFormat="{TemplateBinding HeaderStringFormat}" />
                <Border Name="ContentSite"
                        DockPanel.Dock="Bottom"
                        Visibility="Collapsed">
                    <StackPanel Name="ContentPanel"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentPresenter Name="PART_Content" Focusable="False"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                          ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
                    </StackPanel>
                </Border>
            </DockPanel>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsExpanded" Value="true">
                <Setter Property="Visibility" TargetName="ContentSite" Value="Visible"/>
            </Trigger>
            <Trigger Property="ExpandDirection" Value="Right">
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left" />
                <Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Right" />
                <Setter Property="Orientation" TargetName="ContentPanel" Value="Horizontal" />
                <Setter Property="Height" TargetName="ContentPanel" Value="Auto" />
                <Setter Property="Style" TargetName="HeaderSite"
                        Value="{StaticResource MaterialDesignExpanderRightHeaderStyle}" />
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Left">
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right" />
                <Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Left" />
                <Setter Property="Orientation" TargetName="ContentPanel" Value="Horizontal" />
                <Setter Property="Height" TargetName="ContentPanel" Value="Auto" />
                <Setter Property="Style" TargetName="HeaderSite"
                        Value="{StaticResource MaterialDesignExpanderLeftHeaderStyle}" />
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Up">
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom" />
                <Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Top" />
                <Setter Property="Orientation" TargetName="ContentPanel" Value="Vertical" />
                <Setter Property="Width" TargetName="ContentPanel" Value="Auto" />
                <Setter Property="Style" TargetName="HeaderSite"
                        Value="{StaticResource MaterialDesignExpanderUpHeaderStyle}" />
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Down">
                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Top" />
                <Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Bottom" />
                <Setter Property="Orientation" TargetName="ContentPanel" Value="Vertical" />
                <Setter Property="Width" TargetName="ContentPanel" Value="Auto" />
                <Setter Property="Style" TargetName="HeaderSite"
                        Value="{StaticResource MaterialDesignExpanderDownHeaderStyle}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

[Keboo]

@DaRochaRomain can you retest with the latest 3.0.0 NuGet package. I redid the way the expander works and think that it might help address this problem.

[DaRochaRomain]

I just gave a try and it's still freezing or slow.

Applying the control template still solve this issue.

[Tyrrrz]

Thanks a lot for that template snippet @DaRochaRomain, that helped me immensely.

[Tyrrrz]

FYI, @DaRochaRomain style no longer works in v4.0 because the following styles are now missing:

• MaterialDesignExpanderDownHeaderStyle
• MaterialDesignExpanderRightHeaderStyle
• MaterialDesignExpanderLeftHeaderStyle
• MaterialDesignExpanderUpHeaderStyle

Edit: it seems the styles were just renamed.

• MaterialDesignExpanderDownHeaderStyle and MaterialDesignExpanderUpHeaderStyle are now MaterialDesignHorizontalHeaderStyle
• MaterialDesignExpanderLeftHeaderStyle and MaterialDesignExpanderRightHeaderStyle are now MaterialDesignVerticalHeaderStyle