Currently we need to use Reference items in order to center something in a RelativeLayout. This can be seen in the Sample Project, and I can confirm that it seems to be the only way in practice.
Now that there's a bug in Opacity, I have to also add a TextColor to match the background in order to prevent the reference label from appearing. (This obviously breaks down on a gradient or image background).
Anyways, this feels a little bit hokey for centering. I would "hope" that there will be a way to figure out the height and width of the element when setting the Constraints so that the center point will be the center of the element rather than the top right corner.
Will the day come when we don't need to use Reference items for centering in a RelativeLayout?
private View BuildTile(SegmentViewModel segment)
{
var segmentIcon = new FontAwesomeLabel { Text = segment.Icon, TextColor = Color.Black, FontSize = 60f };
var titleLabel = new Label { Text = segment.Title, TextColor = Color.Black, Font = Font.SystemFontOfSize(Device.OnPlatform(12, 14, 14)) };
// hidden references for centering purposes
// note we're setting the text color to white because opacity is broken in X.Forms 1.2.1
var referenceIcon = new FontAwesomeLabel { Text = segment.Icon, FontSize = 60f, Opacity = 0, TextColor = Color.White};
var referenceTitle = new Label { Text = segment.Title, Font = Font.SystemFontOfSize(Device.OnPlatform(12, 14, 14)), Opacity = 0, TextColor = Color.White };
var innerLayout = new RelativeLayout();
var centerX = Constraint.RelativeToParent(parent => parent.Width / 2);
var centerY = Constraint.RelativeToParent(parent => parent.Height / 2);
// hidden reference
innerLayout.Children.Add(referenceIcon, centerX, centerY);
innerLayout.Children.Add(referenceTitle, centerX, centerY);
// segment icon
innerLayout.Children.Add(segmentIcon,
Constraint.RelativeToView(referenceIcon, (parent, sibling) => sibling.X - sibling.Width / 2), // X
Constraint.RelativeToView(referenceIcon, (parent, sibling) => sibling.Y - sibling.Height / 2)); // Y
// title
innerLayout.Children.Add(titleLabel,
Constraint.RelativeToView(referenceTitle, (parent, sibling) => sibling.X - sibling.Width / 2), // X
Constraint.RelativeToView(segmentIcon, (parent, sibling) => sibling.Y + 60));
return new ContentView
{
BackgroundColor = Color.White,
Content = innerLayout,
VerticalOptions = LayoutOptions.FillAndExpand
};
}