Horizontal Scroll for Stackpanel Doesn't Work

Horizontal scroll for stackpanel doesn't work

Currently I have my stackpanel with an auto width (and the problem is maybe here) that contains some items like grids.

This is your problem. A StackPanel measures its children with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. So you will have to specify an explicit width for the StackPanel itself or the ScrollViewer for this to work.

Alternatively you could put the ScrollViewer in a Panel that measures its children, like for example a Grid (but not a StackPanel). This works for example:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="Window" Height="300" Width="300">
<Grid>
    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
        <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
            <StackPanel.Background>
                <SolidColorBrush Color="Yellow"/>
            </StackPanel.Background>
            <Grid Width="100" Background="Red"/>
            <Grid Width="100" Background="#FFFF0051"/>
            <Grid Width="100" Background="#FFB900FF"/>
            <Grid Width="100" Background="#FF002EFF"/>
            <Grid Width="100" Background="#FF00FFDC"/>
            <Grid Width="100" Background="#FF51FF00"/>
            <Grid Width="100" Background="Red"/>
        </StackPanel>
    </ScrollViewer>
</Grid>
</Window>

But this doesn't because the StackPanel is considered to have an infinite width:

<StackPanel>
    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Height="85" CanContentScroll="True">
        <StackPanel x:Name="Film" Height="85" Width="Auto" Margin="0,0,0,0" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="True" d:LayoutOverrides="TopPosition, BottomPosition">
            <StackPanel.Background>
                <SolidColorBrush Color="Yellow"/>
            </StackPanel.Background>
            <Grid Width="100" Background="Red"/>
            <Grid Width="100" Background="#FFFF0051"/>
            <Grid Width="100" Background="#FFB900FF"/>
            <Grid Width="100" Background="#FF002EFF"/>
            <Grid Width="100" Background="#FF00FFDC"/>
            <Grid Width="100" Background="#FF51FF00"/>
            <Grid Width="100" Background="Red"/>
        </StackPanel>
    </ScrollViewer>
</StackPanel>

Putting ScrollViewers inside StackPanels is a bad idea.

HorizontalScrollBar on a StackPanel

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>

Listview with Horizontal stack panel not scrolling windows 10 universal app

Your problem is the StackPanel that contains the titlebar and SplitView. Content inside of a StackPanel is not confined to any space and it will stretch on forever. In your case this means the SplitView and therefore the ListView inside it are stretching forever. Without being confined the ListView doesn't believe it needs to scroll.

The fix is to use a Grid with Rows instead. I would add Grid RowDefinitions into your body Grid with the titlebar in row 0 and the SplitView in row 1 and remove the StackPanel just inside the body Grid. That will get your scrolling working. Paraphrasing your code, the row definitions would look like this

    <Grid x:Name="body">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Grid x:Name="titlebar" Grid.Row="0">
        </Grid>

        <SplitView x:Name="MySplitView" Grid.Row="1">
        </SplitView>

    </Grid>

scrollbar not showing in stackpanel even after putting it inside a scrollviewer

You need to specify the height of the ScrollViewer not the StackPanel, because otherwise the StackPanel won't extend beyond the bounds of the ScrollViewer and the scroll bar won't display.

<Border x:Name="myBorder2">
    <ScrollViewer Height="200px">
        <StackPanel x:Name="gradpaneldesc">
        </StackPanel>
    </ScrollViewer>
</Border>

How to add a ScrollBar to a Stackpanel

Put it into a ScrollViewer.

XAML/WPF - ScrollViewer which has StackPanel inside is not scrolling

ScrollViewers and StackPanel don't work well together. This is because a StackPanel measures its child elements with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. Please refer to my answer here for more information:

How to scroll the datagrid in stackpanel?

So you should replace the StackPanel with another Panel or remove it altogether:

<ScrollViewer 
        VerticalScrollBarVisibility="Auto"
        Grid.Row="2"
        CanContentScroll="True"
        HorizontalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding UserControls}" Height="300">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:UserControl/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
</ScrollViewer>

Scrollviewer doesn't stop at the window border

