如何在还具有 Scroll 的同时向 ItemsControl 添加垂直方向？

Question

我正在创建一个在 ItemsControl 中动态添加 materialdesign:Card 的设计。我原来的设计代码是这样的：

<ItemsControl ItemsSource="{Binding Something}" HorizontalAlignment="Left">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <materialDesign:Card>
                ....
            </materialDesign:Card>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

但是，我不喜欢这样的输出：

 ----------------------------------------
| [ Card here ]                          |
| [ Card here ]                          |
| [ Card here ]                          |
 ----------------------------------------

我研究了添加垂直方向，看到以前的 SO 主题建议添加如下内容：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

确实，它以某种方式解决了我的问题：

 -------------------------------------------
| [ Card here ] [ Card here ] [ Card here ] |
| [ Card here ] [ Card here ] [ Card here ] |
 -------------------------------------------

问题 现在还有 Cards 没有显示在下面，所以我需要一个 ScrollBar 才能继续往下看。以前的SO主题建议添加ScrollViewer，所以我在ItemsControl.

之前做了

<ScrollViewer>
   <ItemsControl>
        ....
   </ItemsControl>
</ScrollViewer>

然而，它又回到了第一个结果。有没有办法做到这一点？也许可以替代 WrapPanel 之类的东西？

Answer 1

您可以尝试用 DockPanel 包装您的 ScrollViewer，如下所示：

<DockPanel MaxHeight="300">
   <ScrollViewer VerticalScrollBarVisibility="Visible">
      <ItemsControl>
         ...
      </ItemsControl>
   </ScrollViewer>
</DockPanel>

请注意，我在您的 ScrollViewer 中添加了 VerticalScrollBarVisibility 属性，您可以选择 Vertical 或 Horizontal。