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

1
votes

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?

4
wpfxaml
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
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
Well that's weird. No, Not really. I'm not overriding it. - Nasri Yatim

4 Answers

2
votes

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>
0
votes

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:

StackPanel and ScrollViewer

0
votes

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.

-1
votes

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.