DockPanel does not constrain height

Question

I am trying to limit the height of a DockPanel (well the content acually) to the remaining UserControl Height with a ScrollViewer in it to scroll if its too big.

I have a window wich uses a ContentController to hold the different UserControls

<Window>
<Grid>
<Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <!--  0 Menu -->
        <RowDefinition Height="auto"/>
        <!--  1 Header -->
        <RowDefinition Height="65"/>
        <!--  2 Content -->
        <RowDefinition Height="*"/>
        <!--  3 Space -->
        <RowDefinition Height="10"/>
        <!--  4 Status line -->
        <RowDefinition Height="auto"/>
        <!--  5 Space -->
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
<!--...-->
<ContentPresenter Content="{Binding Path=MainWindowContent}" Grid.Column="0" Grid.Row="2"/>
<!--...-->
</Grid>
</Window>

The UserControl wich I having trouble with is just a search for users and the output of the results. It does look like this:

<UserControl>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="12"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="10"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <Grid Grid.Column="1" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Border Grid.Column="0" Grid.Row="0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition />
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="10"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- input fields -->

                    <DockPanel Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="6" LastChildFill="True" VerticalAlignment="Stretch" Background="{StaticResource PrimaryCorporateBrush}">
                        <TextBlock Style="{StaticResource HeadlineOutputLabel}" DockPanel.Dock="Top"/>


                        <Separator Opacity="0" Height="10" DockPanel.Dock="Top"/>
                        <TextBlock Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2RevertedVisibility}}" Margin="10" DockPanel.Dock="Top"/>
                        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2Visibility}}">
                            <ItemsControl ItemsSource="{Binding Path=Members}" VerticalAlignment="Stretch">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Border Tag="{Binding}">
                                            <!-- Result Element -->
                                        </Border>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ScrollViewer>
                    </DockPanel>
                </Grid>
            </Border>
        </Grid>

        <Grid Grid.Column="3" Grid.Row="1">
            <!-- info display -->
        </Grid>
    </Grid>
</UserControl>

I intent to limit the Results ScrollViewer height to the remaining visible space of the window, and if the results exceed it to display a scrollbar. But right now the DockPanel keeps extending the ScrollViewer and nested ItemsControl height till all elements are placed but does NOT show the ScrollBar. I am a bit lost here why it does that, shouldn't the DockPanel limit the Height to the visible space? tried it with putting buttons instead of ItemsControl, nothing no ScrollBar.

TheSamsa TheSamsa · Accepted Answer · 2014-07-10T09:53:36

I found the solution!

Further up in the Grid structure there was a row set to "auto" instead of "*" and ScrollViewer seems to only function properly with latter.

DockPanel does not constrain height

1 Answers