堆栈面板的水平滚动不起作用 [英] Horizontal scroll for stackpanel doesn't work

问题描述

我尝试创建一个可滚动的水平 StackPanel，但我没有成功...

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

目前我的 StackPanel 具有 auto 宽度(问题可能出在这里)，其中包含一些项目，例如 grids.

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

现在，如果我的所有网格在 StackPanel 中都不可见(宽度太短)，我将无法滚动.我已经尝试将 StackPanel 放在 ScrollViewer 中，但它没有也可以工作.

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?

编辑这是我的代码:

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

推荐答案

目前我的堆栈面板具有自动宽度(问题可能出在这里)，其中包含一些诸如网格之类的项目.

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

这是你的问题.如果 StackPanel 的 Orientation 属性设置为 Horizo​​ntal，则 StackPanel 测量具有无限水平空间的子项，如果设置为 Vertical，则测量无限垂直空间.因此，您必须为 StackPanel 本身或 ScrollViewer 指定显式宽度才能使其工作.

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.

或者，您可以将 ScrollViewer 放在测量其子项的面板中，例如网格(但不是 StackPanel).这适用于例如:

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>

但这不是因为 StackPanel 被认为具有无限宽度:

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>

将 ScrollViewers 放在 StackPanels 中是个坏主意.

Putting ScrollViewers inside StackPanels is a bad idea.

这篇关于堆栈面板的水平滚动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！