The problem is the outer StackPanel. A StackPanel is allowed to grow to fit the content, so it is stretching beyond the boundaries of your window. Try a different panel instead, such as a DockPanel.

For example:

<Grid x:Name="maingrid" Background="#222">
    <DockPanel>
        <Grid>
            <!--Search bar and stuff-->
        </Grid>

        <Grid>
            <ScrollViewer>
                <StackPanel x:Name="resultsparent" VerticalAlignment="Top" HorizontalAlignment="Stretch">

                </StackPanel>
            </ScrollViewer>
        </Grid>
    </DockPanel>
</Grid>

How to scroll the datagrid in stackpanel?

ScrollViewers and StackPanels don't work very well together since a StackPanel measures its child elements with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical.

So you will either have to specify a height for the StackPanel:

<StackPanel Orientation="Horizontal" Height="100">

If you don't it will have an infinite height and that's why you see no scrollbars.

The other, and much better option, would be to get rid of the StackPanel and use another Panel that doesn't measures its child elements with an infinite space.

The DataGrid has its own ScrollViewer built-in, so you don't need to put it inside a ScrollViewer element yourself. Get rid of the StackPanel(s) and the ScrollViewer:

<DataGrid Name="dgConfig" VerticalAlignment="Stretch" AutoGenerateColumns="False"
                          VerticalScrollBarVisibility="Auto">
    <DataGrid.Columns>
        ...
    </DataGrid.Columns>
</DataGrid>

StackPanel inside of a ScrollView doesnt physically scroll correctly

Since you do not specify a width of the ScrollViewer, it takes the size of the StackPanel. Because the content of the ScrollViewer is not larger than its size then it will not scroll and will always have a horizontal offset of 0. Try setting the width of the ScrollViewer to something smaller than its contents and you should have a working horizontal scroll.

Also remove all the redundancy of disabling the vertical scroll bars, once is good enough.

<Grid x:Name="LayoutRoot">
<Grid HorizontalAlignment="Right" Width="335.312">
    <ed:BlockArrow Fill="#FFF4F4F5" HorizontalAlignment="Left" Margin="0" 
         Orientation="Left" Stroke="Black" Width="15" RenderTransformOrigin="5.6,-0.412"
         Height="12" VerticalAlignment="Center" MouseEnter="LeftArrow_MouseEnter" 
         MouseLeave="LeftArrow_MouseLeave" MouseLeftButtonUp="LeftArrow_MouseLeftButtonUp"/>
    <ed:BlockArrow Fill="#FFF4F4F5" Stroke="Black" RenderTransformOrigin="5.6,-0.412" 
         Height="12" VerticalAlignment="Center" MouseEnter="RightArrow_MouseEnter" 
         MouseLeave="RightArrow_MouseLeave" HorizontalAlignment="Right" Width="15" 
         MouseLeftButtonUp="RightArrow_MouseLeftButtonUp"/>
    <ScrollViewer x:Name="panelScrollViewer" Margin="15,0" CanContentScroll="False" 
          VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden"
          Width="250">
        <StackPanel x:Name="slidingStackPanel" Orientation="Horizontal" Height="125.882" Width="305.312"/>
    </ScrollViewer>
</Grid>

Horizontal scroll bar doesn't appear on TextBox

Looking at the implementation of the TextBox: http://referencesource.microsoft.com/#PresentationFramework/src/Framework/System/Windows/Controls/TextBox.cs#1473

it seems that this is the normal behavior: the horizontal scrollbar is not visible when TextWrapping is WrapWithOverflow.

Based on that, the only possible way to show the horizontal scrollbar of the TextBox is to set the TextWrapping to NoWrap.

A workarount to what (I think that) you want to achieve with the outer ScrollViewer might be:

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible">
    <TextBox x:Name="textBox" AcceptsReturn="True"
        AcceptsTab="True" FontSize="15"
        VerticalScrollBarVisibility="Hidden" 
        HorizontalScrollBarVisibility="Hidden"
        TextWrapping="WrapWithOverflow" Language="en-US"
        SpellCheck.IsEnabled="True"/>
</ScrollViewer>

---

Related Topics