Question

I have a ListBox which is databound to an ObservableCollection and has a complex ItemContainerStyle (with images, progress bars and text)

When I try to apply a filter on its CollectionView, with about 200 items in the collection, the UI will freeze for 2-3 seconds. This only occurs when the ListBox’s height is not fixed (ie is allowed to grow). It is instant when the ListBox height is set to a value, eg 500

<Style x:Key="CollectionStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border x:Name="Bd" VerticalAlignment="Center" BorderBrush="Transparent" BorderThickness="1" CornerRadius="3.5" Margin="2" Padding="2">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{Binding Path=ListIcon}" Width="32" Margin="5,5,0,5" VerticalAlignment="Center" />
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <StackPanel Orientation="Horizontal" Margin="10,0">
                                <TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Style="{StaticResource TextFontStyleTextBlock}" FontSize="14" TextTrimming="CharacterEllipsis" />
                                <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" Text="{Binding Path=Time,UpdateSourceTrigger=PropertyChanged,Mode=OneWay}" Style="{StaticResource LabelFontStyleTextBlock}"  TextTrimming="CharacterEllipsis" FontSize="12" Margin="5,0,0,0"/>
                            </StackPanel>

                            <ProgressBar Grid.Row="1" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="10,0,10,0" Value="{Binding Percentage, Mode=OneWay, Converter={StaticResource doubleToProgress}}">
                                <ProgressBar.Foreground>
                                    <MultiBinding Converter="{StaticResource ProgressBarColorConverter}">
                                        <Binding Mode="OneWay" Path="Percentage" />
                                        <Binding Mode="OneWay" Path="IsStatic" />
                                    </MultiBinding>
                                </ProgressBar.Foreground>
                            </ProgressBar>

                            <StackPanel Orientation="Horizontal" Grid.Row="2" Margin="10,0,10,0">
                                <Image VerticalAlignment="Center" Visibility="{Binding IsStatic, Converter={StaticResource CollapsedIfFalse}, Mode=OneWay, FallbackValue=Collapsed}" Source="/Common;component/Images/alert.ico" Margin="2,2,2,2"
                                                    RenderOptions.BitmapScalingMode="HighQuality"
                                                   RenderOptions.EdgeMode="Aliased" />
                                <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" Text="{Binding Path=Description,Mode=OneWay}" Foreground="Gray" TextTrimming="CharacterEllipsis" FontSize="11"/>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
<ListBox Grid.Row="0" x:Name="items" ItemsSource="{Binding Path=MyCollection}"
                                 ItemContainerStyle="{StaticResource CollectionStyle}"   />

Is there a way to fix this freezing? Having a fixed height on the ListBox is not an acceptable outcome, as it causes a vertical scroll bar to appear in a control which already has a vertical scroll bar

Answer 1

Having a fixed height on the ListBox is not an acceptable outcome, as it causes a vertical scroll bar to appear in a control which already has a vertical scroll bar

This looks suspicious to me. When the immediate parent panel of the ListBox is not Grid or DockPanel (where its last child is a ListBox with LastChildFill=true), the listbox looses its virtualization and scrolling. As virtualization is lost, the listbox de-virtualizes all rows and while doing so hangs the UI thread.

Is your ListBox wrapped in some kind of a scroll viewer? Sadly if thats the case, you will either have to skip the scroll viewer or apply fixed size to the ListBox.

If you want the list box to auto-occupy remaining space of the container, do some binding to the parent panel’s actual height ptoperty via some converter and “calculate” required Height for the ListBox in that converter. This way it will look like the ListBox occupies all the space but is actually been applied with some fixed height via binding.

But this can be tricky based on situation!