Collapsing control with binding in FluentLayout

Question

If we order two controls in fluent layout one below the other

this.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
this.AddConstraints(
      _lblTitle.AtTopOf(this, 10)
      , _lblTitle.AtLeftOf(this, 15)
      , _lblTitle.AtRightOf(this, 5)

      , _lblFullName.Below(_lblTitle, 5)
      , _lblFullName.AtLeftOf(this, 0)
      , _lblFullName.AtRightOf(this, 0));

...and we want in some scenarios to hide _lblTitle. We can do it with binding.

set.Bind(_lblTitle)
   .For(c => c.Hidden)
   .To(vm => vm.ShowTitle)
   .WithConversion("Visibility");  

Problem is that _lblTitle would not collapse, that ofcourse leave us with empty space on begining.

We can try in certain situations to remove Text from label. That indeed colapse text-part of the label but does not colapse 10 points margin that we defined. What can lead to undesired effect especially if label has different background color.

I didn't try to bind Height of the control in order to hide it because I don't know on what value to set Height if I want to show hidden control which is flexible in size.

I couldn't find any solution in QuickLayout solution of the FluentLayout.

Answer 1

We have something similar to this when the SizeClass changes. We Add and Remove the constraints as necessary.

In your example can you not create the Constraint for _lblFullName's Top and store that as a private variable.

this.fullNameTopConstraint = 
             this._lblFullName.Below(this._lblTitle).ToLayoutConstraints().First()

Then when the visibility of _lblTitle changes update the constraint to be either from the Top of this or from the Bottom of _lblTitle