Question

I’m having trouble with performance with just 15 items in a SurfaceListBox.

The ListBox is created with source binding to my viewmodel and I’m using a ItemContainerStyleSelector, to select one of the three styles to use.
However I still have 8 ControlTemplates, since I have 4 states a dataitem can present, plus the 4, when the item is selected.

The StyleSelector is pretty simple:

public class TaskStyleSelector : StyleSelector
{
    public Style DefaultStyle { get; set; }
    public Style OverdueStyle { get; set; }
    public Style PresentStyle { get; set; }
    public Style CompletedStyle { get; set; }

    public override Style SelectStyle(object item, DependencyObject container)
    {
        var t = item as Sekoia.Karuna.Public.Models.Tasks.Task;
        if (t == null)
            return base.SelectStyle(item, container);

        if (t.Completed)
            return CompletedStyle;
        else if (t.IntervalStartTime <= DateTime.Now && t.IntervalEndTime >= DateTime.Now)
            return PresentStyle;
        else if (t.IntervalEndTime < DateTime.Now)
            return OverdueStyle;
        return DefaultStyle;
    }
}

My ControlTemplates look like this:

    <ControlTemplate x:Key="defaultTaskTemplate">
            <Border BorderThickness="0, 0, 0, 1" Height="56" BorderBrush="{StaticResource SideBarShadowBrush}" Background="Transparent">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="56"/>
                        <ColumnDefinition Width="130"/>
                        <ColumnDefinition Width="214"/>
                        <ColumnDefinition Width="56"/>
                        <ColumnDefinition Width="56"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Padding="13,16,0,0" Grid.Column="1" Foreground="{StaticResource TextGreyBrush}"><Run Text="{Binding IntervalStartTime, StringFormat=\{0:hh:mm\}}"/><Run Text=" - "/><Run Text="{Binding IntervalEndTime, StringFormat=\{0:hh:mm\}}"/></TextBlock>
                    <TextBlock Padding="13,16,0,0" Grid.Column="2" Foreground="{StaticResource TextGreyBrush}" Text="{Binding Title}"/>
                    <Views:ArrowControl HorizontalAlignment="Center" Width="20" Grid.Column="4" Height="13" VerticalAlignment="Center" ArrowBrushColor="{StaticResource TextGrey}"/>
                    <Views:CheckMarkControl Width="30" Height="30" />
                </Grid>
            </Border>
        </ControlTemplate>

For me, this looks pretty simple.
However my styles look like this:

<Style TargetType="{x:Type ListBoxItem}" x:Key="normalTaskItemStyle" BasedOn="{StaticResource baseTaskStyle}">
            <Setter Property="Template" Value="{StaticResource defaultTaskTemplate}"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Template" Value="{StaticResource defaultSelectedTaskTemplate}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

As you can see, I’m changing the template when the selection changes.

What I’m facing is when the actual bind to the source occurs, the window hangs, waiting for the listbox to render the items. When the window opens, I display a “spinner” element, to indicate I’m downloading content. One the download finishes, I databind and I see the spinner stop before it is removed. The spinner stopping indicates to me, that the window thread hangs because the binding is in process. Once the initial binding is over, I can scroll/pan just fine and no performance hit is notable.

I’ve searched the web for some info on optimizing this scenario, but I cannot seem to find anything relevant.
Am I looking in the wrong places?

What I would also like to know, if this is an acceptable way of producing a list? Is there any easier way to do it? I.e. avoiding the large number of controltemplates and styles?

Can anybody help?

Answer 1

I usually wouldn’t bother with changing the template when selecting an item, better to use a visual state within the same template, which probably would avoid recreating some elements that you’d otherwise reuse in both states. This selected template shouldn’t be causing the loading hang though.

I’m surprised you’re seeing a noticeable delay with only 15 items. I don’t see anything glaringly wrong with your template, is seems pretty simple, but I don’t know what is in those arrow and checkmark controls. You may want to inspect the xaml (or visual tree an runtime) of those controls to make sure they aren’t needlessly complex.

There are a couple things you can try to reduce the initial render time:

1. Use visual states in each item to progressively show internal elements. So, if those arrow or checkmark controls are the problem, maybe you have each element start with those elements collapsed and then make them visible after some time has passed.

2. Don’t bind the whole list at one, but bind to an initially empty list and then add each item in a dispatcher loop that allows the UI to be responsive in between creating each container.