How to keep an area a constant/relative size while user expands/collapses treeview?

Question

I have a window that will be a variable size, currently it is 300 x 400 as shown below.

In the top part I have an expandable tree view In the bottom part I have a long horizontal panel with a button in it.

I want the top area (treeview) to be about 95% of the height, with the button tool area a constant 50 high.

I want these proportions to stay constant as the user expands and collapses the tree view (and as it expands below the button toolbar, I want the viewscroller to pop in with a scrollbar.

How can I do this? Here's the best I could do so far, but the button area moves up as the user collapses the tree view. :

<Window x:Class="TestSize8383.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="400">
    <Window.Resources>
        <Style TargetType="TreeViewItem">
            <Setter Property="IsExpanded" Value="True" />
        </Style>
    </Window.Resources>

    <DockPanel Background="Beige" Margin="3" LastChildFill="False">

        <ScrollViewer DockPanel.Dock="Top" Background="White" Margin="3">
            <TreeViewItem DockPanel.Dock="Top" Background="White" Header="Page 1" IsExpanded="True">

                <TreeViewItem Header="Part 1">
                    <TreeViewItem Header="Paragraph 1">
                        <TreeViewItem Header="Word 1"/>
                        <TreeViewItem Header="Word 2"/>
                    </TreeViewItem>
                    <TreeViewItem Header="Paragraph 2">
                        <TreeViewItem Header="Word 1"/>
                        <TreeViewItem Header="Word 2"/>
                    </TreeViewItem>
                    <TreeViewItem Header="Paragraph 3">
                        <TreeViewItem Header="Word 1"/>
                        <TreeViewItem Header="Word 2"/>
                    </TreeViewItem>

                    <TreeViewItem Header="Part 2">
                        <TreeViewItem Header="Paragraph 1">
                            <TreeViewItem Header="Word 1"/>
                            <TreeViewItem Header="Word 2"/>
                        </TreeViewItem>
                        <TreeViewItem Header="Paragraph 2">
                            <TreeViewItem Header="Word 1"/>
                            <TreeViewItem Header="Word 2"/>
                        </TreeViewItem>
                        <TreeViewItem Header="Paragraph 3">
                            <TreeViewItem Header="Word 1"/>
                            <TreeViewItem Header="Word 2"/>
                        </TreeViewItem>
                    </TreeViewItem>


                </TreeViewItem>
            </TreeViewItem>
        </ScrollViewer>

        <StackPanel DockPanel.Dock="Bottom" Background="Tan" Margin="3" Height="50">
            <Button Content="Previous" Margin="5"/>
        </StackPanel>

    </DockPanel>
</Window>

Answer 1

How about using a Grid instead of using a DockPanel?

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

    <ScrollViewer Grid.Row="0">
    ...
    </ScrollViewer>

    <StackPanel Grid.Row="1">
    ...
    </StackPanel>
</Grid>

Answer 2

Based on the fixed layout you describe, I would use a Grid instead of DockPanel like so:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0">
        <TreeView>
          <!-- items excluded for brevity -->
        </TreeView>
    </ScrollViewer>
    <StackPanel Grid.Row="1" Background="Tan" Margin="3">
        <Button Content="Previous" Margin="5" />
    </StackPanel>
</Grid>

Answer 3

You said the button must be a constant height of about 50 then immediately after that you talk about proportions? I'm not certain I understood you, but here is what I have for you in the meantime.

• Make the DockPanel to have LastChildFill = True
• Put the StackPanel above the ScrollViewer (first in the XAML code)
• Make the ScrollViewer have VerticalScrollBarVisibility="Auto"

This will have these effects:

• The button bar will always be visible
• The scrollbar will pop into view when it is needed only