Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

Right aligned labels

$
0
0

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?


Viewing all articles
Browse latest Browse all 58056

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>