XAML/WPF - ScrollViewer which has StackPanel inside is not scrolling

Question

I have the following StackPanel inside a ScrollViewer that shows User Control elements Whenever a specific event occurs:

Note: many UserControls might appear in the StackPanel that's why I added a Scrollviewer

<ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True" 
        Grid.ColumnSpan="2">

        <StackPanel Orientation="Vertical">
            <ItemsControl ItemsSource="{Binding UserControls}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:UserControl/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
</ScrollViewer>

Although, the StackPanel is still going out of range and the scroll bars doesn't show and doesn't work!

I tried fixing the height of both the StackPanel and the ItemsControl but it does't seem to work either...

Window Layout containing the ScrollViewer:

<Grid Margin="0,15,0,0">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Label 
        Content="This is a Label" 
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Margin="5,5,0,0"
        FontSize="15"
        Grid.Row="0" Grid.ColumnSpan="2">
    </Label>


    <StackPanel Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="2">
        <ComboBox
            ItemsSource="{Binding Something}"
            Text="Confirm with..."
            SelectedItem="{Binding Something}"/>
        <Button
            HorizontalAlignment="Left"
            Margin="5"
            Content="Add new UserControl"
            Command="{Binding Path=AddUserControl}"/>

    </StackPanel>

    <ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True"
        HorizontalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            <ItemsControl ItemsSource="{Binding UserControls}" Height="300">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:UserControl/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ScrollViewer>

</Grid>

Here's my UserControl that is added to the StackPanel Inside the ScrollViewer:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackPanel
        Orientation="Horizontal" 
        Grid.Row="0">

        <Button
            Name="DeleteFilter" 
            HorizontalAlignment="Left"
            Margin="5"
            Content="-"/>

        <ComboBox 
            Margin="5"
            IsEditable="False"
            IsReadOnly="True"
            Width="150"
            ItemsSource="{Binding SomeObject}"
            DisplayMemberPath="Name"
            SelectedItem="{Binding SomeObjectProperty}"/>

        <ComboBox 
            Margin="5"
            IsEditable="False"
            IsReadOnly="True"
            Width="150"
            ItemsSource="{Binding AnotherObject}" 
            DisplayMemberPath="Name"
            SelectedItem="{Binding AnotherObjectProperty}"/>

        <TextBox 
            x:Name="Value"
            Text="{Binding TextBoxValueString}"
            TextAlignment="Center"
            Width="100"
            Margin="5"
            Visibility="{Binding TextBoxVisibility}"/>

    </StackPanel>

</Grid>

I'm new to XAML and WPF.

Any Suggestions?

Can you please show the whole layout code in reference of what parents the scroll viewer has and what properties are set on them? — Nahuel Ianni, Aug 22 '17 at 11:45
Your code is working fine on my machine, are you by chance overriding the style of the Scroll Viewer somewhere in your application? — Nahuel Ianni, Aug 22 '17 at 12:28

score 3 · Accepted Answer · answered Aug 22 '17 at 14:47

ScrollViewers and StackPanel don't work well together. This is because a StackPanel measures its child elements with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. Please refer to my answer here for more information:

How to scroll the datagrid in stackpanel?

So you should replace the StackPanel with another Panel or remove it altogether:

<ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True"
        HorizontalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding UserControls}" Height="300">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:UserControl/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
</ScrollViewer>

Dear @mm8, this is the second time you answer my stackoverflow questions and you nailed it, twice :) ... Thank's a lot. Works perfectly! — Nasri Yatim, Aug 23 '17 at 07:27

score 0 · Answer 2 · answered Oct 21 '19 at 14:44

I was able to get it run with this setting:

   <ScrollViewer  HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto"
                 Grid.RowSpan="10">
    <StackPanel Orientation="Vertical"
                Grid.RowSpan="6"
                Name="SPanel"
                Margin="0,0,-0.4,1.4"
                CanVerticallyScroll="True">
      <Border BorderBrush="Black"
              BorderThickness="1"
              Margin="3"
              Grid.Row="0"
              Name="ChartHolder0">
        <dvc:Chart Cursor="Cross"
                   Background="#FFFFFCF2" />
      </Border>
      <Border BorderBrush="Black"
              BorderThickness="1"
              Margin="3"
              Grid.Row="0"
              Name="ChartHolder0">
        <dvc:Chart Cursor="Cross"
                   Background="#FFFFFCF2" />
      </Border>
      <Border BorderBrush="Black"
              BorderThickness="1"
              Margin="3"
              Grid.Row="0"
              Name="ChartHolder0">
        <dvc:Chart Cursor="Cross"
                   Background="#FFFFFCF2">
        </dvc:Chart>
      </Border>
    </StackPanel>
  </ScrollViewer>

And this is what I get:

score 0 · Answer 3 · answered Jul 29 '20 at 15:39

Was looking for a fix for this problem and Mishka's answer worked for me.

I don't have enough reputation to comment on an answer, but wanted to say that Background="White" fix from Mishka does work for me on Silverlight (didn't try WPF).

<ScrollViewer Background="White">
  <StackPanel Margin="5" Background="White">

Works, if I only put Background on the StackPanel the 5 pixel Margin on the stackpanel doesn't scroll. If I don't put Background on either then both the 5 pixel margin and any margins on controls inside the stackpanel dont scroll.

score -1 · Answer 4 · answered Aug 21 '17 at 17:25

-1

You are missing a Background for either the StackPanel or ItemsControl(Your choise). Default Background is Null. With Background Null, the ScrollViewer doesn't get mouse events for the mouse wheel, and doesn't scroll.

answered Aug 21 '17 at 17:25

Mishka

508
3
5

Do you mean something like this: Background="LightGray"... If you do, then No, it didn't work. The panel still goes out of the window's range – Nasri Yatim Aug 22 '17 at 07:19
The background has nothing to do with the visibility of a scroll viewer – Nahuel Ianni Aug 22 '17 at 11:44

XAML/WPF - ScrollViewer which has StackPanel inside is not scrolling

4 Answers4

Linked