Grid cells do not fill the page

[MartinZikmund]

I have been a WPF developer since 2006 and have written thousands of lines of WPF xaml code without issue. Maui, because Mirocosoft has to have a billion different versions of xaml, made me learn YAXL (yet another Xaml language), but I figured it out. Then, here comes Uno which uses WinUI 3... I am probably needing to quit my day job and go be a greeter at Walmart because I just cannot figure this out.

I am doing a poor-man's version of navitation. I have a list view with cells, that when selected, set the content of a content control on the main page to the page that was selected.

This is the definition of the main page:

<Page
	x:Class="MobyClient.Presentation.Views.MainPage"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:ut="using:Uno.Themes"
	xmlns:utu="using:Uno.Toolkit.UI"
	xmlns:utum="using:Uno.Toolkit.UI.Material"
	xmlns:viewModels="using:MobyClient.Presentation.ViewModels"
	xmlns:views="using:MobyClient.Presentation.Views"
	xmlns:converters="using:MobyClient.Converters">
	<Page.Resources>
		<converters:BoolToVisibilityConverter
			x:Key="BoolToVisibilityConverter" />
	</Page.Resources>
	<Grid
		utu:SafeArea.Insets="All"
		HorizontalAlignment="Stretch"
		VerticalAlignment="Stretch">
		<Grid.RowDefinitions>
			<RowDefinition
				Height="54" />
			<RowDefinition
				Height="*" />
		</Grid.RowDefinitions>
		<!-- Top Navbar -->
		<!-- Removed for brevity -->
		<!-- Main Panel -->
		<Grid
			Grid.Row="1">
			<Grid.ColumnDefinitions>
				<ColumnDefinition
					Width="130" />
				<ColumnDefinition
					Width="*" />
			</Grid.ColumnDefinitions>
			<!-- Page Selector -->
			<ListView
				x:FieldModifier="Public"
				x:Name="SelectablePages"
				Grid.Column="0"
				Background="{StaticResource MobyDarkToolBarBackground}"
				CornerRadius="0"
				ItemContainerStyle="{StaticResource MainListViewItemStyle}"
				ItemsSource="{Binding Pages}"
				ScrollViewer.HorizontalScrollBarVisibility="Disabled"
				ScrollViewer.VerticalScrollBarVisibility="Auto"
				Width="130" />
			<!-- Content Panel -->
			<ContentControl
				x:Name="PageControl"
				Grid.Column="1"
				VerticalAlignment="Stretch"
				HorizontalAlignment="Stretch" />
		</Grid>
	</Grid>
</Page>

I have a SelectionChanged event handler in the Main.xaml.cs code-behind that handles the page set up. It works fine as the pages change as I need them to. But... for the life of me, I cannot get any page that is loaded as the content of the content control to consume the entire page surface. I have tried using AutoLayout, but that didn't work as I could get two out of three columns to fill properly, but I could never get all three columns to fill. When I added a listview to the third column, suddenly all of the column's vertical height get set to the tallest column but it was still shorter than the panel height. I tried changing the type of the content being loaded into the content control to UserControl, but that didn't fix it.

This is the abbreviated code of a page I am trying to load:

<Page
	x:Class="MobyClient.Presentation.Views.ChatMessagesPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Name="ChatMessages">
	<Page.Resources>
		<!--<converters:BoolToVisibilityConverter
			x:Key="BoolToVisibilityConverter" />
		<converters:ImagePathToImageSourceConverter
			x:Key="ImagePathToImageSourceConverter" />
		--><!-- Define the context action button item template --><!--
		<DataTemplate
			x:Key="ContextActionsItemTemplate">
			<Image
				Height="24"
				Margin="-22,10,0,10"
				Source="{Binding IconName}"
				Stretch="Uniform"
				VerticalAlignment="Center"
				Width="24" />
		</DataTemplate>
		--><!-- Define the context action button separator template --><!--
		<DataTemplate
			x:Key="ContextActionsSeparatorTemplate">
			<Path
				Data="M 38 0 C 34.34074087496157 0 11.141975084940592 0 0 0"
				HorizontalAlignment="Center"
				Margin="-22,20,0,20"
				Stroke="White"
				StrokeThickness="2"
				Width="38" />
		</DataTemplate>-->
	</Page.Resources>
	<Grid
		HorizontalAlignment="Stretch"
		VerticalAlignment="Stretch">
		<Grid.ColumnDefinitions>
			<ColumnDefinition
				Width="64" />
			<ColumnDefinition />
			<ColumnDefinition
				Width="Auto" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition
				Height="*" />
		</Grid.RowDefinitions>
		<Border
			Grid.Column="0"
			Grid.Row="1"
			Background="Green"
			VerticalAlignment="Stretch">
			<Grid>
				<TextBlock
					Grid.Column="0"
					Text="This is the chat messages page!"
					VerticalAlignment="Center" />
			</Grid>
		</Border>
		<Border
			Grid.Column="1"
			Background="Purple"
			VerticalAlignment="Stretch">
			<TextBlock
				Grid.Column="1"
				Text="This is the chat messages page!"
				VerticalAlignment="Center" />
		</Border>
		<Border
			Grid.Column="2"
			Background="Blue"
			VerticalAlignment="Stretch">
			<TextBlock
				Grid.Column="2"
				Text="This is the chat messages page!"
				VerticalAlignment="Center" />
		</Border>
	</Grid>
