如何在用户展开/折叠树视图时保持区域的常量/相对大小？

Question

我有一个可变大小的窗口，目前它是300 x 400，如下所示。

在顶部部分，我有一个可扩展的树状视图 在底部部分，我有一个长水平面板，里面有一个按钮。

我希望顶部区域（树视图）的高度大约为 95％，按钮工具区域的常数 50 高。

我希望这些比例保持常量，因为用户展开并折叠树视图（当它在按钮工具栏下方展开时，我希望viewscroller弹出一个滚动条< /强>

我该怎么做？这是迄今为止我能做的最好的事情，但是当用户折叠树视图时，按钮区域会向上移动。 ：

<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

如何使用Grid而不是使用DockPanel？

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

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

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

Answer 2

根据您描述的固定布局，我会使用Grid而不是DockPanel：

<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

你说按钮必须是一个大约50的恒定高度然后在你谈到比例后立即？我不确定我是否了解你，但在此期间，我就是为你提供的。

• 使DockPanel具有LastChildFill = True
• 将StackPanel放在ScrollViewer上方（首先在XAML代码中）
• 使ScrollViewer具有VerticalScrollBarVisibility =“Auto”

这将产生以下影响：

• 按钮栏将始终可见
• 仅在需要
时，滚动条才会弹出视图