ScrollViewer changes Size of Content(ItemControl) instead of showing a scrollbar

Question

I have a WPF UserControl containing an ItemsControl with a Horizontal StackPanel as ItemsPanel (Basically some kind of the WinRT Hub Control). And the content extends the Size of the UserControl

If I try to add a ScrollViewer around my ItemsControl, the ScrollViewer shrinks the ItemsControl so all Items fit into the UserControl bounds.

Thats somehow exactly the opposite of what i expected can anybody tell me why the scrollviewer behaves this way?

Here is my UserControl:

<UserControl x:Class="ContentModule.ContentView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             xmlns:contentModule="clr-namespace:ContentModule"
             xmlns:regions="http://www.codeplex.com/CompositeWPF"
             xmlns:statics="clr-namespace:Infrastructure.Statics;assembly=Infrastructure"
             d:DesignHeight="300" d:DesignWidth="300" d:DataContext="{d:DesignInstance contentModule:ContentViewModel}"
             VerticalAlignment="Top" HorizontalAlignment="Left">
        <ItemsControl regions:RegionManager.RegionName="{x:Static statics:ContentRegions.ContentCollection}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
</UserControl>

The Items are injected via Prism RegionManager.

EDIT1:

The UserControl is getting Injected into my MainForm. It is assigned to the ContrentControl => ShellRegions.Content (the third one)

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ContentControl Grid.Row="0" cal:RegionManager.RegionName="{x:Static statics:ShellRegions.MainMenu}" />
        <ItemsControl Grid.Row="1" cal:RegionManager.RegionName="{x:Static statics:ShellRegions.NavigationBar}" />
        <ContentControl Grid.Row="2" cal:RegionManager.RegionName="{x:Static statics:ShellRegions.Content}" />
    </Grid>

EDIT 2: Some more details.

The ItemsControl looks like : this (Gray is the UserControl, Orange are the items in the ItemsControl) The Content scales when changing the bounds of the Form/UserControl as expected but the ItemsControl does not show a ScrollBar. If i add a ScrollViewer the Content does not scale with changing bounds anymore and is Vertically scrollable instead of horizontal, or it does change the width of the items to fit the UserControll depending on the ScrollBar properties.

But i can't get it working to keep the scaling and add a scroll bar to the bottom of the ItemsControl.

Hi, use a ListBox. :) Why does everybody like ItemsControl. Its actually pretty dump. See it cant event virtualize items, hehe. ListBix is true bad ass. — dev hedgehog, Oct 29 '13 at 15:48
could you show the placement of the user control in your window ? — eran otzap, Oct 29 '13 at 15:55
@devhedgehog I tried changing it but i don't wan't to be able to select my items, so ListBox needs other actions. I actually want to stay with the ItemsControl. — quadroid, Oct 29 '13 at 16:09
@console You can disable selection in ListBox thought scrolling and virtualization stays. Those things you will not be able to have when using simple ItemsControl. Check this link out: http://stackoverflow.com/questions/1051215/wpf-listview-turn-off-selection — dev hedgehog, Oct 29 '13 at 18:48
@devhedgehog as i mentioned above the listBox doesn't fit my needs even if a disable the selection, there are things that remain (click brings an item to focus etc..) — quadroid, Oct 30 '13 at 08:30
Ok let me post you an actual answer to this. I think I get you now. — dev hedgehog, Oct 30 '13 at 08:37

score 0 · Answer 1 · answered Oct 30 '13 at 08:38

0

You can try doing following:

Wrap your control in a ScrollViewer and set CanContentScrol property to TRUE.

Futhermore change the Panel of your ItemsControl to VirtualizingStackPanel.

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

Tell us whether it worked or what kind of new issues those changes will bring up.

answered Oct 30 '13 at 08:38

dev hedgehog

8,698
3
28
55

Sadly, this doesn't help either i will add a detailed description – quadroid Oct 30 '13 at 08:55
I dont see your ScrollViewer. Where is it? – dev hedgehog Oct 30 '13 at 09:04

score 0 · Accepted Answer · answered Oct 30 '13 at 14:23

After a day full of research i found a working solution:

<ItemsControl regions:RegionManager.RegionName="{x:Static statics:ContentRegions.ContentCollection}">
            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

ScrollViewer changes Size of Content(ItemControl) instead of showing a scrollbar

2 Answers2