Trouble with WPF ScrollViewer resize

Question

I have an issue with a ScrollViewer in WPF.

When a Window is sized down to the point where the ScrollViewer should start taking over, the window doesn't resize the containing grid and bottom of the scroll bar just goes out of view.

I have tried binding the height of it to the height of the containing grid, but with no luck.

Here is my xaml:

 <Grid x:Name="MainGrid" Width="Auto" Height ="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <StackPanel Height="134" Width="Auto" VerticalAlignment="Top" Background="Blue" HorizontalAlignment="Stretch">
        <Label x:Name="ProjectNumberLabel" Content="ProjectNumber" HorizontalAlignment="Left" Height="45.5" VerticalAlignment="Top" Width="350" FontSize="32" Margin="10,0,0,0" Foreground="White"/>

        <Label x:Name="ProjectNameLabel" Content="ProjectName" HorizontalAlignment="Stretch" Height="42" VerticalAlignment="Top" FontSize="24" Margin="10,0,0,0" Foreground="White" Width="auto"/>

        <Label x:Name="SetLabel" Content="Set Id" HorizontalAlignment="Stretch"   Width="Auto" Height="42" Margin="10,0,10,0" FontSize="24" VerticalAlignment="Top" Foreground="White" />

    </StackPanel>

    <ScrollViewer HorizontalAlignment="Stretch" Margin="0,140,0,0" Width="Auto" CanContentScroll="True" Height="{Binding ElementName=MainGrid, Path=ActualHeight  }">
        <StackPanel Name="ContainingPanel" VerticalAlignment="Top" HorizontalAlignment="Stretch" Width="Auto" Height="Auto">
            <StackPanel HorizontalAlignment="Stretch" Width="Auto" Height="300"/>

            <StackPanel HorizontalAlignment="Stretch" Height="38" VerticalAlignment="Bottom">
                <CheckBox x:Name="ComplexDataCheckBox" Content="Show All Data" Click="ComplexDataCheckBox_Click" RenderTransformOrigin="1.751,0.547" Margin="0,4,0,0" Height="16" HorizontalAlignment="Right" Width="105" VerticalAlignment="Bottom">
                    <CheckBox.LayoutTransform>
                        <ScaleTransform ScaleX="2" ScaleY="2" />
                    </CheckBox.LayoutTransform>
                </CheckBox>
            </StackPanel>

            <StackPanel HorizontalAlignment="Stretch">
                        <syncfusion:SfDataGrid HorizontalAlignment="Stretch" Width="Auto" VerticalAlignment="Stretch" x:Name="SpecimenGrid" AutoGenerateColumns="True" RowStyleSelector="{StaticResource styleselector}"/>
            </StackPanel>

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

Seeing how you're placing your components, the outer grid is useless, a DockPanel would have beeen sufficient. To place other controls in a Grid you have to define ColumnDefinitions and RowDefinitions. As for the ScrollViewer don't define it's height, but define VerticalAlignement to stretch. The scrollbar will appear once the content wont' fit anymore — Sidewinder94

ASh ASh · Accepted Answer · 2016-06-03T13:15:07

if ScrollViewer has a Height equal to Grid height and not zero-vertical margin, it goes out Grid bounds.

it is better to put StackPanel and ScrollViewer in two separate Grid Rows:

<Grid x:Name="MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0">
        <!--Content-->
    </StackPanel>

    <ScrollViewer Grid.Row="1" 
                  HorizontalAlignment="Stretch" 
                  Margin="0"
                  CanContentScroll="True" >
        <!--Content-->
    </ScrollViewer>
</Grid>

Trouble with WPF ScrollViewer resize

1 Answers