How do I center text in a Horizontal StackLayout?

Question

I have this StackLayout that I used to create a Navigation Bar in XAML. This Horizontal StackLayout contains a button and label. The problem is that the text is not exactly centered and I cant seem to get it perfectly in the middle. Can someone please help me center this text in this StackLayout? I'm using Xamarin by the way.

<!-- Nav Bar-->
<StackLayout Orientation="Horizontal" HeightRequest="45" BackgroundColor="{StaticResource Teal}">
  <StackLayout.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="10,0,0,0"
                Android="0,0,0,0"
                WinPhone="0,0,0,0" />
  </StackLayout.Padding>
  <Button x:Name="btnBack" HorizontalOptions="Start" TextColor="White" BackgroundColor="Transparent"
          Command="{Binding BackCommand}" IsVisible="{Binding CanGoBack}" />
  <Label HorizontalOptions="CenterAndExpand" VerticalOptions="Center" TextColor="White" FontSize="24" Text="{Binding TitleBarText}" LineBreakMode="TailTruncation" />
</StackLayout>

As you can see the App Title is not centered...

The 'Label' is centered in the remaining space (after you subtract the button). That's just how StackLayout works. This might be easier to accomplish with a different type of layout. I think that AbsoluteLayout or RelativeLayout would work better in this situation. If you want, I'll post an answer using a to accomplish this. — dylansturg
Hey Thanks! I'm really stuck on this so that would be a really big help — stepheaw

dylansturg dylansturg · Accepted Answer · 2015-11-19T18:40:35

The StackLayout isn't great when you want to put a View in a specific location. It's good when you have a number of views, and you want them all to appear in a reasonable way.

When you want something pixel perfect, there are two great layouts:

AbsoluteLayout
RelativeLayout

To your specific issue, I would say to use an AbsoluteLayout because it's super easy to center a Label with that. For this solution, I changed your Nav Bar's StackLayout to an AbsoluteLayout and added the layout parameters in code behind.

The XAML:

<AbsoluteLayout x:Name="NavBarLayout" HeightRequest="45" BackgroundColor="Aqua">
     <Button x:Name="btnBack" TextColor="White" FontSize="40" BackgroundColor="Transparent" Text="&lt;" />
     <Label x:Name="labelTitle" TextColor="White" FontSize="24" Text="Hello World!" YAlign="Center" XAlign="Center" LineBreakMode="TailTruncation" />
</AbsoluteLayout>

The code behind:

public MyPage ()
    {
        InitializeComponent ();

        NavBarLayout.Children.Add (
            btnBack,
            // Adds the Button on the top left corner, with 10% of the navbar's width and 100% height
            new Rectangle(0, 0, 0.1, 1),
            // The proportional flags tell the layout to scale the value using [0, 1] -> [0%, 100%]
            AbsoluteLayoutFlags.HeightProportional | AbsoluteLayoutFlags.WidthProportional
        );

        NavBarLayout.Children.Add(
            labelTitle,
            // Using 0.5 will center it and the layout takes the size of the element into account
            // 0.5 will center, 1 will right align
            // Adds in the center, with 90% of the navbar's width and 100% of height
            new Rectangle(0.5, 0.5, 0.9, 1),
            AbsoluteLayoutFlags.All
        );
    }

How do I center text in a Horizontal StackLayout?

2 Answers