XAML/WPF - 里面有 StackPanel 的 ScrollViewer 不滚动

Posted 2023-04-12

【中文标题】XAML/WPF - 里面有 StackPanel 的 ScrollViewer 不滚动

【英文标题】：XAML/WPF - ScrollViewer which has StackPanel inside is not scrolling

【发布时间】：2018-01-29 19:43:26

【问题描述】：

我在 ScrollViewer 中有以下 StackPanel，它显示用户控件元素每当发生特定事件时：

注意：StackPanel 中可能会出现许多 UserControl，这就是我添加 Scrollviewer 的原因

<ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True" 
        Grid.ColumnSpan="2">

        <StackPanel Orientation="Vertical">
            <ItemsControl ItemsSource="Binding UserControls">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:UserControl/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
</ScrollViewer>

虽然，StackPanel 仍然超出范围，滚动条不显示且不起作用！

我尝试修复 StackPanel 和 ItemsControl 的高度，但它似乎也不起作用......

包含 ScrollViewer 的窗口布局：

<Grid Margin="0,15,0,0">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Label 
        Content="This is a Label" 
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Margin="5,5,0,0"
        FontSize="15"
        Grid.Row="0" Grid.ColumnSpan="2">
    </Label>


    <StackPanel Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="2">
        <ComboBox
            ItemsSource="Binding Something"
            Text="Confirm with..."
            SelectedItem="Binding Something"/>
        <Button
            HorizontalAlignment="Left"
            Margin="5"
            Content="Add new UserControl"
            Command="Binding Path=AddUserControl"/>

    </StackPanel>

    <ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True"
        HorizontalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            <ItemsControl ItemsSource="Binding UserControls" Height="300">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:UserControl/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ScrollViewer>

</Grid>

这是我添加到 ScrollViewer 内 StackPanel 的 UserControl：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackPanel
        Orientation="Horizontal" 
        Grid.Row="0">

        <Button
            Name="DeleteFilter" 
            HorizontalAlignment="Left"
            Margin="5"
            Content="-"/>

        <ComboBox 
            Margin="5"
            IsEditable="False"
            IsReadOnly="True"
            Width="150"
            ItemsSource="Binding SomeObject"
            DisplayMemberPath="Name"
            SelectedItem="Binding SomeObjectProperty"/>

        <ComboBox 
            Margin="5"
            IsEditable="False"
            IsReadOnly="True"
            Width="150"
            ItemsSource="Binding AnotherObject" 
            DisplayMemberPath="Name"
            SelectedItem="Binding AnotherObjectProperty"/>

        <TextBox 
            x:Name="Value"
            Text="Binding TextBoxValueString"
            TextAlignment="Center"
            Width="100"
            Margin="5"
            Visibility="Binding TextBoxVisibility"/>

    </StackPanel>

</Grid>

我是 XAML 和 WPF 的新手。

有什么建议吗？

【问题讨论】：

您能否显示整个布局代码，以参考滚动查看器具有哪些父级以及在它们上设置了哪些属性？

您的代码在我的机器上运行良好，您是否偶然覆盖了应用程序中某处的滚动查看器的样式？

这很奇怪。不，不是。我没有覆盖它。

【参考方案1】：

ScrollViewers 和 StackPanel 不能很好地协同工作。这是因为如果Orientation 属性设置为Horizontal，StackPanel 测量其子元素的水平空间无限，如果设置为Vertical，则垂直空间无限。更多信息请参考我的回答：

How to scroll the datagrid in stackpanel?

因此，您应该将 StackPanel 替换为另一个 Panel 或将其完全删除：

<ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True"
        HorizontalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="Binding UserControls" Height="300">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:UserControl/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
</ScrollViewer>

【讨论】：

亲爱的@mm8，这是您第二次回答我的 *** 问题，并且两次成功：）...非常感谢。完美运行！

【参考方案2】：

我能够使用此设置运行它：

   <ScrollViewer  HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto"
                 Grid.RowSpan="10">
    <StackPanel Orientation="Vertical"
                Grid.RowSpan="6"
                Name="SPanel"
                Margin="0,0,-0.4,1.4"
                CanVerticallyScroll="True">
      <Border BorderBrush="Black"
              BorderThickness="1"
              Margin="3"
              Grid.Row="0"
              Name="ChartHolder0">
        <dvc:Chart Cursor="Cross"
                   Background="#FFFFFCF2" />
      </Border>
      <Border BorderBrush="Black"
              BorderThickness="1"
              Margin="3"
              Grid.Row="0"
              Name="ChartHolder0">
        <dvc:Chart Cursor="Cross"
                   Background="#FFFFFCF2" />
      </Border>
      <Border BorderBrush="Black"
              BorderThickness="1"
              Margin="3"
              Grid.Row="0"
              Name="ChartHolder0">
        <dvc:Chart Cursor="Cross"
                   Background="#FFFFFCF2">
        </dvc:Chart>
      </Border>
    </StackPanel>
  </ScrollViewer>

这就是我得到的：

【参考方案3】：

正在寻找解决此问题的方法，而 Mishka 的回答对我有用。

我没有足够的声誉来评论答案，但我想说 Mishka 的 Background="White" 修复在 Silverlight 上对我有用（没有尝试 WPF）。

<ScrollViewer Background="White">
  <StackPanel Margin="5" Background="White">

有效，如果我只将背景放在 StackPanel 上，则堆栈面板上的 5 像素边距不会滚动。如果我没有在其中任何一个上放置背景，那么 5 像素边距和堆栈面板内控件上的任何边距都不会滚动。

【参考方案4】：

您缺少 StackPanel 或 ItemsControl（您的选择）的背景。 默认背景为空。 使用 Background Null，ScrollViewer 不会获取鼠标滚轮的鼠标事件， 并且不滚动。

【讨论】：

您的意思是这样的吗：Background="LightGray"... 如果您这样做，那么不，它不起作用。面板仍然超出窗口的范围

背景与滚动查看器的可见性无关