使用水平StackPanel作为ItemsPanel，在ItemsControl中滚动

Question

我有一个ItemsControl，我已经构建了显示在其中的项(views:DisplayGroupView)，使它们在水平方向上展开以显示所有内容而不是垂直方向(只使用可用高度)

我已将ItemsControl的ItemsPanel更改为使用具有Orientation="Horizontal"属性的StackPanel

从布局上看，它很完美，但无论我做什么，都无法让它水平滚动，以便我可以查看所有内容。

这是ItemsControl的XAML:

    <ItemsControl ItemsSource="{Binding DisplayGroups}" Grid.Row="1" Margin="120,20,120,20" VerticalContentAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate >
                <StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <views:DisplayGroupView Margin="0,0,20,0" DataContext="{Binding}" VerticalAlignment="Stretch"></views:DisplayGroupView>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

这个布局看起来还不错，但是无法滚动。我尝试过更改ItemsControls的模板以包含一个滚动条，但这只会垂直堆叠：

            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled">
                        <ItemsPresenter VerticalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>

我如何在保持滚动功能的情况下获得水平布局？

- PhonicUK

---

你尝试过将它从模板中拿出来单独嵌入吗？像这样<ScrollViewer VerticalScrollBarVisibility="Disabled"><ItemsControl/></ScrollViewer>，听起来很傻，但值得一试。 - Chris W.

@ChrisW。当我这样做时，ItemsControl会使用更多的垂直空间，并且不再按照我想要的方式布局。即使使用<ScrollViewer VerticalContentAlignment="Stretch" HorizontalContentAlignment="Left" HorizontalScrollMode="Enabled" VerticalScrollMode="Disabled">。 - PhonicUK

@ChrisW。最终我用了你的建议，只是需要稍微调整一下对齐。如果你想把它作为答案发布，我会接受的 :) - PhonicUK

好的，为什么不呢？我刚刚在这里准备回复，但只要你解决了问题，我知道那些小破事有多让人沮丧，哈哈。 - Chris W.

Answer 1

如果您将其从ItemsControl中拿出并单独嵌入，由于某种原因，这通常作为解决方法，例如：

<ScrollViewer VerticalScrollBarVisibilty="Disabled" HorizontalScrollBarVisibility="Auto">
  <ItemsControl/>
</ScrollViewer>

- Chris W.