Resize ScrollableArea content

Is it possible to somehow resize the ScrollableArea content at runtime? I’d like to dynamically resize the container depending on its current contents - i.e. I’d like to increase or decrease the container’s height depending on what I need to display. I can’t see a way of doing it as you can’t increase the height at runtime (“Cannot assign a value to this property”) and I tried cloning the current container to modify that, with similar results.

Any ideas?

Yes, it is possible to change the height of the scrollable area’s content at runtime, via layout constraints.

This is quickly copied and edited from my project, with contentHeight set to a fixed value. Obviously, replace that with whatever you want at runtime.

This method is called from the view the contains the iOSScrollableArea. You’ll also need a property iOSLayoutConstraint called contentHeightConstraint that you can use to keep track of whether there’s an existing height constraint that needs to be removed before adding a new one.

[code]dim contentHeight as Integer = 1000

If contentHeightConstraint <> Nil Then // Remove any existing contrainst, otherwise the new one will be ignored
Self.RemoveConstraint( contentHeightConstraint )
End If

contentHeightConstraint = New iOSLayoutConstraint( theScrollableArea.Content, _
iOSLayoutConstraint.AttributeTypes.Height, _
iOSLayoutConstraint.RelationTypes.Equal, _
Nil, _
iOSLayoutConstraint.AttributeTypes.None, _
1, _
contentHeight )

Self.AddConstraint( contentHeightConstraint )[/code]

Ah of course! Thank you Tom, exactly what I needed.

This works great when the view first opens ( I create constraints for both height and width) and I call the method from the Open event handler for the view.

But if I rotate the device and call the method from the Resized event handler, the controls in the ContainerControl don’t resize their width.

What am I missing?

Hey Art, please provide some more details if I’m missing something here, but it sounds like you’re saying:

  1. You have a ContainerControl that contains some controls.

  2. When the device rotates, the Resized event fires.

  3. The controls inside the ContainerControl don’t resize.

But what’s not clear is whether the ContainerControl is not resizing (in which case I suspect something’s up with the auto layout constraints on the ContainerControl) or whether the ContainerControl is resizing but the controls within it are not (in which case I suspect that you haven’t set up the auto layout constraints on the controls within the ContainerControl to automatically resize when the ContainerControl is resized).

Is that helpful?

Hi Tom,

Yes, I have a containercontrol in a scrollable area on the view. The container holds a couple labels, an imageview, and a table.

I created a method and width property on the view using your example code. I call that method in a view Resized event. It fires when the view first opens, then fires twice more when I rotate the (simulator) device. Turns out I only need the width constraint to get it work properly.

The container does resize properly to fill the view. When the view first opens, the controls in the container obey their layout constraints relative to the container.

When I rotate the view, the container itself does resize properly to fill the view, but the controls in the container stay the way they were and don’t resize. I’ve got all the constraints defined on the controls (Parent.Left, Parent.Right, etc.).

I shouldn’t have to redefine the control constraints in code, should I?

I think I found it. I was setting contentWidth to the scrollable area width, when I should have been setting it to Self.Size.Width (the view).

Great, glad you got to the bottom of this. I live auto layout in many ways, but debugging it can be a bit tricky.