Question

I have the following test sample:

<Window x:Class="WpfScrollTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="200" Width="200">
    <Border>
        <StackPanel>
            <Label Width="Auto" Height="Auto" Content="Text to mess up the scrollview"/>
                <ScrollViewer Height="{Binding RelativeSource={RelativeSource FindAncestor, 
                        AncestorType={x:Type Border}}, Path=ActualHeight}">
                    <StackPanel>
                        <Button MinWidth="100" MinHeight="100" Content="Button"/>
                        <Button MinWidth="100" MinHeight="100" Content="Button"/>
                    </StackPanel>
                </ScrollViewer>
            </StackPanel>
    </Border>
</Window>

Which creates this:

My question is how do I set the ScrollViewer.Height dynamically while still being able to see the bottom of the scrollbar? In my sample, the Height of the ScrollViewer is too long because of the Label above it ..

I don’t want to fix the Height of the ScrollViewerto a static value.

Answer 1

I would recommend to remove the outer StackPanel to a Grid, since Stackpanel wont respect the children size. And remove the ScrollViewer.Height binding. Now you just need to create two RowDefinition for the Grid and place the Label to Grid.Row=0 and ScrollViwer to Grid.Row=1.

Code is below. So my tip here is, use StackPanel/Canvas only if necessary and may be for the inner levels. Try to use Grid more to get very dynamic layouts.

  <Border>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Width="Auto" Height="Auto" Content="Text to mess up the scrollview"/>
        <ScrollViewer Grid.Row="1" >
            <StackPanel>
                <Button MinWidth="100" MinHeight="100" Content="Button"/>
                <Button MinWidth="100" MinHeight="100" Content="Button"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Border>