WPF：带有滚动条（ScrollViewer）的ItemsControl

Question

我按照这篇小型“教程”添加了滚动条到ItemsControl中，它在设计视图中可用，但是当我编译和运行程序时却不起作用（只显示前几个条目，并没有滚动条可以查看更多 - 即使VerticalScrollbarVisibility设置为“Visible”而不是“Auto”）。

你有什么解决办法吗？

---

这是我用来显示我的条目的代码（通常我使用数据绑定，但为了在我的设计视图中查看项目，我手动添加了它们）：

<ItemsControl x:Name="itemCtrl" Style="{DynamicResource UsersControlStyle}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
            </StackPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
</ItemsControl>

---

这是我的模板：

<Style x:Key="UsersControlStyle" TargetType="{x:Type ItemsControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                    <ScrollViewer VerticalScrollBarVisibility="Visible">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

- Xuntar

Answer 1

为了使ItemsControl拥有滚动条，你可以像这样将其放在ScrollViewer中：

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <ItemsControl>
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
    <uc:UcSpeler />
  </ItemsControl>
</ScrollViewer>

- Oskar

---

当你看到它时，它就非常明显了……由于我之前一直在使用Windows Forms，我经常会固定在错误的思维模式中。看起来WPF可以纠正很多错误……加一。 - Christoffer Lette

谢谢 - 非常有帮助。我同意 Lette 的看法，起初我这个 WinForms 脑袋不太“理解”这个。 - itsmatt

我刚刚在这里尝试了一下，它仍然没有起作用。ItemsControl从其父容器中流出，并且根本没有可见的ScrollBar。 - Ristogod

如果你将 ScrollViewer 放在能够让其内容随意增长的容器内，例如 StackPanel，那么滚动将无法正常工作。请问父容器是什么？尝试在 ScrollViewer 或其父容器上设置固定高度，看是否有帮助？ - Oskar

你可以将 ScrollViewer 放在 DockPanel 或 Grid 中，而不是 StackPanel 中，以实现这一点。 - Oskar

Answer 2

你需要修改控件模板而不是ItemsPanelTemplate：

<ItemsControl >
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

也许你的代码无法正常工作是因为StackPanel有自己的滚动功能。尝试使用StackPanel.CanVerticallyScroll属性。

- Andrii Shvydkyi

---

StackPanel的CanVerticallyScroll属性好像没有起作用，我很抱歉。 - Xuntar

StackPanel的CanVerticallyScroll属性没有起作用，但是这里给出的代码示例对我很有帮助。谢谢。 - Souvik Basu

这个可以。我想把滚动视图放在里面而不是外面，因为 https://github.com/punker76/gong-wpf-dragdrop 需要它。 - HelloSam

Answer 3

把你的ScrollViewer放在一个DockPanel中，并设置DockPanel的MaxHeight属性。

[...]
<DockPanel MaxHeight="700">
  <ScrollViewer VerticalScrollBarVisibility="Auto">
   <ItemsControl ItemSource ="{Binding ...}">
     [...]
   </ItemsControl>
  </ScrollViewer>
</DockPanel>
[...]

- Lou