StackPanel 上的 HorizontalScrollBar

Question

我有一个 StackPanel，其中填充了自定义 UserControl。我想在此堆栈面板的底部包含一个水平滚动条，允许用户查看向左或向右滚动以查看更多用户控件。

我现在所拥有的虽然有效，但从 ItemsPanel 的大小由 ScrollViewer 决定的意义上来说似乎是不正确的。我的意思是，如果我调整垂直滚动条并缩小它，这也会缩小堆栈面板，为了看到它，我需要向下滚动。我试过将 ScrollViewer 放在 ItemsControl 中，但这不起作用。

<Window x:Name="MainWindow" x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test Generator" Height="464.5" Width="950">
<Grid>
    <Menu DockPanel.Dock="Top" Height="22" VerticalAlignment="Top">
        <MenuItem Header="_File">
            <MenuItem Header="New"/>
            <MenuItem Header="Open Template"/>
            <MenuItem Header="Save Template"/>
            <Separator />
            <MenuItem Header="_Exit"/>
        </MenuItem>
    </Menu>
    <Button Content="Load Template" HorizontalAlignment="Left" Margin="35,36,0,0" VerticalAlignment="Top" Width="98"/>
    <Button Content="Add Col" HorizontalAlignment="Right" Margin="0,36,35,0" VerticalAlignment="Top" Width="75"/>
    <Button x:Name="Generate_Data" Content="Generate Data Window" Height="22" Margin="0,36,0,0" VerticalAlignment="Top" Width="160" Click="Generate_Data_Click" HorizontalAlignment="Center"/>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" Margin="0,197,0,0">
            <ItemsControl Name="userControlContainer" Margin="10,150,10,10" ItemsSource="{Binding MyCollection}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
</Grid>

Answer 1

尝试删除外部 <ScrollViewer/> 并设置 <StackPanel ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 的附加属性。

完整示例：

<ItemsControl Name="userControlContainer" Margin="10,150,10,10" ItemsSource="{Binding MyCollection}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

删除您拥有的外部 ScrollViewer，并将其添加到 ItemsControl 本身的 ControlTemplate。

<ItemsControl Name="userControlContainer" Margin="10,150,10,10" ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

StackPanel 上的 HorizontalScrollBar

HorizontalScrollBar on a StackPanel

wpf

scrollbar

stackpanel

StackPanel 上的 Horizo​​ntalScrollBar

HorizontalScrollBar on a StackPanel

wpf

scrollbar

stackpanel

StackPanel 上的 HorizontalScrollBar