Xamarin layout Как разместить ярлык в левом нижнем углу и в правом нижнем углу экрана

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

Почему вы обертывание вид в StackLayout? A Stacklayout выделяет минимальное требуемое пространство. Вот почему вы видите поведение, которое вы проявили в Screenshot 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 из StackLayout в FillAndExpand. в котором говорится:

FillAndExpand - ставит точку зрения, так что он не имеет отступов и занимает столько мест, сколько расположение даст его.

исх:https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/stack-layout/#Sizing

Answer 2

Использование «*» для ширины только делает столбец как большой, как это должно быть для того, чтобы соответствовать его содержанию. Вместо этого попробуйте сделать каждый столбец 50% общей ширины.

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

Answer 3

Попробуйте

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