使用 ScrollViewer 调整大小的窗口

Question

我有一个 wpf c# 应用程序。 在我的窗口中，我想在它打开时从某个高度开始。但我也想让用户能够调整窗口大小。 我的窗口有一个将 lastChildFill 设置为 true 的停靠面板。它在左侧有一棵树，用于选择您希望查看其详细信息的部分，在中间有一个分隔符，在右侧有该部分的详细信息（您需要最后一个子填充，这样才能获得所有剩余空间）。 代码如下所示：

 <StackPanel>
    <DockPanel LastChildFill="True" Background="#344755">
        <TextBlock Text="Header" Background="#344755" Foreground="White"/>
    </DockPanel>
    <DockPanel LastChildFill="True" Margin="5">
        <telerik:RadTreeView x:Name="treeV">
                <telerik:RadTreeView.Items>
                    <telerik:RadTreeViewItem Header="General" />
                    <telerik:RadTreeViewItem Header="General2" />
                    <telerik:RadTreeViewItem Header="General3" />
                    <telerik:RadTreeViewItem Header="General4" />
                </telerik:RadTreeView.Items>
            </telerik:RadTreeView>
        <Separator/>
        <Grid >
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                  <ItemsControl>

                         <DockPanel LastChildFill="True"  Margin="5">
                            <Grid  >
                                <TextBlock Text="Something"></TextBlock>
                                <CheckBox  HorizontalAlignment="Right"/>
                           </Grid>
                        </DockPanel>
                        // And many more dock panels
                   </ItemsControl>
            </ScrollViewer>
        </Grid >
    </DockPanel>
</StackPanel>

这是我的问题：如果我不给第二个停靠面板高度，那么窗口会自动变大并且滚动条永远不会显示。如果我确实给出了高度，那么滚动确实会显示，但如果用户调整窗口大小，停靠面板不会调整大小，分隔符也不会调整。

有什么想法吗？

Answer 1

您需要重新考虑布局 一方面，您不需要停靠面板来填充可用区域

这里是最常见布局的简要说明

• StackPanel 创建一个自上而下或从左到右的项目列表 安排

• 网格将项目附加到由大小行和列定义的网格（统一网格的作用相同，但行和列设置为相等地填充可用空间）

• Dockpanel 使用添加顺序将项目附加到其边缘 和 Dock 属性，默认情况下最后一项设置为填充 中间

• 画布将项目定位在距边缘固定距离的位置

如果你想让 w 在左边 z 在右边，x 和 Y 共享中心，那么给定控件 w,x,y,z

<DockPanel>
    <w DockPanel.Dock="Left" />
    <z DockPanel.Dock="Right" />
    <UniformGrid Columns="2">
        <x/>
        <y/>
    </UniformGrid>
</DockPanel>

如果您希望 w 覆盖屏幕的前 1/4，并且 x、y 和 z 垂直堆叠在剩余的 3/4 上并且可以滚动，您可以这样做

<Grid>
    <Grid.ColumnDefintions>
        <ColumnDefintion \>
        <ColumnDefintion Width="3*" \>
    <Grid.ColumnDefintions>
    <w/>
    <ScrollViewer>
        <StackPanel>
            <x/>
            <x/>
            <x/>
        </StackPanel>
    </ScrollViewer>
</Grid>

如果布局容器中只有 1 个项目，则不需要该容器

快速调整一下上面的代码，它可以简化为

<DockPanel Background="#344755">
    <TextBlock DockPanel.Dock="Top" Text="Header" Foreground="White"/>
    <TreeView x:Name="treeV">
        <TreeViewItem Header="General" />
        <TreeViewItem Header="General2" />
        <TreeViewItem Header="General3" />
        <TreeViewItem Header="General4" />
    </TreeView>
    <Separator/>
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <CheckBox  HorizontalAlignment="Right">Something</CheckBox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>
    </ScrollViewer>
</DockPanel>

或者如果你真的没有集合来将项目控件绑定到

<DockPanel Background="#344755">
    <TextBlock DockPanel.Dock="Top" Text="Header" Foreground="White"/>
    <TreeView x:Name="treeV">
        <TreeViewItem Header="General" />
        <TreeViewItem Header="General2" />
        <TreeViewItem Header="General3" />
        <TreeViewItem Header="General4" />
    </TreeView>
    <Separator/>
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel>
            <CheckBox  HorizontalAlignment="Right">Something</CheckBox>
            <CheckBox  HorizontalAlignment="Right">Something</CheckBox>
            <CheckBox  HorizontalAlignment="Right">Something</CheckBox>
            <CheckBox  HorizontalAlignment="Right">Something</CheckBox>
            <CheckBox  HorizontalAlignment="Right">Something</CheckBox>
            ... 
        </StackPanel>
    </ScrollViewer>
</DockPanel>