Horizontal scroll for stackpanel doesn't work

问题:

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>

回答1:

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.

回答2:

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>