#1,004 – Setting CanContentScroll Disables Virtualization

February 7, 2014 2 Comments

When you set ScrollViewer.CanContentScroll to false for a ListBox, you switch from scrolling on an item basis to scrolling on a pixel basis.  However, when you do this, virtualization on the VirtualizingStackPanel being used as an items panel is disabled.  This happens because the virtualization logic works on an item-by-item basis and so is turned off when you are scrolling on a pixel-by-pixel basis.

This means that when you have a large number of items in an ItemsControl, you’ll typically want to leave content scrolling enabled.

 

Filed under Controls Tagged with , , , ,

#1,003 – Set CanContentScroll to False for Smooth Scrolling in a ListBox

February 6, 2014 3 Comments

By default, the ListBox control scrolls intelligently, one item at a time.  Scrolling behavior in a ListBox is provided by a ScrollViewer.  By default, the CanContentScroll property of the containing ScrollViewer is set to true, indicating that the items panel (e.g. a StackPanel) is responsible for the scrolling.  The StackPanel scrolls one item at a time as you drag the scrollbar thumb.

1003-001 1003-002

If you want to allow scrolling by pixels, rather than by items, you can set the ScrollViewer.CanContentScroll property on the ListBox to false.  This delegates scrolling responsibility back to the ScrollViewer.

        <ListBox ItemsSource="{Binding ActorList}" Width="300"
                 ScrollViewer.CanContentScroll="False">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Image}" Height="100"/>
                        <StackPanel Margin="10,0">
                            <TextBlock Text="{Binding FullName}" FontWeight="Bold" />
                            <TextBlock Text="{Binding Dates}"/>
                            <TextBlock Text="{Binding KnownFor}" FontStyle="Italic"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

1003-003

Filed under Controls Tagged with , , , ,

#884 – Making a StackPanel Scroll More Intelligently

August 14, 2013 Leave a comment

By default, when you place content in a ScrollViewer, the ScrollViewer itself decides how far to scroll the content each time that you click on the arrows included with the scrollbar (or use the arrow keys).

For example, we can place a vertical StackPanel within a ScrollViewer, where each element in the StackPanel is itself a panel containing an image and some text.  Each time we click on an arrow widget to scroll down by one increment, the content slides down a little bit.

884-001
884-002
However, we can tell the ScrollViewer that the StackPanel knows how to scroll itself by setting the ScrollViewer.CanContentScroll property to true.  The StackPanel now scrolls down one element a time when we click on the arrows.  That is, it scrolls down to the next child element, which in this case is the next image/text combination.

884-003

884-004

 

Filed under Controls Tagged with , , ,