CODEWITHSUNDEEP
xamarinxamarin.formsviewcentering
kaolick
kaolick

Reputation: 4857

How to center a view horizontally in a Xamarin.Forms RelativeLayout?

I want to center a label horizontally in a RelativeLayout in Xamarin.Forms. I tried something like this, but it doesn't work:

var label = new Label {HorizontalOptions = LayoutOptions.Center};

var rl = new RelativeLayout();

rl.Children.Add(label, Constraint.RelativeToParent((parent) => parent.Width / 2 - label.Width / 2));

I want to place a second label on the right of my label while the first label is centered horizontally. How can I achieve that?

Upvotes: 4

Views: 9371

Answers (1)

Pete
Pete

Reputation: 4746

When you are doing RelativeLayouts you have Constraints that you can specify.

To achieve what you are aiming to do, you need to use a RelativeToParent Constraint first, and then a RelativeToView Constraint for the 2nd label that is attached to the right of the first view.

The first view will then be centered horizontally across the whole page, with the 2nd label attached relative to the first view afterwards.

The following example shows this:-

RelativeLayout objRelativeLayout = new RelativeLayout();

Label objLabel1 = new Label();
objLabel1.BackgroundColor = Color.Red;
objLabel1.Text = "This is a label";
objLabel1.WidthRequest = 300;
objRelativeLayout.Children.Add(objLabel1,
    xConstraint: Constraint.RelativeToParent((parent) =>
    {
        return ((parent.Width - objLabel1.Width) / 2);
    }));

Label objLabel2 = new Label();
objLabel2.BackgroundColor = Color.Blue;
objLabel2.Text = "Hi";
objLabel2.WidthRequest = 100;
objRelativeLayout.Children.Add(objLabel2,
    xConstraint: Constraint.RelativeToView(objLabel1,
    new Func<RelativeLayout, View, double>((pobjRelativeLayout, pobjView) =>
    {
        return pobjView.X + pobjView.Width;
    })));

this.Content = objRelativeLayout;

Update 1:-

If you don't want to use a specified Width or the contents are of an unknown size then you will have to trigger a re-layout via calling ForceLayout on the RelativeLayout when the view(s) need to be repositioned according to the Constraints you have defined.

The updated example below illustrates this:-

StackLayout objStackLayout = new StackLayout()
{
    Orientation = StackOrientation.Vertical,
};

RelativeLayout objRelativeLayout = new RelativeLayout();
objStackLayout.Children.Add(objRelativeLayout);

Label objLabel1 = new Label();
objLabel1.BackgroundColor = Color.Red;
objLabel1.Text = "This is a label";
objLabel1.SizeChanged += ((o2, e2) =>
{
    objRelativeLayout.ForceLayout();
});
objRelativeLayout.Children.Add(objLabel1,
    xConstraint: Constraint.RelativeToParent((parent) =>
    {
        return ((parent.Width - objLabel1.Width) / 2);
    }));

Label objLabel2 = new Label();
objLabel2.BackgroundColor = Color.Blue;
objLabel2.Text = "Hi";
objRelativeLayout.Children.Add(objLabel2,
    xConstraint: Constraint.RelativeToView(objLabel1,
    new Func<RelativeLayout, View, double>((pobjRelativeLayout, pobjView) =>
    {
        return pobjView.X + pobjView.Width;
    })));

Button objButton1 = new Button();
objButton1.Text = "Test1";
objButton1.Clicked += ((o2, e2) =>
    {
        objLabel1.Text = "This is some other label text";
    });
objStackLayout.Children.Add(objButton1);

this.Content = objStackLayout;

Upvotes: 6

Related Questions