How do I do this simple layout scenario

ArchitektArchitekt USMember ✭✭

I am struggling with using the Xamarin layouts. They're not intuitive. I have a situation like this: I have a box and a label. I want the label's width to be capped at the lesser of 75% of the parent view's width or the actual width of the label. I want the box to be the size of the label plus a border (and to be drawn beneath the label). In my head, this is how it would work based on what I'm used to doing with GUI layouts:

var measuredLabelWidth = label.MeasureWidth();
label.Width = Math.min(0.75*parent.Width, measuredLabelWidth);
label.Height = label.MeasureHeight();
box.Width = label.Width + border*2;
box.Height = label.Height + border*2;
label.X = box.X + border;
label.Y = box.Y + border;

My problem is that it seems you can only set a minimum width or the desired width. But no maximum. I tried setting the label's WidthRequest to 75% of the parent view but then it just always sets it to that: even if I have a label with 1 letter, it will be resized to take up that full width. Which then means the box background is way too wide. And I tried to see what the width of the label would be given my width constraint by calling label.Measure with 75% of the parent's width, but it just returned -1 for the sizes. Here's an example of what I want that also showcases my amazing MS Paint abilities:

Answers

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hi @Architekt,
    Why you want to assign the width using the caclualtions
    You can always use StackLayout, and Grid or any other control within the same.

    Hope it helps.
    Reference:

    -- N Baua

  • ArchitektArchitekt USMember ✭✭

    That's not what I'm talking about. I want to cap my label at a max width: if it's shorter, use that width. The calculations are an example illustrating how my brain is used to thinking about the problem. I don't know how to say that using layouts: from what I can see I can only define a minimum width and a desired width.

  • JohnHardmanJohnHardman GBUniversity mod

    Be aware that MinimumWidthRequest does not do what you would expect. Xamarin have been asked to make the behavior match the expectation (based on the name and documentation) but have not done so thus far. The same is true of MinimumHeightRequest.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Two things:
    1) Stop making UI in code behind. Use XAML like the rest of the real-world software development teams.
    2) > My problem is that it seems you can only set a minimum width or the desired width. But no maximum. I tried setting the label's WidthRequest to 75% of the parent view
    Stick the Label inside a Grid which you can control the width of with more precision. You can give the Grid columns that are defined portions of their parent view (the Page). Therefore the Label can get smaller within the Grid but not exceed the width of the column so you get your max width by being inside a limiting container.

Sign In or Register to comment.