</Page>

It just ends up looking like this:

If I change the MainPage to this:

<Page
	x:Class="MobyClient.Presentation.Views.MainPage"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:ut="using:Uno.Themes"
	xmlns:utu="using:Uno.Toolkit.UI"
	xmlns:utum="using:Uno.Toolkit.UI.Material"
	xmlns:viewModels="using:MobyClient.Presentation.ViewModels"
	xmlns:views="using:MobyClient.Presentation.Views"
	xmlns:converters="using:MobyClient.Converters">
	<Page.Resources>
		<converters:BoolToVisibilityConverter
			x:Key="BoolToVisibilityConverter" />
	</Page.Resources>
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition
				Width="3*" />
			<ColumnDefinition
				Width="5*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition
				Height="2*" />
			<RowDefinition
				Height="*" />
		</Grid.RowDefinitions>
		<Border
			Background="#2f5cb6" />
		<Border
			Grid.Column="1"
			Background="#1f3d7a" />
		<Border
			Grid.Row="1"
			Grid.ColumnSpan="2"
			Background="#152951" />
	</Grid>
</Page>

I get this, which is what I want:

What is it about a page that is being loaded into a content control on the main page does not render the same way it renders the main page does when that is all the xaml tells it to do???

I know this is something extremely simple, but I have spent hours and tried a million things to make this work. My bet is that if one of you smart guys that reads this you will see the error immediately. I just can't look at it any longer!!!

Originally posted by @mobynet1 in unoplatform/uno#18221

[jeromelaban]

@mobynet1 could you tell if this issue happens on the net8.0-windows head?

[mobynet1]

@jeromelaban This happens on WinAppSDK Unpackaged as well as Desktop.

I think I've put my finger on the issue and it points to the AutoLayout.

This works:

<Page
  x:Class="UnoApp1.Presentation.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:UnoApp1.Presentation"
  xmlns:uen="using:Uno.Extensions.Navigation.UI"
  xmlns:utu="using:Uno.Toolkit.UI"
  xmlns:um="using:Uno.Material"
  NavigationCacheMode="Required"
  Background="{ThemeResource BackgroundBrush}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition
        Width="3*" />
      <ColumnDefinition
        Width="5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition
        Height="2*" />
      <RowDefinition
        Height="*" />
    </Grid.RowDefinitions>
    <Border
      Background="#2f5cb6" />
    <Border
      Grid.Column="1"
      Background="#1f3d7a" />
    <Border
      Grid.Row="1"
      Grid.ColumnSpan="2"
      Background="#152951" />
  </Grid>
</Page>

which produces:

And this does not work:

<Page
  x:Class="UnoApp1.Presentation.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:UnoApp1.Presentation"
  xmlns:uen="using:Uno.Extensions.Navigation.UI"
  xmlns:utu="using:Uno.Toolkit.UI"
  xmlns:um="using:Uno.Material"
  NavigationCacheMode="Required"
  Background="{ThemeResource BackgroundBrush}">
  <utu:AutoLayout>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition
          Width="3*" />
        <ColumnDefinition
          Width="5*" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition
          Height="2*" />
        <RowDefinition
          Height="*" />
      </Grid.RowDefinitions>
      <Border
        Background="#2f5cb6" />
      <Border
        Grid.Column="1"
        Background="#1f3d7a" />
      <Border
        Grid.Row="1"
        Grid.ColumnSpan="2"
        Background="#152951" />
    </Grid>
  </utu:AutoLayout>
</Page>

Which produces this:

The only difference between the two is the latter is wrapped inside the AutoLayout control. Is it in the way that I am using the AutoLayout control? Here, I am not using any properties to the control, but believe me, I have tried almost every property in almost every combination and it just misbehaves...

[MartinZikmund]

Cc @kazo0

[kazo0]

Setting the Primary/Counter Alignments on the Grid through the AutoLayout AttachedProperties should do the trick:

<utu:AutoLayout>
	<Grid utu:AutoLayout.PrimaryAlignment="Stretch" utu:AutoLayout.CounterAlignment="Stretch">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="3*" />
			<ColumnDefinition Width="5*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="2*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Border Background="#2f5cb6" />
		<Border Grid.Column="1"
				Background="#1f3d7a" />
		<Border Grid.Row="1"
				Grid.ColumnSpan="2"
				Background="#152951" />
	</Grid>
</utu:AutoLayout>

Although, I would have thought that setting the PrimaryAxisAlignment and CounterAxisAlignment directly on the root AutoLayout would work as well. It doesn't seem to work properly in that case.

I have transferred this issue to the Toolkit repo so we can investigate