Scrolling in a ItemsControl while using a horizontal StackPanel as the ItemsPanel

Question

I have an ItemsControl, I've built the items that I'm displaying in it (views:DisplayGroupView) in such a way that they will expand horizontally to show all their contents and not vertically (only using the available height)

I've changed my ItemsPanel of the ItemsControl to use a StackPanel with Orientation="Horizontal"

Layout wise it's perfect, but no matter what I do I can't get it to scroll horizontally so I can see everything.

This is the XAML for the ItemsControl:

    <ItemsControl ItemsSource="{Binding DisplayGroups}" Grid.Row="1" Margin="120,20,120,20" VerticalContentAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate >
                <StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <views:DisplayGroupView Margin="0,0,20,0" DataContext="{Binding}" VerticalAlignment="Stretch"></views:DisplayGroupView>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

This lays everything out okay, but won't scroll. I've also tried changing the ItemsControls template to include a scrollviewer, but this only stacks things vertically:

            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled">
                        <ItemsPresenter VerticalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>

How can I get the horizontal layout while still being able to scroll?

Did you try pulling it out of the Template and embedding it by itself? Like , sounds silly I know, but worth a shot. — Chris W., Aug 08 '13 at 00:20
@ChrisW. When I do that the ItemsControl uses up more vertical space and no longer lays out the way I want. Even with — PhonicUK, Aug 09 '13 at 19:23
@ChrisW. I eventually got it using your suggestion, just took a bit of tweaking with the alignments. If you want to post it as an answer I'll accept it :) — PhonicUK, Aug 09 '13 at 19:35
Eh sure why not, I was literally just on here about to post a reply but as long as you got your remedy, I know how frustrating little crap like that can become haha. — Chris W., Aug 09 '13 at 20:10

score 8 · Accepted Answer · answered Aug 09 '13 at 20:24

If you pull it out of the ItemsControl and embed it by itself, for some reason that often acts as a workaround so something like;

<ScrollViewer VerticalScrollBarVisibilty="Disabled" HorizontalScrollBarVisibility="Auto">
  <ItemsControl/>
</ScrollViewer>

Scrolling in a ItemsControl while using a horizontal StackPanel as the ItemsPanel

1 Answers1