3

I try to create a scrollable horizontal StackPanel but I do not succeed very well...

Currently I have my StackPanel with an auto width (and the problem is maybe here) that contains some items like grids.

Now, if all my grids are not visibles in the StackPanel (width is too short) I can't scroll. I already tried to put the StackPanel within a ScrollViewer but it doesn' t work too.

How can I fix this?

EDIT here is my code:

    <StackPanel Height="85" Margin="0,0,200,15" VerticalAlignment="Bottom">
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
            <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
                <StackPanel.Background>
                    <SolidColorBrush Color="{DynamicResource ButtonBackground}"/>
                </StackPanel.Background>
                <Grid Width="100" Background="Red"/>
                <Grid Width="100" Background="#FFFF0051"/>
                <Grid Width="100" Background="#FFB900FF"/>
                <Grid Width="100" Background="#FF002EFF"/>
                <Grid Width="100" Background="#FF00FFDC"/>
                <Grid Width="100" Background="#FF51FF00"/>
                <Grid Width="100" Background="Red"/>
            </StackPanel>
        </ScrollViewer>
    </StackPanel>
Eriawan Kusumawardhono
  • 4,796
  • 4
  • 46
  • 49
Victor Castro
  • 1,232
  • 21
  • 40
  • what is the ancestor of the stackpanel? you cannot have scroll view with Auto Width – gmetax Dec 14 '16 at 10:32
  • check that thread it will help you http://stackoverflow.com/questions/19355818/how-to-make-scrollviewer-work-with-height-set-to-auto-in-wpf – gmetax Dec 14 '16 at 10:33
  • 2
    It can't work unless you actually put the whole thing in a ScrollViewer. – Clemens Dec 14 '16 at 10:34
  • Thank you, I tried something else with a ScrollViewer and now it works (I Updated the code in the main post) but is it possible to make the scroll smooth ? Currently it is a "step by step" for each grid. **EDIT** Ok my bad, I only have to toggle `CanContentScroll` to `False` – Victor Castro Dec 14 '16 at 10:52

2 Answers2

6

Currently I have my stackpanel with an auto width (and the problem is maybe here) that contains some items like grids.

This is your problem. A StackPanel measures its children with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. So you will have to specify an explicit width for the StackPanel itself or the ScrollViewer for this to work.

Alternatively you could put the ScrollViewer in a Panel that measures its children, like for example a Grid (but not a StackPanel). This works for example:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="Window" Height="300" Width="300">
<Grid>
    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
        <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
            <StackPanel.Background>
                <SolidColorBrush Color="Yellow"/>
            </StackPanel.Background>
            <Grid Width="100" Background="Red"/>
            <Grid Width="100" Background="#FFFF0051"/>
            <Grid Width="100" Background="#FFB900FF"/>
            <Grid Width="100" Background="#FF002EFF"/>
            <Grid Width="100" Background="#FF00FFDC"/>
            <Grid Width="100" Background="#FF51FF00"/>
            <Grid Width="100" Background="Red"/>
        </StackPanel>
    </ScrollViewer>
</Grid>
</Window>

But this doesn't because the StackPanel is considered to have an infinite width:

<StackPanel>
    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
        <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
            <StackPanel.Background>
                <SolidColorBrush Color="Yellow"/>
            </StackPanel.Background>
            <Grid Width="100" Background="Red"/>
            <Grid Width="100" Background="#FFFF0051"/>
            <Grid Width="100" Background="#FFB900FF"/>
            <Grid Width="100" Background="#FF002EFF"/>
            <Grid Width="100" Background="#FF00FFDC"/>
            <Grid Width="100" Background="#FF51FF00"/>
            <Grid Width="100" Background="Red"/>
        </StackPanel>
    </ScrollViewer>
</StackPanel>

Putting ScrollViewers inside StackPanels is a bad idea.

mm8
  • 163,881
  • 10
  • 57
  • 88
1

You should put your StackPanel into a ScrollViewer like this:

<ScrollViewer Height="85" VerticalAlignment="Bottom" Margin="0,0,200,15" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
    <StackPanel x:Name="Film"  Orientation="Horizontal" >
        <StackPanel.Background>
            <SolidColorBrush Color="Black"/>
        </StackPanel.Background>
        <Grid Width="100" Background="Red"/>
        <Grid Width="100" Background="#FFFF0051"/>
        <Grid Width="100" Background="#FFB900FF"/>
        <Grid Width="100" Background="#FF002EFF"/>
        <Grid Width="100" Background="#FF00FFDC"/>
        <Grid Width="100" Background="#FF51FF00"/>
        <Grid Width="100" Background="Red"/>
    </StackPanel>
</ScrollViewer>
Ostap Moravskyi
  • 11
  • 3