CODEWITHSUNDEEP
wpfscrollbarstackpanel
Talen Kylon
Talen Kylon

Reputation: 1958

HorizontalScrollBar on a StackPanel

I have a StackPanel that gets filled with custom UserControls. I'd like to include a horizontal scroll bar on the bottom of this stack panel that allows users to view the scroll left or right to view more user controls.

What I have now, while it works, seems incorrect in the sense that the size of the ItemsPanel is decided by the ScrollViewer. What I mean by this is if I adjust the vertical scroll bar and shrink it, this also shrinks the stack panel and in order to see it, I need to scroll down. I've tried putting the ScrollViewer inside of the ItemsControl but that doesn't work.

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

Upvotes: 0

Views: 382

Answers (2)

d.moncada
d.moncada

Reputation: 17392

Remove the outer ScrollViewer you have, and add it to the ControlTemplate of the ItemsControl itself.

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

Upvotes: 4

StepUp
StepUp

Reputation: 38094

Try to delete outer <ScrollViewer/> and set the attached property of <StackPanel ScrollViewer.HorizontalScrollBarVisibility="Auto"/>.

The complete example:

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

Upvotes: 0

Related Questions