Xamarin Editor Padding

Question

In my xaml I'm trying to put padding between my background and my labels/editor and datepicker, but I can't get it right. I've attempted putting the grid inside a grid and put padding or margin on that one. I've tried putting the labels/editors inside a grid/stacklayout, I've even tried negative padding and margin on them.

This is how it looks like without the padding

https://gyazo.com/3809306e3b5a27a5f10058bbc17c295a

But whenever I try to add padding or margin anywhere the editors gets too small and gets clipped on the inside like this:

https://gyazo.com/46f25b9c44e1717bf1fa124eb2b10068

This is how I want it to look like, but I can't get rid of that damn clipping on the editors, why does the editors get clipped but not the label?

I've tried setting margin 0 and padding 0 on the editors specifically, didn't help either.

 <!-- Bottom Command Bar -->
            <Grid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="LightGray"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="1.5*"/>
                </Grid.ColumnDefinitions>

                <Label Grid.Row="0" Grid.Column="0" BackgroundColor="White" Text="{Binding QuoteNumber}" TextColor="Black"  VerticalOptions="Fill" HorizontalOptions="Fill"   />
                <Editor Grid.Row="0" Grid.Column="1" BackgroundColor="White" Placeholder="PO Number" TextColor="Black" Text="{Binding PoNumber}" VerticalOptions="Fill" HorizontalOptions="Fill" />
                <Editor Grid.Row="0" Grid.Column="2" BackgroundColor="White" Placeholder="Drop Date" TextColor="Black" Text="{Binding DropDate}" VerticalOptions="Fill" HorizontalOptions="Fill" />
                <DatePicker Grid.Row="0" Grid.Column="2" MinimumDate="{Binding MinimumDate}" MaximumDate="{Binding MaximumDate}" Date="{Binding DropDate}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White"/>
                <Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" Placeholder="Comment" TextColor="Black" Text="{Binding Comment}" VerticalOptions="Fill" HorizontalOptions="Fill"/>


                <Label Grid.Row="0" Grid.Column="3" VerticalOptions="Center" HorizontalOptions="Center" FontSize="32" Text="{Binding TotalOrderValue, StringFormat='{0:C2}'}"/>

                <Button Grid.Row="1" Grid.Column="3" Margin="10,0,10,2"  VerticalOptions="Fill" HorizontalOptions="Fill" Text="SUBMIT PART ORDER"  Command="{Binding SubmitJourneyCommand}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White" />


            </Grid>

Answer 1

Within your Change the value from * to AUTO

From there you can use 'padding' or 'margin' on either the main Grid control or the individual Row elements and controls within them.