WPF: ItemsControl with scrollbar (ScrollViewer)

wpf wpf-controls itemscontrol scrollviewer

113,734

Solution 1

To get a scrollbar for an ItemsControl, you can host it in a ScrollViewer like this:

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <ItemsControl>
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
  </ItemsControl>
</ScrollViewer>

Solution 2

You have to modify the control template instead of ItemsPanelTemplate:

<ItemsControl >
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

Maybe, your code does not working because StackPanel has own scrolling functionality. Try to use StackPanel.CanVerticallyScroll property.

Solution 3

Put your ScrollViewer in a DockPanel and set the DockPanel MaxHeight property

[...]
<DockPanel MaxHeight="700">
  <ScrollViewer VerticalScrollBarVisibility="Auto">
   <ItemsControl ItemSource ="{Binding ...}">
     [...]
   </ItemsControl>
  </ScrollViewer>
</DockPanel>
[...]

113,734

Author by

Xuntar

Dancer, traveler, programmer. Not necessarily in that order.

Updated on March 21, 2020

Comments

Xuntar over 4 years

I followed this small "tutorial" on how to add a scrollbar to an ItemsControl, and it works in Designer view, but not when I compile and execute the program (only the first few items show up, and no scrollbar to view more - even when VerticalScrollbarVisibility is set to "Visible" instead of "Auto").

Any idea on how to solve this?

This is the code I use to show my items (normally I work with Databinding, but to see the items in my Designer I added them manually):

<ItemsControl x:Name="itemCtrl" Style="{DynamicResource UsersControlStyle}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
            </StackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
</ItemsControl>

And this is my Template:

<Style x:Key="UsersControlStyle" TargetType="{x:Type ItemsControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                    <ScrollViewer VerticalScrollBarVisibility="Visible">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Xuntar over 14 years

The StackPanel CanVerticallyScroll property didn't work, I'm afraid.
Christoffer Lette over 13 years

It's so obvious when you see it... As I'm coming from Windows Forms, I often find myself stuck in the wrong mindset. It seems that WPF rights a lot of wrongs... +1.
itsmatt over 13 years

Thanks -very helpful. I agree with Lette that my WinForms brain doesn't "get" this initially.
Souvik Basu about 13 years

StackPanel CanVerticallyScroll didnt work but the code example given here worked for me. Thanks
Ristogod about 13 years

I just tried this right here and it still did not work. The ItemsControl flows right off its parent container and no ScrollBar is visible at all.
Oskar about 13 years

@Ristogod If you host the ScrollViewer inside something that lets its content grow as much as needed, for example a StackPanel, scrolling will not work. What's the parent container? Try setting a fixed height on either the ScrollViewer or the parent, does that help?
Rod over 12 years

I've got a question for you Oskar (or anyone else). I had the ItemsControl within a StackPanel, and like you said, it didn't allow the scrollbars if the ScrollViewer to appear. So I got rid of the stack panel and put a fixed maximum height to the scroll viewer. OK, that does work, but I don't quite want that, either, because I want the user to be able to resize the window. How do I account for that?
Oskar over 12 years

@Rod You can host the ScrollViewer in a DockPanel or a Grid instead of a StackPanel to achieve this.
HelloSam almost 11 years

This works. I am looking for making scrollviewer inside instead of outside, because github.com/punker76/gong-wpf-dragdrop requires it.
Brandon over 6 years

I'm late to the party here, but doesn't this disable virtualization? Not saying that everything needs virtualization - just trying to find a solution that doesn't disable virtualization.
Drew Noakes about 4 years

This answer explains how to achieve scrolling without sacrificing item virtualization, which can improve performance when you have many items: stackoverflow.com/a/2784220/24874