-2

For the past few days I've been trying to wrap my head around the following layout of TextBlocks:

-------------------- -----------
|         1        | |         |
-------------------- |    3    |
|       2       |    |         |
-----------------    -----------

All of the TextBlocks have dynamic width. They have fixed height and are in a fixed-size container. They need to meet the following requirements:

  • 2 has maximum priority - it needs to always be at full length.
  • 3 can fill the remaining space left after sizing 2.

When ignoring TextBlock 1, these two requirements could be fulfilled by putting the two other TextBlocks in a Grid, with columns set to "auto" and "*" respectively.

There is a third requirement though:

  • 1 assumes all the space it can, but without restricting 3.

Examples:

Long content in block 3 (block 2 content is full length, block 3 content gets trimmed):

----------------- -------------
|       1       | |           |
----------------- |     3     |
|       2       | |           |
----------------- -------------

Short content in block 3 (both block 2 and 3 content are full length; block 1 fills the remaining space):

--------------------- ---------
|         1         | |       |
--------------------- |   3   |
|       2       |     |       |
-----------------     ---------

Is there a way to achieve this layout in WPF? How?

1 Answer 1

0

I don't think this is possible with pure XAML. One way to accomplish your requirements is implementing your own panel that does all the magic. Here is one implementation:

public class SpecialPanel : Panel
{
    protected override Size MeasureOverride (Size constraint)
    {
        foreach (UIElement child in Children)
        {
            child.Measure (constraint);
        }

        return constraint;
    }

    protected override Size ArrangeOverride (Size arrangeSize)
    {
        if (VisualChildrenCount != 3)
        {
            return (arrangeSize);
        }

        Size sizeLabel0 = InternalChildren[0].DesiredSize;
        Size sizeLabel1 = InternalChildren[1].DesiredSize;
        Size sizeLabel2 = InternalChildren[2].DesiredSize;

        InternalChildren[1].Arrange (new Rect (0, sizeLabel0.Height, sizeLabel1.Width, sizeLabel1.Height));
        var maxRemainingWidthFor2 = arrangeSize.Width - sizeLabel1.Width;

        if (maxRemainingWidthFor2 <= 0)
        {
            InternalChildren[0].Arrange (new Rect (0, 0, sizeLabel0.Width, sizeLabel0.Height));
        }
        else
        {
            if (maxRemainingWidthFor2 < sizeLabel2.Width)
            {
                InternalChildren[2].Arrange (new Rect (arrangeSize.Width - maxRemainingWidthFor2, 0, maxRemainingWidthFor2, sizeLabel2.Height));
                InternalChildren[0].Arrange (new Rect (0, 0, Math.Min (sizeLabel0.Width, sizeLabel1.Width), sizeLabel0.Height));
            }
            else
            {
                var max0 = arrangeSize.Width - maxRemainingWidthFor2;
                var width0 = Math.Min (sizeLabel0.Width, max0);

                InternalChildren[2].Arrange (new Rect (arrangeSize.Width - sizeLabel2.Width, 0, sizeLabel2.Width, sizeLabel2.Height));
                InternalChildren[0].Arrange (new Rect (0, 0, arrangeSize.Width - sizeLabel2.Width, sizeLabel0.Height));. 
            }
        }

        return arrangeSize;
    }
}

Usage:

    <local:SpecialPanel>
        <Label
            x:Name="Label1"
            VerticalContentAlignment="Center"
            Content="TextBlock00000000000000" />
        <Label
            x:Name="Label2"
            VerticalContentAlignment="Center"
            Content="TextBloc111111111111" />
        <Label
            x:Name="Label3"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            Content="Label333333" />
    </local:SpecialPanel>
2
  • Thanks for the answer. However, it does not work as expected for the second example. I have modified your code to make it work, the last else branch needs to be changed to this: InternalChildren[2].Arrange (new Rect (arrangeSize.Width - sizeLabel2.Width, 0, sizeLabel2.Width, sizeLabel2.Height)); InternalChildren[0].Arrange (new Rect (0, 0, arrangeSize.Width - sizeLabel2.Width, sizeLabel0.Height));. If you modify your answer, I will accept it. Dec 26, 2016 at 15:22
  • I'm glad that you got the idea and are able to adapt the logic to your needs. I updated my answer.
    – gomi42
    Dec 27, 2016 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.