防止RowHeight = Auto拉伸我的网格？

In my scenario, the end user customizes his or her user interface by breaking it into rows and defining the height rule for those rows (fixed, fill space, fit content). I implement this using the WPF Grid.

在我的场景中,最终用户通过将用户界面分成行并定义这些行的高度规则(固定,填充空间,适合内容)来自定义用户界面。我使用WPF Grid实现了这一点。

The Grid starts filling the entire screen, and should not get any bigger - the user MUST be able to see the entire Grid at all times (scroll bars WITHIN rows are okay, but not scroll bars for the entire grid).

Grid开始填满整个屏幕,并且不应该变得更大 - 用户必须始终能够看到整个Grid(滚动条WITHIN行是可以的,但不是整个网格的滚动条)。

The crux of my problem: When the user creates one or more "auto" sized rows, the content in those rows can force the size of the entire grid to expand, introducing scroll bars, even when I've set the max height of the grid to a fixed number.

我的问题的关键:当用户创建一个或多个“自动”大小的行时,这些行中的内容可以强制整个网格的大小扩展,引入滚动条,即使我设置了最大高度网格到固定的数字。

It gets worse when a star-sized row is involved, because once the grid is stretched a little, that star-sized row fills the available space, so the grid is PERMANENTLY stretched even when the auto-size row later shrinks.

当涉及星形行时会变得更糟,因为一旦网格被拉伸一点,那个星形大小的行就会填充可用空间,因此即使自动大小行稍后收缩,网格也会永久拉伸。

I need to find a way to restrict "auto" rows so that they expand and shrink as needed, BUT the total actual height of all rows is never larger than the entire grid.

我需要找到一种限制“自动”行的方法,以便它们根据需要进行扩展和缩小,但是所有行的总实际高度绝不会大于整个网格。

To illustrate, I have this grid with fixed max height, and rows representing all size modes.

为了说明,我有一个固定最大高度的网格,以及代表所有大小模式的行。

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

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <TextBlock>
        abc<LineBreak/>
        abc<LineBreak/>
        abc<LineBreak/>
        abc<LineBreak/>
        abc<LineBreak/>                    
    </TextBlock>
</ScrollViewer>

In this example, as the "abc" text block expands, the total height of the grid stretches beyond the fixed "300" maximum height. How can I prevent this behavior to guarantee the maximum height of the grid, while keeping the flexibility of the auto-size rows?

在此示例中,随着“abc”文本块的扩展,网格的总高度超出固定的“300”最大高度。如何防止此行为以保证网格的最大高度,同时保持自动大小行的灵活性?

1 个解决方案

#1

Okay, I discovered that I had to subclass Grid so that I could override Measure() and Arrange() layout steps.

好吧,我发现我必须继承Grid,以便我可以覆盖Measure()和Arrange()布局步骤。

