StackPanel的水平滚动不起作用。

Question

我尝试创建一个可滚动的水平StackPanel，但是我做得不太好...

目前我的StackPanel宽度设置为auto（问题可能就在这里），其中包含一些像grids的项。

现在，如果我的所有格栅在StackPanel中都不可见（宽度太窄），我就无法滚动。 我已经尝试将StackPanel放在ScrollViewer中，但也不起作用。

我该怎么解决这个问题？

编辑：下面是我的代码：

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

- Victor Castro

---

StackPanel的祖先是什么？您不能使用自动宽度来实现滚动视图。 - gmetax

检查一下这个线程，它会对你有所帮助：https://dev59.com/eGIk5IYBdhLWcg3wWs9z - gmetax

除非您将整个内容放入 ScrollViewer 中，否则它无法正常工作。 - Clemens

谢谢，我尝试了一些其他的东西，使用ScrollViewer现在可以工作了（我已经在主贴中更新了代码），但是有可能使滚动更加平滑吗？目前它是每个网格“逐步”进行的。编辑 好的，我的错，我只需要将CanContentScroll切换为False。 - Victor Castro

Answer 1

目前，我有一个堆栈面板，它具有自动宽度（问题可能在这里），其中包含一些像网格这样的项。

这就是你的问题。如果堆栈面板的方向属性设置为水平，则使用无限水平空间测量其子元素，如果设置为垂直，则使用无限垂直空间测量其子元素。因此，您必须为堆栈面板本身或ScrollViewer指定显式宽度才能使其工作。

或者，您可以将ScrollViewer放入一个测量其子元素的面板中，例如Grid（但不是StackPanel）。例如：

```html ```

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

但是这并不起作用，因为StackPanel被认为具有无限宽度：

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

将ScrollViewers放在StackPanels中是一个不好的想法。

- mm8

Answer 2

你应该像这样将你的 StackPanel 放入 ScrollViewer 中：

<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