Xamarin Forms：无法创建左对齐的 2 列网格答案

【问题标题】：Xamarin Forms: Not able to create a left aligned 2 column gridXamarin Forms：无法创建左对齐的 2 列网格
【发布时间】：2019-04-20 20:19:35
【问题描述】：

我正在尝试使用网格和 stackLayout 创建一个 xamarin 表单，如下所示。在这两种情况下，第二列控件都没有开始垂直对齐。

使用 GRID 控件的 XAML：

<BoxView Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}">
            <Label Text="MANAGE PROFILE"  Style="{StaticResource labelTitle}"></Label>
        </StackLayout>
    <BoxView  Style="{StaticResource separator}"></BoxView>

    <Grid BackgroundColor="{StaticResource whiteBackgroundColor}">
       <Grid.RowDefinitions>
            <RowDefinition Height="44"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
            <RowDefinition Height="44"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
            <RowDefinition Height="44"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
            <RowDefinition Height="44"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
            <RowDefinition Height="44"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackLayout Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">  
            <Label Grid.Row="0" Grid.Column="0" Text="AddressLine1" Style="{StaticResource labelStandard}"></Label>
            <Entry  Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine1.Value}">
                    <Entry.Effects>
                        <effects:EntryNoBorderEffect />
                    </Entry.Effects>
                    <Entry.Behaviors>
                        <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine1.TriggerValidationCommand}" />
                    </Entry.Behaviors>
                    <Entry.Triggers>
                        <DataTrigger TargetType="Entry" Binding="{Binding AddressLine1.IsValid}" Value="False">
                            <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                        </DataTrigger>
                    </Entry.Triggers>
             </Entry>
         </StackLayout>
         <BoxView  Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>

         <StackLayout Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Grid.Row="2" Grid.Column="0" Text="AddressLine2" Style="{StaticResource labelStandard}"></Label>
            <Entry Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine2.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine2.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding AddressLine2.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>
        <BoxView  Grid.Row="3" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>

        <StackLayout Grid.Row="4" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Grid.Row="4" Grid.Column="0" Text="Suburb" Style="{StaticResource labelStandard}"></Label>
            <Entry Grid.Row="4" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding Suburb.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding Suburb.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding Suburb.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>

        <BoxView Grid.Row="5" Grid.ColumnSpan="2"  Style="{StaticResource separator}"></BoxView>

        <StackLayout Grid.Row="6" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">  
            <Label Grid.Row="6" Grid.Column="0" Text="State" Style="{StaticResource labelStandard}" ></Label>
            <Picker Grid.Row="6" Grid.Column="1" HorizontalOptions="FillAndExpand" 
                    Title="Select" SelectedItem="{Binding State.Value}">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                      <x:String>NSW</x:String>
                      <x:String>WA</x:String>
                      <x:String>QLD</x:String>
                      <x:String>SA</x:String>
                      <x:String>VIC</x:String>
                      <x:String>TAS</x:String>
                    </x:Array>
                  </Picker.ItemsSource>
            </Picker>
         </StackLayout>
         <BoxView Grid.Row="7" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>

         <StackLayout Grid.Row="8" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Grid.Row="8" Grid.Column="0" Text="Post Code" Style="{StaticResource labelStandard}"></Label>
            <Entry Grid.Row="8" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding PostCode.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding PostCode.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding PostCode.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>
        <BoxView Grid.Row="9" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
    </Grid>

XAML 使用 StackLayout，

<BoxView Style="{StaticResource separator}"></BoxView>
          <StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}" BackgroundColor="#EFEFF4">
            <Label Text="MANAGE PROFILE"  Style="{StaticResource labelTitle}"></Label>
          </StackLayout>
          <BoxView  Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Text="AddressLine1" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
            <Entry x:Name="AddressLine1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine1.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine1.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding AddressLine1.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>
        <BoxView  Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Text="AddressLine2" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
            <Entry x:Name="AddressLine2" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine2.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine2.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding AddressLine2.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>
        <BoxView  Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Text="Suburb" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
            <Entry x:Name="Suburb" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding Suburb.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding Suburb.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding Suburb.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>

        <BoxView  Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label  x:Name="State" Text="State" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
            <Picker x:Name="pickerState" HorizontalOptions="FillAndExpand" 
                    Title="Select" SelectedItem="{Binding State.Value}">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                      <x:String>NSW</x:String>
                      <x:String>WA</x:String>
                      <x:String>QLD</x:String>
                      <x:String>SA</x:String>
                      <x:String>VIC</x:String>
                      <x:String>TAS</x:String>
                    </x:Array>
                  </Picker.ItemsSource>
            </Picker>
        </StackLayout>
        <BoxView  Style="{StaticResource separator}"></BoxView>
        <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
            <Label Text="Post Code" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
            <Entry x:Name="PostCode" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding PostCode.Value}">
                <Entry.Effects>
                    <effects:EntryNoBorderEffect />
                </Entry.Effects>
                <Entry.Behaviors>
                    <behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding PostCode.TriggerValidationCommand}" />
                </Entry.Behaviors>
                <Entry.Triggers>
                    <DataTrigger TargetType="Entry" Binding="{Binding PostCode.IsValid}" Value="False">
                        <Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
                    </DataTrigger>
                </Entry.Triggers>
            </Entry>
        </StackLayout>
        <BoxView Style="{StaticResource separator}"></BoxView>

在这两种情况下，第二列都是根据文本值开始的。即使我添加 HorizontalOptions="StartAndExpand"，我也无法让第二列中的所有表单控件垂直对齐。

获取如下 UI，

我现在在 XAML 中添加了两个控件。表格的顶部是使用 GRID 控件。下面重复的部分是使用 StackLayout 控件

请让我知道我在这里做错了什么

【问题讨论】：

为什么不使用 TableView 呢？

标签： xamarin.forms

【解决方案1】：

您已将列宽设置为“”。如果要垂直对齐控件，则需要将列设置为 "50" 、 "50*" 或 "60*" 、"40*" 之类的大小。它将以 % 为单位设置宽度。

【讨论】：

在列定义中添加 50* 作为列宽没有帮助