Stacked
Stacked

Reputation: 7336

WPF ItemsControl scrollbar

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>

Upvotes: 3

Views: 4906

Answers (1)

Rohit Vats
Rohit Vats

Reputation: 81233

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>

Upvotes: 9

Related Questions