如何将文本居中在水平StackLayout中?

时间:2015-11-19 15:39:50

标签: c# android ios xaml xamarin

我有这个StackLayout用于在XAML中创建导航栏。此Horizo​​ntal StackLayout包含一个按钮和标签。问题是文本没有完全居中,我似乎无法在中间完美地完成它。有人可以帮我把这个文本集中在这个StackLayout中吗?我顺便使用Xamarin。

<!-- 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>

正如您所看到的,应用标题不在中心......

2 个答案:

答案 0 :(得分:7)

当您想要将View放在特定位置时,StackLayout并不是很好。当你有很多观点时,这是很好的,你希望它们都以合理的方式出现。

当你想要像素完美时,有两个很棒的布局:

  • AbsoluteLayout
  • RelativeLayout的

您可以在此处找到有关这些布局的一些重要信息:http://adventuresinxamarinforms.com/2015/05/05/demystifying-xamarin-forms-absolutelayout-and-relativelayout-positioning/

对于您的具体问题,我会说使用AbsoluteLayout,因为使用它可以非常容易地将Label集中在一起。对于此解决方案,我将Nav Bar的StackLayout更改为AbsoluteLayout,并在代码后面添加了布局参数。

XAML:

scala.ScalaReflectionException: <none>

背后的代码:

<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>

答案 1 :(得分:3)

我知道这是一篇很老的文章,但是对于仍然存在类似问题的人,我使用以下方法解决了该问题:

 HorizontalOptions="Center"
XAML中StackLayout定义上的

。我使用的完整定义如下:

<StackLayout Spacing="5" Orientation="Horizontal" x:Name="ButtonLayout" HorizontalOptions="Center">