ScrollViewer not showing scroll far without fixed height

Question

I have the below XAML. The issue that I cannot seem to solve is that I have a scroll viewer that is wrapping around a grid full of views (with a fixed height) but cannot get the scroll bars to scroll on content longer than the window size.

I want the user control to fill the full hight of the window but also be scrollable when the amount of grid controls length is greater than the window size. But if I do not set the height of the scroll viewer manually then I will never get the scrollable scrollbar (manually set in the example).

I have looked at other examples on the site but cannot come across a valid answer (including this link).

XAML:

<UserControl d:DesignWidth="300" d:DataContext="{d:DesignInstance ViewModels:EntityViewModel}">
    <StackPanel>
        <Label Content=“text” />
        <ScrollViewer Height="450" Width="250" VerticalScrollBarVisibility="auto">
            <Grid>
                <ItemsControl ItemsSource="{Binding Entities}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:EntityView DataContext="{Binding}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </ScrollViewer>
    </StackPanel>
</UserControl>

Edit:
I'm adding an additional example which can be easily recreated. The need is to be able to have the scroll view to be scrollable with the dock panel (can be a grid) has more content than can fit on the screen of which the user control is inserted (which means I can't have a fixed size on the scroll viewer).

<Window Title="MainWindow" Height="200" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>


        <StackPanel Grid.Column="0">
            <Label Content="title"/>
            <ScrollViewer>
                <DockPanel>
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                    <Label DockPanel.Dock="Top" Content="title" HorizontalContentAlignment="Center" />
                </DockPanel>
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Window>

Yes, WPF controls, it needs to be a formatted list with the content being a view and scrollable. — Stephen, Sep 01 '18 at 19:23
It’s there for a supporting label, I removed the label for the posted example as it was not related and I didn’t want to distract. — Stephen, Sep 01 '18 at 19:30
The question is still fit for purpose with or without. You are just being picky. — Stephen, Sep 01 '18 at 19:33
You should always try to post a minimal, complete and verifiable example. Any redundant stuff only makes it harder to help you. A StackPanel only resizes its child element in the direction other than its Orientation. So it may well have an effect here. — Clemens, Sep 01 '18 at 19:34
I will always try to improve the content of any questions I post in the future, thanks. — Stephen, Sep 01 '18 at 19:38
But you understood that the StackPanel does not limit the height of the ScrollViewer, and that you will hence never see a vertical ScrollBar? If vertical scrolling is actually your intent here, you've never made that explicit, but just talked about *grid controls length* and *window size*, which could as well be horizontal. — Clemens, Sep 01 '18 at 20:36
I understand that and know that, the issue is I don’t want a fixed size on the scroll view, or if possible dynamically allocate that from the parent window (tried but didn’t seem to work). This is a reparented view. — Stephen, Sep 01 '18 at 21:51
Then just choose a different Panel. StackPanel just won't work. — Clemens, Sep 02 '18 at 07:02
Hi Clemens, any recommendation? I’ll try a grid in a little bit and get back to you. — Stephen, Sep 02 '18 at 08:01
Yes, there is a fully recreational version in the question now. — Stephen, Sep 02 '18 at 09:31
This doesn't help. still Clements' answer works and doesn't indicate that erroneous behaviour — Bizhan, Sep 02 '18 at 09:47

score 3 · Accepted Answer · answered Sep 02 '18 at 07:00

3

A StackPanel with vertical Orientation does not limit the height of its child elements. In other words, the Scrollviewer will always be as high as it need to be show its entire content, unless you explicitly set its Height.

You'll have to choose a different Panel, e.g. a Grid or a DockPanel:

<UserControl ...>
    <DockPanel>
        <Label DockPanel.Dock="Top" Content="text"/>
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsControl ItemsSource="{Binding Entities}">
                ...
            </ItemsControl>
        </ScrollViewer>
    </DockPanel>
</UserControl>

answered Sep 02 '18 at 07:00

Clemens

123,504
12
155
268

Hi Clemens, After implementing this guy, I get no vertical scroll bars at all with the content going off the screen. – Stephen Sep 02 '18 at 09:02
example gif https://i.imgur.com/hTYc62g.gifv (rendering 100 items in each column) – Stephen Sep 02 '18 at 09:05
@StephenMiller I tried the answer and it works fine. what else is in your code? – Bizhan Sep 02 '18 at 09:21
I posted on the question a edit with it just in the main window, with the same issue. – Stephen Sep 02 '18 at 09:34
@StephenMiller There is a StackPanel again in that other example. As already said multiple times, it won't work with a StackPanel. Stop using it! – Clemens Sep 02 '18 at 09:51
Sorry, I have remove it – Stephen Sep 02 '18 at 09:52
I do agree this works, and will mark it as the answer, I just need to backtrack and find out why its not working with my user control. Thanks! – Stephen Sep 02 '18 at 09:55
As said, certainly because the parent Panel of your UserControl also does not limit its size, maybe because it also is a StackPanel. – Clemens Sep 02 '18 at 09:56

score 0 · Answer 2 · answered Sep 01 '18 at 19:12

0

Try to set ScrollVieweron StackPanel

<ScrollViewer Height="450" Width="250" VerticalScrollBarVisibility="auto">
    <StackPanel>
        <Grid>
            <ItemsControl ItemsSource="{Binding Entities}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <local:EntityView DataContext="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </StackPanel>
</ScrollViewer>

answered Sep 01 '18 at 19:12

GlacialMan

579
2
5
20

Hi, as stated in the linked answer, stack panels are infinite in height which means that they will never be scrollable. – Stephen Sep 01 '18 at 19:14
You only want `Grid` to be scrollable? – GlacialMan Sep 01 '18 at 19:16
1

Hi, I need the content in the grid to be scrollable when it exceeds the window height, without setting a set height. – Stephen Sep 01 '18 at 19:17

ScrollViewer not showing scroll far without fixed height

2 Answers2