如何与扩展器共享网格的高度，以便它可以占用最大空间 [英] How can I share the height of the grid with expander so that it can occupy the maximum space

问题描述

我有一个分为3部分的专栏。第一部分有一个表格，剩下的2部分有扩展器。



我想要的是默认情况下我希望扩展器到屏幕的底部以及何时它扩展它应该从窗体的终点开始，并且应该占据剩余的空间，当第二个扩展器打开扩展器中的空间sholud划分时。



我尝试了什么：



我尝试过使用stackpanel，dock和grid但是dint得到了成功

I have a column which is divided in 3 parts. the first part have a form and the rest 2 part have expander.

What i want is that by default i want the expander to the bottom of the screen and when it expand it should start from the end point of the form and should occupy the space left and when the second expander open the space sholud divide in both the expander.

What I have tried:

I have tried using stackpanel, dock and grid but dint got the success

推荐答案

你真的需要发布代码，因为可能有其他属性设置可能影响所提供的解决方案。



但简而言之，你网格应该像以下一样加强：

You really need to post the code as there may be other properties set that could affect the solutions offered.

But in a nutshell, you grid should be step up like:

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

   <!-- Form goes here with VerticalAlignment="Stretch" and no height set -->

   <Expander Grid.Row="1"> <!-- again, no height set -->
   </Expander>

</Grid>

现在，当扩展器打开时，网格将自动调整大小内容。

Now, when the Expander is opened, the grid will automatically adjust the sizing of the contents.

首先，您必须保留第一部分的高度。如果您自动调整Expander区域的大小，您最终可能只需要压缩第一个控件，因此您需要将第一行设置为Auto和/或MinHeight



扩展器行你确实想要使用自动高度，这样当折叠时它不会占用其他的空间，但是使用两个扩展器时，最大高度将取决于另一个的扩展状态。有一些更简单的方法可以正确调整一个扩展器的大小。



扩展器是无限高度控件，如StackPanel，这意味着它们不受容器限制的限制。所以这意味着如果你有一个大的内容而你没有设置它的最大高度，第一个扩展器可以将底部扩展器从屏幕上吹掉。



这个诀窍case使用大小有界控件作为占位符来获取剩余大小。实际上有几种情况会让生活变得更简单......



以下是您可以使用的样本，应该适用于您：

First off you have to retain the first part's height. If you auto size the Expander area you could end up just squashing the first control so you need to set the first row to Auto and/or a MinHeight

The expander rows you do want to use Auto height so that when collapsed it won't take up space for the others, but with two expanders the maximum heights are going to be dependent on the expanded state of the other. There are a lot simpler approaches for sizing one expander correctly.

Expanders are infinite height controls like the StackPanel, meaning they aren't bounded by the limits of their container. So this means if you have a large content and you don't set it's maximum height the first expander could blow the bottom expander off the screen.

The trick in this case is using a size bounded control as a placeholder to get the remaining size. There's actually a few situations that makes life a bit simpler...

Below is a sample you can play around with that should work for you:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Fixed Line"/>
    <Rectangle x:Name="RectangleSizeHolder"
               Grid.Row="1"
               SizeChanged="RectangleSizeHolder_SizeChanged"/>
    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Expander x:Name="FirstExpander"
                  Grid.Row="0"
                  Height="Auto"
                  MinHeight="30"
                  Header="First Header"
                  Expanded="ExpanderChanged"
                  Collapsed="ExpanderChanged">
            <Expander.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <DockPanel Height="1000"
                               LastChildFill="False">
                        <TextBlock DockPanel.Dock="Top" Text="Top First"/>
                        <TextBlock DockPanel.Dock="Bottom" Text="Bottom First"/>
                    </DockPanel>
                </ScrollViewer>
            </Expander.Content>
        </Expander>
        <Expander x:Name="SecondExpander"
                  Grid.Row="1"
                  Height="Auto"
                  MinHeight="30"
                  Header="Second Header"
                  Expanded="ExpanderChanged"
                  Collapsed="ExpanderChanged">
            <Expander.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <DockPanel Height="1000"
                           LastChildFill="False">
                        <TextBlock DockPanel.Dock="Top" Text="Top Second"/>
                        <TextBlock DockPanel.Dock="Bottom" Text="Bottom Second"/>
                    </DockPanel>
                </ScrollViewer>
            </Expander.Content>
        </Expander>
    </Grid>

代码落后：

With code behind:

private void ExpanderChanged(object sender, RoutedEventArgs e)
{
    SetHeights();
}

private void RectangleSizeHolder_SizeChanged(object sender, SizeChangedEventArgs e)
{
    SetHeights();
}

private void SetHeights()
{
    FirstExpander.MaxHeight = !SecondExpander.IsExpanded ? RectangleSizeHolder.ActualHeight - SecondExpander.MinHeight :
        RectangleSizeHolder.ActualHeight / 2;

    SecondExpander.MaxHeight = !FirstExpander.IsExpanded ? RectangleSizeHolder.ActualHeight - FirstExpander.MinHeight :
        RectangleSizeHolder.ActualHeight / 2;
}

这篇关于如何与扩展器共享网格的高度，以便它可以占用最大空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！