I'm trying to create a xamarin form using the grid and stackLayout as below. On both the scenarios the second column control is not starting uniformly aligned vertically.
XAML using GRID control:
<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 using 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>
On both the scenarios the second column is starting based on the text value. Even if I add HorizontalOptions="StartAndExpand", I'm not able to get the all the form controls vertically aligned in the second column to start with.
Getting the UI as below,
I have added both the controls as fo now in XAML. The top section of form is using GRID control. The below repeated section is using the StackLayout control
Please let me know what am I doing wrong here
