StackPanel上的Horizo​​ntalScrollBar

Question

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

我现在所拥有的，虽然它有效，但似乎不正确，因为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，并将其添加到ControlTemplate本身的ItemsControl。

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

Answer 2

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

完整的例子：

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