当文本更改时，Grid中的Label（同一列，diff行）都会移动。为什么？

Question

显示模拟器的视频：https://youtu.be/3ajany0iaCw

代码：

  <Grid HorizontalOptions="Center" VerticalOptions="Center">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="4*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Switch Grid.Column="0"
            HorizontalOptions="Center"
            IsToggled="{Binding SwitchToggled}"/>
    <Label Grid.Column="1"
           HorizontalOptions="Center"
           Text="{Binding SwitchToggled, 
                          Converter={StaticResource Key=boolToStrConv}}"/>
    <Switch Grid.Column="0" Grid.Row="1"
            HorizontalOptions="Center"
            x:Name="switch2"/>
    <Label Grid.Column="1" Grid.Row="1"
           HorizontalOptions="Center"
           Text="{Binding Source={x:Reference switch2},
                          Path=IsToggled,
                          Converter={StaticResource Key=boolToStrConv}}"/>
  </Grid>

我的期望是，无论Label的文本长度如何变化，它都会居中 - 考虑到它们都有一个Horizo​​ntalOptions中心。

为什么会发生这种情况，我该如何解决？

Answer 1

您需要查看网格所在的容器以及您在该容器中居中（浮动）网格的事实。

为您的网格指定背景颜色，并为其容器指定不同的背景颜色，您将看到其尺寸取决于包含的内容，因为它的大小为*（星形）并且网格本身在其容器的中心“浮动”，改变网格的内容，网格的大小发生变化：

<Grid VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Gray">           
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
    <Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
    <Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
    <Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>

锁定网格以填充其父级的宽度（在我的示例中通过StartAndExpand）并更改标签的文本内容不会导致切换的开始位置移动...

<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Gray">            
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
    <Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
    <Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
    <Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>