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

【问题标题】：Xamarin layout how to place a label in bottom left corner and bottom right corner of screenXamarin布局如何在屏幕的左下角和右下角放置标签
【发布时间】：2017-05-19 08:29:43
【问题描述】：

在我的 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 应该向右对齐）

这就是我想要的：

【问题讨论】：

尝试使用 HorizontalOptions 作为 StartAndExpand 作为第一个标签和 EndAndExpand 作为第二个标签，而不是 HorizontalTextAlignment

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

为什么要将视图包装在 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>

您将看到所需的行为。

您也可以尝试在Label 上使用HorizontalOptions 而不是HorizontalTextAlignment

如果您确实需要使用StackLayout，可以尝试将StackLayout 的HorizontalOptions 设置为FillAndExpand。其中指出：

FillAndExpand – 放置视图，使其没有填充并占据布局所提供的尽可能多的空间。

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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

使用“*”作为宽度只会使列尽可能大，以适应其内容。相反，请尝试将每列设置为总宽度的 50%。

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

【讨论】：

我认为"#*" 仅被解释为与其他同级行（或列）相比的比率