Component Layout is restricted on my Maui application - xaml

Question

I have an issue with a component on my MAUI application:
When i load the page that the component (a bar) is shown appears like this:
Image on loading
But, when i touch the size of my windows, the layout fix immediatly.
Image after windows resize
This is the xaml of the page that contains the bar:
<?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"
xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
xmlns:components="clr-namespace:APEEvo.Mobile.Components"
x:Class="APEEvo.Mobile.ReturnFileSearch.ReturnFileDetailPage"
Loaded="ContentPage_Loaded">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2">
<components:InfoBar x:Name="infoBar" VerticalOptions="Start"/>
</StackLayout>
<StackLayout Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,0,30">
<components:ReturnFileBar x:Name="ReturnFileBar" VerticalOptions="Center"/>
</StackLayout>
<HorizontalStackLayout Grid.Row="2" Grid.ColumnSpan="2" >
<Label Text="{x:Static res:UIStrings.Article}" HorizontalOptions="Start" Margin="10,0" Style="{StaticResource TopDetailPageLabel}"/>
<components:BarcodeScanner x:Name="barcodeScanner" BackgroundColor="{StaticResource TertiaryAccent}" HorizontalOptions="Start" VerticalOptions="Center" ButtonVisible="true" Caption="{x:Static res:UIStrings.ArticleBarcode}" Margin="20,0"/>
<Button x:Name="buttonNavigation" HorizontalOptions="Start" VerticalOptions="Center" Text="Test" Margin="20,0" Clicked="ButtonNavigation_Clicked"/>
</HorizontalStackLayout>
<StackLayout Grid.Row="3" Grid.ColumnSpan="2" Padding="30" >
<components:OutcomeSummary x:Name="grpOutcomes" HeightRequest="450"/>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
And this the xaml of the component:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
x:Class="APEEvo.Mobile.Components.ReturnFileBar">
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<HorizontalStackLayout Grid.Column="0" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{x:Static res:UIStrings.Return}" Style="{StaticResource TopReturnFileLabel}" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,5,0" />
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2" />
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Key}" />
<Label x:Name="txtKey" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="2" Margin="5,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Date}" />
<Label x:Name="txtDateOfWhat" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="3"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="3" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Type}" />
<Label x:Name="txtType" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="4" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Reason}" />
<Label x:Name="txtReason" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="5" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.ReconditionType}" />
<Label x:Name="txtRecondition" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="6" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.SAPInboundDelivery}" />
<Label x:Name="txtSapInbound" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="7" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.IctReference}" />
<Label x:Name="txtIctReference" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="8" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.NPcs}" />
<Label x:Name="txtNPcs" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
</Grid>
</HorizontalStackLayout>
</Grid>
</Grid>
</ContentView>
Can you help me?

Answer 1

"nested layouts" with auto-sizing are sometimes difficult for layout manager to figure out correctly. You can greatly simplify the XAML of your component.
Original:
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>
<Grid >
<Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>
<HorizontalStackLayout Grid.Column="0" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... />
<Line Grid.Column="1" ... />
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="1" ... />
</Grid>
</HorizontalStackLayout>
... more elements ...
</Grid>
</Grid>
Simplified:
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="5,0">
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... />
<Line Grid.Column="1" ... />
</Grid>
<Grid Grid.Column="1" Margin="5,0">
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="1" ... />
</Grid>
... more elements ...
</Grid>
Removed from above: One layer of grid; VerticalStackLayouts that served no purpose, as they only contained a single Grid each.
Does this work better?
[OPTIONAL] Flattened:
If above doesn't work, try to "flatten" into a single Grid (below will need tweaking of margins):
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...many Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... Margin="5,0" />
<Line Grid.Column="1" ... Margin="5,0" />
<VerticalStackLayout Grid.Column="3" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="4" ... />
... more elements ...
</Grid>
ALTERNATIVE TECHNIQUE:
Adding explicit WidthRequest="NN"s, where "NN" is some number, will fix most layout issues. Obviously this hardcodes those widths, so is less desireable. But sometimes it is the only way.