How do I center text in a Horizontal StackLayout?
Solution 1
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="<" />
<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
);
}
Solution 2
I know it is a very old post but for people still having a similar issue, I solved it using:
HorizontalOptions="Center"
on the StackLayout
definition in the XAML. The full definition I used is as follows:
<StackLayout Spacing="5" Orientation="Horizontal" x:Name="ButtonLayout" HorizontalOptions="Center">
stepheaw
Working with C#, Xamarin, Nodejs and firebase for the past few years.
Updated on June 14, 2022Comments
-
stepheaw almost 2 years
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...
-
stepheaw over 8 yearsThis is definitely the type of solution I was looking for. Many Thanks.