MAUI Layout Questions

Hello @Jai Holloway ,

Thanks for your question.

1. In your project, both columns are likely defined as Width="Auto". This means both the label and value shrink to their text size and sit right next to each other with no separation. In .NET 10, the layout engine became stricter and no longer gives extra space automatically like .NET 8 did.

I recommend changing your column definitions:

<?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"
    x:Class="TourGrosses.Controls.TourGrossDetailItem">

    <ContentView.Content>
        <Grid Padding="5,8" ColumnSpacing="10">
            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Label
                x:Name="LabelText"
                Grid.Column="0"
                HorizontalTextAlignment="Start"
                VerticalTextAlignment="Center"/>
            <Label
                x:Name="ValueText"
                Grid.Column="1"
                HorizontalTextAlignment="End"
                VerticalTextAlignment="Center"/>
        </Grid>
    </ContentView.Content>
</ContentView>

2. Your new grid code has only 1 row defined, but 6 rows used. Furthermore, Even if you fix the row count, Height="10" means each row is only 10 pixels tall, text gets clipped and invisible. What's more, AttendanceLabel is on the wrong row.

Code example:

<?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"
    x:Class="TourGrosses.Controls.ArtistSummaryItem"
    Style="{DynamicResource ContentViewBase}"
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">

<ContentView.Content>
        <StackLayout
            Orientation="Vertical"
            Spacing="5"
            Padding="5"
            BackgroundColor="{DynamicResource ArtistTourDetailBackground}">

            <StackLayout Spacing="10" Padding="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <telerik:RadBorder
                        Grid.Row="0"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        CornerRadius="8">
                        <Label
                            x:Name="ArtistLabel"
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="Center"
                            Style="{DynamicResource ArtistSummaryTitle}"/>
                    </telerik:RadBorder>
                </Grid>
            </StackLayout>

            <Grid ColumnSpacing="10" RowSpacing="8" Padding="5">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Label Text="No. Shows"
                       Grid.Column="0" Grid.Row="0"
                       HorizontalTextAlignment="Start"/>
                <Label x:Name="NoShowsLabel"
                       Grid.Column="1" Grid.Row="0"
                       HorizontalTextAlignment="End"/>

                <Label Text="Attendance"
                       Grid.Column="0" Grid.Row="1"
                       HorizontalTextAlignment="Start"/>
                <Label x:Name="AttendanceLabel"
                       Grid.Column="1" Grid.Row="1"
                       HorizontalTextAlignment="End"/>

                <Label Text="Gross"
                       Grid.Column="0" Grid.Row="2"
                       HorizontalTextAlignment="Start"/>
                <Label x:Name="GrossLabel"
                       Grid.Column="1" Grid.Row="2"
                       HorizontalTextAlignment="End"/>

                <Label Text="Per Head"
                       Grid.Column="0" Grid.Row="3"
                       HorizontalTextAlignment="Start"/>
                <Label x:Name="PerHeadLabel"
                       Grid.Column="1" Grid.Row="3"
                       HorizontalTextAlignment="End"/>

                <Label Text="Products Sold"
                       Grid.Column="0" Grid.Row="4"
                       HorizontalTextAlignment="Start"/>
                <Label x:Name="ProductsSoldLabel"
                       Grid.Column="1" Grid.Row="4"
                       HorizontalTextAlignment="End"/>

            </Grid>

        </StackLayout>
    </ContentView.Content>
</ContentView>

3. Your app uses {DynamicResource} for theming. In .NET 10, the resource resolution pipeline became stricter. If your ResourceDictionary doesn't properly define dark/light variants using AppThemeBinding, the dark theme is silently ignored and always falls back to the light version.

Colors.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Color x:Key="ArtistTourDetailBackground">
        <AppThemeBinding Light="#F5F5F5" Dark="#1C1C1E"/>
    </Color>

    <Color x:Key="ArtistSummaryTitleColor">
        <AppThemeBinding Light="#212121" Dark="#FAFAFA"/>
    </Color>

    <Color x:Key="TourDetailLabelColor">
        <AppThemeBinding Light="#333333" Dark="#CCCCCC"/>
    </Color>

    <Color x:Key="TourDetailValueColor">
        <AppThemeBinding Light="#000000" Dark="#FFFFFF"/>
    </Color>

