WPF ItemsControl scrollbar

Question

Using ItemsControl to display a collection of items on a Canvas. Probelm is that I can't see all the items on my screen (need to use Scrollbars), I've checked this post out and tried the same but it doesn't work for me, the Scrollbar is shown but disabled. My XAML:

<Grid>
    <DockPanel>
        <ScrollViewer>
            <ItemsControl ItemsSource={Binding MyCollection}>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        ....
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </DockPanel>
</Grid>

Rohit Vats Rohit Vats · Accepted Answer · 2014-07-27T15:27:53

ItemsControl by default doesn't have ScrollViewer in it's Template unlike ListBox.

Get rid of the outer scrollViewer and set the Template of ItemsControl to contain ScrollViewer. Also, I don't see any usage of DockPanel when you already wrap ItemsControl inside Grid.

Change layout something like this:

<Grid>
    <ItemsControl ItemsSource={Binding MyCollection}>
        <ItemsControl.Template>
            <ControlTemplate>
                <Border
                    BorderThickness="{TemplateBinding Border.BorderThickness}"
                    Padding="{TemplateBinding Control.Padding}"
                    BorderBrush="{TemplateBinding Border.BorderBrush}"
                    Background="{TemplateBinding Panel.Background}"
                    SnapsToDevicePixels="True">
                    <ScrollViewer
                        Padding="{TemplateBinding Control.Padding}"
                        Focusable="False">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding 
                                               UIElement.SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                ....
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

WPF ItemsControl scrollbar

1 Answers