Xamarin布局如何在屏幕的左下角和右下角放置标签

Question

在我的Xamarin Forms应用程序中，我试图在我的移动界面上放置两个标签，一个在左下角，一个在右下角。

这是我目前的尝试。它是一个包含一行和两列的网格布局，每个单元格中都有一个标签，左边一个带有HorizontalTextAlightment="Start"，右边带有HorizontalTextAlightment="End"

    ...other unrelated controls...
    <StackLayout Orientation="Horizontal" Spacing="0" Padding="15" VerticalOptions="End" >
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Text="{Binding DeviceId}" HorizontalTextAlignment="Start" Grid.Row="0" Grid.Column="0" />
        <Label Text="{Binding Version}" HorizontalTextAlignment="End" Grid.Row="0" Grid.Column="1" />
      </Grid>


    </StackLayout>

  </StackLayout>

这会产生这种不需要的结果:( v1.0-1应该向右对齐）

这就是我想要的：

Answer 1

试试这个

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Label Text="{Binding DeviceId}" HorizontalTextAlignment="Start" Grid.Row="1" Grid.Column="0" />
  <Label Text="{Binding Version}" HorizontalTextAlignment="End" Grid.Row="1" Grid.Column="2" />
</Grid>

Answer 2

为什么要将视图包装在StackLayout中？ Stacklayout将分配所需的最小空间量。这就是为什么您会看到屏幕截图1中显示的行为。

如果你有：

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Text="{Binding DeviceId}" HorizontalTextAlignment="Start" Grid.Row="0" Grid.Column="0" />
    <Label Text="{Binding Version}" HorizontalTextAlignment="End" Grid.Row="0" Grid.Column="1" />
  </Grid>

您将看到所需的行为。

您还可以尝试使用HorizontalOptions上的Label代替HorizontalTextAlignment

如果您确实需要使用StackLayout，可以尝试将HorizontalOptions的{​​{1}}设置为StackLayout。其中说明：

  

FillAndExpand - 放置视图，使其没有填充并占用   尽可能多的空间布局。

参考： https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/stack-layout/#Sizing

Answer 3

使用＆＃34; *＆＃34;对于宽度，只使列尽可能大，以适应其内容。相反，请尝试将每列填充为总宽度的50％。

      <ColumnDefinition Width="50*" />
      <ColumnDefinition Width="50*" />