</ResourceDictionary>

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml"/>
            <ResourceDictionary Source="Resources/Styles/Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

I hope this addresses your question. If this response was helpful, please consider following the guidance to provide feedback.

In .NET MAUI 10 there are two key layout-related changes that can explain the behavior being seen:

1. Layouts now honor explicit size and alignment requests more strictly.
2. Some default layout behaviors from earlier versions (and from Xamarin.Forms) have changed, especially for StackLayout and Grid.

From the provided control XAML, the part that affects the “label text on the left, value text on the right” is almost certainly inside the TourGrossDetailItem control (not shown here), not in the ArtistSummaryItem snippet. The ArtistSummaryItem itself is structurally valid: a vertical StackLayout containing a Grid with a RadBorder and then several TourGrossDetailItem children.

The squashing effect typically comes from one of these causes in .NET MAUI 10:

1. Grid definitions not explicit in the inner control
   In .NET MAUI, Grid columns and rows must be explicitly declared; they are no longer inferred from XAML. If TourGrossDetailItem uses a Grid but relies on implicit rows/columns, the layout can collapse or stack content incorrectly. Ensure that inside TourGrossDetailItem there is something like:

      <Grid ColumnSpacing="10">
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>
      
          <Label Text="{Binding Label}" Grid.Column="0" HorizontalTextAlignment="Start" />
          <Label Text="{Binding Value}" Grid.Column="1" HorizontalTextAlignment="End" />
      </Grid>
   

   Without explicit ColumnDefinitions, .NET MAUI 10 will not infer them, and both labels may end up in the same column, appearing “squashed together”.
2. StackLayout behavior and alignment expectations
   If TourGrossDetailItem uses a StackLayout horizontally to place label and value, remember that a StackLayout only respects Start/Center/End/Fill alignment options in the opposite direction to its orientation. For example, in a horizontal StackLayout, HorizontalOptions on children are ignored, so trying to left-align one label and right-align another via HorizontalOptions will not work. A Grid is the recommended layout when label and value must be on opposite sides.
3. Explicit size requests and Fill options
   In .NET MAUI, explicit size requests are honored even if they exceed container size. If TourGrossDetailItem or its children set WidthRequest/HeightRequest or use LayoutOptions.Fill, this can override the natural sizing and cause controls to overlap or appear compressed. LayoutOptions.Fill can override WidthRequest/HeightRequest and should be used carefully.
4. Default spacing/padding changes
   The outer StackLayout uses Spacing="-15". Combined with changed default padding/spacing in .NET MAUI, negative spacing can visually pull items together more aggressively than before. If the label and value are already close (e.g., in a Grid with no ColumnSpacing), the negative spacing in the parent can make them appear “squashed”. Consider:
   • Removing or reducing the negative spacing.
   • Adding ColumnSpacing in the inner Grid of TourGrossDetailItem.
5. Dark mode style not applying
   The dark mode issue is separate from the label/value alignment. In .NET MAUI 10, layout and style defaults changed. If the dark mode styles were relying on default resource keys or implicit styles that changed between versions, they may no longer be picked up. Check that:
   • The DynamicResource keys (e.g., ContentViewBase, ArtistTourDetailBackground, ArtistSummaryTitle) still exist and are defined for the current theme.
   • Any default padding/margin/spacing values that were previously implicit are now explicitly set, as recommended when migrating.

To restore the original behavior for the label/value rows:

• Ensure TourGrossDetailItem uses a Grid with explicit ColumnDefinitions and Grid.Column assignments for label and value.
• Avoid relying on HorizontalOptions in a horizontal StackLayout for left/right alignment; use Grid instead.
• Review any negative spacing and explicit size requests that might be forcing controls to overlap.

References:

• Layout behavior changes from Xamarin.Forms
• Manually upgrade a Xamarin.Forms app to a multi-project .NET MAUI app
• Manually upgrade a Xamarin.Forms app to a single project .NET MAUI app
• Align and position .NET MAUI controls