I'm using Xamarin Forms to create a screen with two labels on the left and right sides of the screen. I'm having some issues with the positioning and text alignment of the labels on the right.
I've tried putting the labels in a Relative and Stack layout, but neither gets me to where I want to be, which is to have the two Right Labels be positioned relative to the right side of the screen, with right aligned text.
Code - Relative Layout
` //Quote Bottom Container - Relative
var quoteBottomView = new ContentView();
var quoteBottomLayout = new RelativeLayout();
var lblLeft = new Label
{
Text = "Left Label 1 ",
TextColor = colorGrey,
Font = Font.SystemFontOfSize(13)
};
var lblLeft2 = new Label
{
Text = "Left Label 2",
TextColor = colorGrey,
Font = Font.BoldSystemFontOfSize(13)
};
var lblRight = new Label
{
Text = "Right Label 1",
TextColor = colorGrey,
Font = Font.SystemFontOfSize(13),
XAlign = TextAlignment.End,
HorizontalOptions = LayoutOptions.EndAndExpand
};
var lblRight2 = new Label
{
Text = "Right Label 2",
TextColor = colorGrey,
Font = Font.BoldSystemFontOfSize(13),
XAlign = TextAlignment.End,
HorizontalOptions = LayoutOptions.EndAndExpand
};
quoteBottomLayout.Children.Add(lblLeft,
Constraint.Constant(padX),
Constraint.Constant(0));
quoteBottomLayout.Children.Add(lblLeft2,
Constraint.RelativeToView(lblLeft, (parent, sibling) =>
{
return sibling.Bounds.Right;
}),
Constraint.Constant(0));
quoteBottomLayout.Children.Add(lblRight,
Constraint.RelativeToParent((parent) =>
{
return parent.Bounds.Right - padX;
}),
Constraint.Constant(0));
quoteBottomLayout.Children.Add(lblRight2,
Constraint.RelativeToView(lblRight, (parent, sibling) =>
{
return sibling.Bounds.Left;
}),
Constraint.Constant(0));
quoteBottomView.Content = quoteBottomLayout;
`
Result
Code - StackLayout
` //Quote Bottom Container - Stack
var quoteBottomView = new ContentView();
var quoteBottomLayout = new StackLayout();
quoteBottomLayout.Orientation = StackOrientation.Horizontal;
var lblLeft = new Label
{
Text = "Left Label 1 ",
TextColor = colorGrey,
Font = Font.SystemFontOfSize(13)
};
var lblLeft2 = new Label
{
Text = "Left Label 2",
TextColor = colorGrey,
Font = Font.BoldSystemFontOfSize(13)
};
var lblRight = new Label
{
Text = "Right Label 1",
TextColor = colorGrey,
Font = Font.SystemFontOfSize(13),
XAlign = TextAlignment.End,
HorizontalOptions = LayoutOptions.EndAndExpand
};
var lblRight2 = new Label
{
Text = "Right Label 2",
TextColor = colorGrey,
Font = Font.BoldSystemFontOfSize(13),
HorizontalOptions = LayoutOptions.EndAndExpand
};
quoteBottomLayout.Children.Add(lblLeft);
quoteBottomLayout.Children.Add(lblLeft2);
quoteBottomLayout.Children.Add(lblRight);
quoteBottomLayout.Children.Add(lblRight2);
quoteBottomView.Content = quoteBottomLayout;
`
Result
In the Relative Layout, the labels are laid out with the right X coord, but the right alignment (HorizontalOptions/XAlign) doesn't work.
In the Horizontal Stack Layout, the labels are right aligned (text flows away from the right side of screen). However one of the labels doesn't "stack" horizontally, but instead appears in the center of the layout for some reason.
Can right aligned labels be done in both Relative and Stack layouts? What do I need to do to make them work?