CODEWITHSUNDEEP
wpfxaml
Nasri Yatim
Nasri Yatim

Reputation: 368

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

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?

Upvotes: 2

Views: 3568

Answers (4)

Jan
Jan

Reputation: 1

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.

Upvotes: 0

Ehsan
Ehsan

Reputation: 785

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

Upvotes: 1

mm8
mm8

Reputation: 169400

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>

Upvotes: 3

Mishka
Mishka

Reputation: 516

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.

Upvotes: -1

Related Questions