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

Question

我在 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 的新手。

有什么建议吗？

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

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

这就是我得到的：

Answer 3

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

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

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

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

Answer 4

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