Xamarin Forms：如何让标题相对手机宽度居中且保留汉堡菜单位置

我明白你的问题啦——现在标题只在汉堡菜单右边的剩余区域居中，想要它在整个手机屏幕宽度上居中，同时汉堡菜单还待在左边不动对吧？

问题出在你用的Horizontal StackLayout上：这个布局是按顺序排列元素的，汉堡菜单占了左边的空间，后面的Label只能填充剩下的区域，所以它的HorizontalTextAlignment="Center"只是在那片剩余区域里居中，不是整个屏幕。

给你两个简单的解决方案，都是用Grid布局来搞定，因为Grid比StackLayout更灵活，能轻松实现这种元素层叠或跨区域的布局需求：

方案一：层叠元素（最简洁） #

直接用Grid作为容器，让标题Label占满整个Grid（自然就相对于屏幕居中了），然后把汉堡菜单Image放在上层，固定在左侧：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WP.MobileMidstream.Device.Pages.RunSheetHeader">
  <ContentView.Resources>
    <!-- 把Style的TargetType改成Grid，适配新容器 -->
    <Style x:Key="HeaderGridStyle" TargetType="Grid">
      <Setter Property="BackgroundColor" Value="#00458C" />
    </Style>
  </ContentView.Resources>
  <ContentView.Content>
    <Grid Style="{StaticResource HeaderGridStyle}">
      <Grid.HeightRequest>
        <OnPlatform x:TypeArguments="x:Double">
          <On Platform="iOS">80</On>
          <On Platform="Android">56</On>
        </OnPlatform>
      </Grid.HeightRequest>
      <!-- 标题Label占满整个Grid，居中显示 -->
      <Label VerticalTextAlignment="Center" 
             HorizontalTextAlignment="Center" 
             FontSize="20" 
             BackgroundColor="Red" 
             TextColor="White"
             Text="Daily Run Sheet" />
      <!-- 汉堡菜单放在上层，固定在左侧 -->
      <Image Source="hamburger_icon" Margin="10" 
             HorizontalOptions="Start" 
             VerticalOptions="Center" />
    </Grid>
  </ContentView.Content>
</ContentView>

方案二：跨列布局 #

如果不想用层叠，也可以给Grid设置列，让标题跨所有列来实现全屏居中：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WP.MobileMidstream.Device.Pages.RunSheetHeader">
  <ContentView.Resources>
    <Style x:Key="HeaderGridStyle" TargetType="Grid">
      <Setter Property="BackgroundColor" Value="#00458C" />
    </Style>
  </ContentView.Resources>
  <ContentView.Content>
    <Grid Style="{StaticResource HeaderGridStyle}">
      <Grid.HeightRequest>
        <OnPlatform x:TypeArguments="x:Double">
          <On Platform="iOS">80</On>
          <On Platform="Android">56</On>
        </OnPlatform>
      </Grid.HeightRequest>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" /> <!-- 自适应汉堡菜单宽度 -->
        <ColumnDefinition Width="*" /> <!-- 填充剩余空间 -->
      </Grid.ColumnDefinitions>
      <!-- 汉堡菜单放在第一列 -->
      <Image Grid.Column="0" Source="hamburger_icon" Margin="10" />
      <!-- 标题跨两列，这样就能在整个Grid宽度上居中 -->
      <Label Grid.Column="0" Grid.ColumnSpan="2"
             VerticalTextAlignment="Center" 
             HorizontalTextAlignment="Center" 
             FontSize="20" 
             BackgroundColor="Red" 
             TextColor="White"
             Text="Daily Run Sheet" />
    </Grid>
  </ContentView.Content>
</ContentView>

两种方案都能实现你要的效果，方案一更简洁，推荐用这个。

内容的提问来源于stack exchange，提问作者John Livermore