Search code examples
c#maui.net-maui-android

.Net Maui Android Align entry control immediately to right of label

I have to following content page defined:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="OrganizeMyLeague.Subscription"
             x:DataType="Line"
             Title="Subscription">
    <VerticalStackLayout
            Padding="5,0"
            Spacing="5">

        <Label Text="Account Information"
            Style="{StaticResource Headline}"
            TextColor="Blue"
            HorizontalOptions="Center"
            SemanticProperties.HeadingLevel="Level1"/>
        
           <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="250" />
            </Grid.ColumnDefinitions>
                <Label Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Text="First Name" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
                <Entry Grid.Row="0" Grid.Column="1" x:Name="txtFirstname" Placeholder="Enter First Name" PlaceholderColor="#C7C7C7" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
                <Label Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Text="Last Name" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
                <Entry Grid.Row="1" Grid.Column="1" x:Name="txtLasttname" Placeholder="Enter Last Name" PlaceholderColor="#C7C7C7" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
                <Label Grid.Row="2" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Text="Address" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
                <Entry Grid.Row="2" Grid.Column="1" x:Name="txtAddress" Placeholder="Enter Address" PlaceholderColor="#C7C7C7" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
                <Label Grid.Row="3" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Text="City" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
                <Entry Grid.Row="3" Grid.Column="1" x:Name="txtCity" Placeholder="Enter City" PlaceholderColor="#C7C7C7" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
                <Label Grid.Row="4" Grid.Column="0" HorizontalTextAlignment="End"  VerticalOptions="Center" Text="Select State" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
                <Picker Grid.Row="4" Grid.Column="1" x:Name="txtState" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
                <Label Grid.Row="5" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Text="Zip Code" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
                <Entry Grid.Row="5" Grid.Column="1" x:Name="txtZipCode" Placeholder="Enter Zip Code" PlaceholderColor="#C7C7C7" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
            </Grid>
    </VerticalStackLayout>
</ContentPage>

This is how it displays:

enter image description here

I can have no affect on the second column in the grid, no matter what I do I can't get the column closer to the labels. I would prefer to have the entry control appear precisely to the right of the label, but apparently there is no way to do that. I'll settle for getting the second column (column 1) closer to the label text.

Solution

  • to place elements next to each other, use a HorizontalStackLayout and a single column grid

    <HorizontalStackLayout Grid.Row="0" Grid.Column="0">
   <Label HorizontalTextAlignment="End" VerticalOptions="Center" Text="First Name" FontSize="16" TextColor="Black" HorizontalOptions="Start" />
   <Entry x:Name="txtFirstname" Placeholder="Enter First Name" PlaceholderColor="#C7C7C7" WidthRequest="150" VerticalOptions="Center" FontSize="16" TextColor="Blue" HorizontalOptions="End" />
</HorizontalStackLayout>