Search code examples
c#wpfxamlexpanderuwp

Performance of ExpanderView is bad on expanding (XAML + UWP)

I'm building an UWP app that uses the a ported version of the ExpanderView of WPF (ExpanderRT on Codeplex), I use a ListBox to show multiple ExpanderViews depending on my the data from my ViewModel. I'm facing a performance issue on expanding an ExpanderView with many items. As you can see in the GIF the first parent expands very slowly and takes some time to show all the child items. If a parent has not as many childs the animation is quite smooth.

Has anyone experience with this control and can help me to make the expanding faster?

This is my XAML Code:

        <Grid>
    <ListBox Name="listbox">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate x:DataType="models:Parent">
                <controls:ExpanderControl
                    ItemsSource="{x:Bind Childs}"
                    HeaderTemplate="{StaticResource CustomHeaderTemplate}" 
                    ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
                    ItemTemplate="{StaticResource CustomItemTemplate}"
                    NonExpandableHeaderTemplate="{StaticResource CustomNonExpandableHeaderTemplate}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

This code is from the Model

public class Category
{
    public string Name{ get; set; }
    public List<Subcategory> Childs{ get; set; }
}

Slow expanding

Solution

  • Justin XL pointed me in the right direction! This behaviour is caused by the animation of the ExpanderView.

    In the class ExpanderControl.cs there are these properties to control the animation of the collapsing and expanding process.

        private const int KeyTimeStep = 35;
    private const int InitialKeyTime = 225;
    private const int FinalKeyTime = 250;

    Decreasing the value of the KeyTimeStep leads to a faster expanding and collapsing animation.

    Thanks!