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

问题描述

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

当前我的StackPanel具有 auto 宽度（可能是这里的问题），其中包含一些项目，例如 grid 。

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

我该如何解决？

编辑这是我的代码：

< pre class = lang-xaml prettyprint-override> < StackPanel Height = 85 Margin = 0,0,200,15 VerticalAlignment = Bottom>
< ScrollViewer Horizo​​ntalScrollBarVisibility = Visible VerticalScrollBarVisibility = Disabled Horizo​​ntalAlignment = Left Height = 85 CanContentScroll = True>
< StackPanel x：Name = Film Height = 85 Width = Auto Margin = 0,0,0,0 Orientation = Horizo​​ntal ScrollViewer.Horizo​​ntalScrollBarVisibility = Visible CanHorizo​​ntallyScroll = 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>


解决方案

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

这个是

或者，您也可以将ScrollViewer放在测量其子级的Panel中，例如Grid（而不是StackPanel）。例如：

 < 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 Horizo​​ntalScrollBarVisibility = Visible VerticalScrollBarVisibility = Disabled Horizo​​ntalAlignment = Left Height = 85 CanContentScroll = True> 
< StackPanel x：Name = Film Height = 85 Width = Auto Margin = 0,0,0,0 Orientation = Horizo​​ntal ScrollViewer.Horizo​​ntalScrollBarVisibility = Visible CanHorizo​​ntallyScroll = 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 Horizo​​ntalScrollBarVisibility = Visible VerticalScrollBarVisibility = Disabled Horizo​​ntalAlignment = Left Height = 85 CanContentScroll = True> 
< StackPanel x：Name = Film Height = 85 Width = Auto Margin = 0,0,0,0 Orientation = Horizo​​ntal ScrollViewer.Horizo​​ntalScrollBarVisibility = Visible CanHorizo​​ntallyScroll = 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中是一个坏主意。

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>

解决方案

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.

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