How do I force a square layout on my AbsoluteLayout? - xamarin

Question

Anyone know why the following code doesn't execute the OnMeasure() in my Forms app?? I'm basically trying to force an AbsoluteLayout to have the same height/width to show up as a Square:
public class AbsoluteSquareLayout : AbsoluteLayout
{
protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
var size = Math.Min(widthConstraint, heightConstraint);
return base.OnMeasure(size, size);
}
}

Answer 1

Overriding size constraints in OnMeasure call doesn't guarantee final size - as the final Layout pass from parent layout will override this value. XF article here talks about this in detail.
In order to be able to achieve a square layout - you will have to update the parent layout to consider those constraints, and ensure it is passed in layout pass.
For example you can extend AbsoluteLayout to dynamically calculate the size constraints for children. This custom layout treats all children as squares by default. In order to override that behavior for a particular child - you can set attached property SquareLayout.IsSquare as false.
public class SquareLayout : AbsoluteLayout
{
public static readonly BindableProperty IsSquareProperty =
BindableProperty.CreateAttached("IsSquare",
typeof(bool),
typeof(SquareLayout),
defaultValue: true,
defaultBindingMode: BindingMode.OneWay);
public static bool GetIsSquare(BindableObject view)
{
return (bool)view.GetValue(IsSquareProperty);
}
public static void SetIsSquare(BindableObject view, bool value)
{
view.SetValue(IsSquareProperty, value);
}
Dictionary<View, Rectangle> _boundsCache = new Dictionary<View, Rectangle>();
protected override void LayoutChildren(double x, double y, double width, double height)
{
foreach(var child in Children)
{
var isSquare = GetIsSquare(child);
if(isSquare)
{
Rectangle bounds;
if (!_boundsCache.ContainsKey(child))
_boundsCache[child] = bounds = GetLayoutBounds(child);
else
bounds = _boundsCache[child];
var absFlags = GetLayoutFlags(child);
var widthIsProportional = (absFlags & AbsoluteLayoutFlags.WidthProportional) != 0;
var heightIsProportional = (absFlags & AbsoluteLayoutFlags.HeightProportional) != 0;
var childWidth = widthIsProportional ? bounds.Width * width : bounds.Width;
var childHeight = heightIsProportional ? bounds.Height * height : bounds.Height;
var size = Math.Min(childWidth, childHeight);
SetLayoutBounds(
child,
new Rectangle(
bounds.X,
bounds.Y,
(widthIsProportional ? (size / width) : size),
(heightIsProportional ? (size / height) : size)
)
);
}
}
base.LayoutChildren(x, y, width, height);
}
}
Sample usage:
<local:SquareLayout>
<AbsoluteLayout BackgroundColor="Green"
AbsoluteLayout.LayoutBounds=".1,.1,1,1"
AbsoluteLayout.LayoutFlags="All" />
<AbsoluteLayout BackgroundColor="Blue"
AbsoluteLayout.LayoutBounds=".5,.5,.2,.1"
AbsoluteLayout.LayoutFlags="All" />
<AbsoluteLayout BackgroundColor="Red"
AbsoluteLayout.LayoutBounds=".9,.9,200,200"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<AbsoluteLayout BackgroundColor="Yellow"
AbsoluteLayout.LayoutBounds="10,20,.3,.3"
AbsoluteLayout.LayoutFlags="SizeProportional" />
<AbsoluteLayout BackgroundColor="Silver"
local:SquareLayout.IsSquare="false"
AbsoluteLayout.LayoutBounds=".9,.9,1,.1"
AbsoluteLayout.LayoutFlags="All" />
</local:SquareLayout>