understanding WPF Layout

Question

I got a ListView (wrapped in a ScrollViewer), which resizes itself if the elements inseretd exceed the visible area until the parents Max Height is reached.

The ListView is embedded the following way.

<Window ... SizeToContent="Height">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="2*" />                              
        </Grid.ColumnDefinitions>

        <ScrollViewer x:Name="MyScrollViewer" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListView   Name="MyListView" 
                        ItemsSource="{Binding Path=RetrievalStringResults, Mode=OneWay}" 
                        IsSynchronizedWithCurrentItem="True" />
        </ScrollViewer>

         <DockPanel Grid.Row="0" Grid.Column="1">
         ...
         </DockPanel>

         <Expander Grid.Row="1" Grid.ColumnSpan="2">
             <DockPanel Height="150"  HorizontalAlignment="Stretch">
                <TextBox DockPanel.Dock="Top" />
             </DockPanel>
         </Expander>

         <DockPanel Grid.Row="2" Grid.ColumnSpan="2">
         ... some buttons
         </DockPanel>
    </Grid>
</Window>

I used SizeToContent because I got a text box on the bottom wrapped in an Expander, which shall expanded on demand, and actually therefore my main window needs to resize. This actually works fine.

The problem is though the ListView's Height isn't the max height on start-up wherefore I got that "auto-resize" effect.

How can I set the ListView's hight to the max of the parents height to avoid this effect?

Another, more general issue. I think avoiding static layout parameters (static values for hight/width) is nice, but I got the feeling I'm loosing some control over my UI controls.

I recognized, resizeing my main window manually in height, it "jumps" by the 150 height of the DockPanel wrapped by the Expander on the bottom, anyway to avoid this?

What is the best pratice in dynamic UI Layout? I explored DockPanel beeing more dynamically in sizing to the surounding contorls than a StackPanel. But I guess thats not everything.

Answer 1

I think your issue is with your Grid definitions

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    ...

</Grid>

This means that the top row is going to be twice the size of rows 2 and 3, so the top row will only take up 50% of your space while your bottom two rows each take up 25% space.

If you want the top row to take up all available space, make sure it is the only * size row, and set the other rows to Auto so they will take up whatever space they need.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    ...

</Grid>