I don't claim that this is a great general purpose solution, but it works for my scenario. Note especially that I'm not dealing with columns, since in my case, there's only one column. I'm also not positioning elements within the cells (I'm leaving them anchored at top-left).

我并不认为这是一个很棒的通用解决方案,但它适用于我的场景。请特别注意我不处理列,因为在我的情况下,只有一列。我也没有在细胞内定位元素(我将它们固定在左上角)。

If you need a more general solution, I think this is a very good start. The column problem is the same as the row problem, just in the other direction.

如果您需要更通用的解决方案,我认为这是一个非常好的开始。列问题与行问题相同,只是在另一个方向上。

class NoStretchGrid:Grid
{
    //this override determines what size we ask to be
    //gotta make sure we never ask for more than the max height
    protected override System.Windows.Size MeasureOverride(System.Windows.Size constraint)
    {
        //what would a basic Grid do?
        System.Windows.Size desiredSize = base.MeasureOverride(constraint);

        if (desiredSize.Height > constraint.Height)
            desiredSize.Height = constraint.Height;

        //if max height is defined and desired height is too big, reduce it
        if (this.MaxHeight != double.NaN && desiredSize.Height > this.MaxHeight)
        {
            desiredSize.Height = this.MaxHeight;
        }

        return desiredSize;
    }

    //this override tells child controls how big they can be and where they're positioned
    protected override System.Windows.Size ArrangeOverride(System.Windows.Size arrangeSize)
    {
        //must decide how tall each row will be
        double[] desiredHeights = new double[this.RowDefinitions.Count];
        double[] minimumHeights = new double[this.RowDefinitions.Count];
        double[] finalHeights = new double[this.RowDefinitions.Count];

        //first, find out how tall each row wants to be

        //check for fixed-size rows
        for (int i = 0; i < desiredHeights.Length; i++)
        {
            if (this.RowDefinitions[i].Height.IsAbsolute)
            {
                desiredHeights[i] = this.RowDefinitions[i].Height.Value;
            }
            else
            {
                desiredHeights[i] = 0;
            }

            minimumHeights[i] = this.RowDefinitions[i].MinHeight;
        }

        //then ask children how big they want to be
        foreach (UIElement child in this.InternalChildren)
        {
            int row = Grid.GetRow(child);
            if (!this.RowDefinitions[row].Height.IsAbsolute && child.DesiredSize.Height > desiredHeights[row])
            {
                desiredHeights[row] = child.DesiredSize.Height;
            }

            if ((child as FrameworkElement).MinHeight > minimumHeights[row])
            {
                minimumHeights[row] = (child as FrameworkElement).MinHeight;
            }
        }

        double availableHeight = arrangeSize.Height;

        //reserve minimum heights
        for (int i = 0; i < minimumHeights.Length; i++)
        {
            finalHeights[i] = minimumHeights[i];
            availableHeight -= finalHeights[i];
        }            

        //allow fixed-height rows their height - if some ignoramus made fixed-heights too big, we can't help him
        for (int i = 0; i < desiredHeights.Length; i++)
        {
            if (this.RowDefinitions[i].Height.IsAbsolute)
            {
                finalHeights[i] = this.RowDefinitions[i].Height.Value;
                availableHeight = availableHeight + minimumHeights[i] - finalHeights[i];
            }
        }

        //allow auto-size rows their desired heights, so long as there's height left to be had
        for (int i = 0; i < desiredHeights.Length; i++)
        {                
            if (this.RowDefinitions[i].Height.IsAuto)
            {
                double desiredHeightIncrease = desiredHeights[i] - minimumHeights[i];

                if (desiredHeightIncrease <= availableHeight)
                {
                    finalHeights[i] += desiredHeightIncrease;
                    availableHeight -= desiredHeightIncrease;
                }
                else
                {
                    finalHeights[i] = minimumHeights[i] + availableHeight;
                    availableHeight = 0;
                }
            }
        }

        //now that auto-size rows have been prevented from getting out of control, make the min heights of any star-size rows available again
        for (int i = 0; i < desiredHeights.Length; i++)
        {
            if (this.RowDefinitions[i].Height.IsStar)
            {
                availableHeight += minimumHeights[i];
            }
        }

        //divide any leftover available height proportionally amongst the star-sized rows, while there's height left to be had
        double totalStarValues = 0;
        for (int i = 0; i < desiredHeights.Length; i++)
        {
            if (this.RowDefinitions[i].Height.IsStar)
            {
                totalStarValues += this.RowDefinitions[i].Height.Value;
            }
        }

        for (int i = 0; i < desiredHeights.Length; i++)
        {
            if (this.RowDefinitions[i].Height.IsStar)
            {
                finalHeights[i] = availableHeight * (this.RowDefinitions[i].Height.Value / totalStarValues);
            }
        }

        //decide the vertical position of each row
        double[] rowPositions = new double[desiredHeights.Length];
        rowPositions[0] = 0;
        for (int i = 1; i < rowPositions.Length; i++)
        {
            rowPositions[i] = rowPositions[i - 1] + finalHeights[i - 1];
        }

        //tell children to lay themselves out based on these results
        foreach (UIElement child in this.InternalChildren)
        {
            int row = Grid.GetRow(child);

            //special case for scrollviewer, which doesn't size itself appropriately
            if (child is ScrollViewer)
            {
                ScrollViewer scrollViewer = child as ScrollViewer;

                //temporarily update its height value, JUST for the Arrange() call
                double oldHeight = scrollViewer.Height;
                scrollViewer.Height = finalHeights[row];
                child.Arrange(new Rect(0, rowPositions[row], arrangeSize.Width, finalHeights[row]));

                //restore the original value
                scrollViewer.Height = oldHeight;
            }

            //typical case for non-scroll-viewers
            else
            {
                child.Arrange(new Rect(0, rowPositions[row], arrangeSize.Width, finalHeights[row]));
            }
        }

        return arrangeSize;
    }
}

Here's a test case. Drop this in a Window and resize the window to see it working.

这是一个测试案例。将其放在窗口中并调整窗口大小以使其正常工作。

<local:NoStretchGrid VerticalAlignment="Stretch">

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

    <ScrollViewer VerticalScrollBarVisibility="Visible" MinHeight="50">
        <Rectangle Fill="Orange" Height="250"/>
    </ScrollViewer>

    <ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" MinHeight="50">
        <Rectangle Fill="Blue" Height="200"/>
    </ScrollViewer>

    <Grid Background="Pink" Grid.Row="2" MinHeight="30"/>
    <Grid Background="Green" Grid.Row="3" MinHeight="30"/>
    <Grid Background="Red" Grid.Row="4"/>

</local:NoStretchGrid>