堆栈面板的水平滚动不起作用
Horizontal scroll for stackpanel doesn't work
我尝试创建一个可滚动的水平 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>
您应该像这样将 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>
Currently I have my stackpanel with an auto width (and the problem is maybe here) that contains some items like grids.
这是你的问题。如果 StackPanel 的 Orientation 属性 设置为 Horizontal,则 StackPanel 会使用无限水平 space 测量其子项,如果设置为 Vertical,则测量其无限垂直 space 。因此,您必须为 StackPanel 本身或 ScrollViewer 指定一个明确的宽度才能工作。
或者,您可以将 ScrollViewer 放在测量其子项的面板中,例如 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 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>
将 ScrollViewer 放在 StackPanel 中是个坏主意。
我尝试创建一个可滚动的水平 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>
您应该像这样将 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>
Currently I have my stackpanel with an auto width (and the problem is maybe here) that contains some items like grids.
这是你的问题。如果 StackPanel 的 Orientation 属性 设置为 Horizontal,则 StackPanel 会使用无限水平 space 测量其子项,如果设置为 Vertical,则测量其无限垂直 space 。因此,您必须为 StackPanel 本身或 ScrollViewer 指定一个明确的宽度才能工作。
或者,您可以将 ScrollViewer 放在测量其子项的面板中,例如 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 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>
将 ScrollViewer 放在 StackPanel 中是个坏主意。