URGENT! Cannot get a Maui Control to display

[mobynet1]

This project has been one of the most frustrating projects I have ever been associated with and Microsoft has let me down at every turn. gRPC didn't work which forced me to implement a go bridge so that I could replace gRPC with libp2p. Then, Maui is simply incapable of producing an unpackaged release so I decided to avoid Maui in lieu of the Uno Platform. Since I have been using the Syncfusion Maui controls with success, I really need to be able to use them in this project.

I created a new, unedited Uno project that included Maui Control support. I was able to get it to work there where I had two simple controls that I displayed in the MainPage and SecondPage pages. Then, when I try to move the code over to my project, the Maui controls simply do not display.

This is a screenshot of the new MauiControls project where I am using a Syncfusion button:

The code used to display this is:

EmbeddedControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
  x:Class="UnoApp1.MauiControls.EmbeddedControl"
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
  HorizontalOptions="Fill"
  VerticalOptions="Fill">
  <buttons:SfButton
    Background="Blue"
    HeightRequest="34"
    HorizontalOptions="Center"
    Text="Testing"
    TextColor="White"
    VerticalOptions="Center"
    WidthRequest="200" />
</ContentView>

and the code used in MainPage.xaml is:

MainPage.xaml

<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"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:maui="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:not_maui="http://notmaui"
  mc:Ignorable="d not_maui"
  xmlns:controls="using:UnoApp1.MauiControls"
  NavigationCacheMode="Required"
  Background="{ThemeResource BackgroundBrush}">
  <ScrollViewer>
    <Grid
      utu:SafeArea.Insets="VisibleBounds">
      <maui:Grid>
        <embed:MauiHost
          x:Name="MauiHostElement"
          xmlns:embed="using:Uno.Extensions.Maui"
          HorizontalAlignment="Center"
          Source="controls:EmbeddedControl"
          VerticalAlignment="Center" />
      </maui:Grid>
    </Grid>
  </ScrollViewer>
</Page>

When I use this same exact code in my original project, I get nothing that is inside the <maui:Grid><embed:MauiHost> ... to display. The code in the MainPage.xaml file is as follows:

<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">
	<utu:AutoLayout>
		<!-- Top Navbar -->
		<utu:AutoLayout
			Background="#2D2D2D"
			BorderBrush="{StaticResource MobyHighlight}"
			BorderThickness="0,0,0,1"
			CounterAxisAlignment="Center"
			Height="54"
			Orientation="Horizontal"
			Padding="20,0"
			Spacing="162">
			<utu:AutoLayout
				PrimaryAlignment="Stretch"
				CounterAxisAlignment="Center"
				Orientation="Horizontal"
				Spacing="134">
				<!-- Toolbar Left Side (local and app-name) -->
				<utu:AutoLayout
					CounterAxisAlignment="Center"
					Orientation="Horizontal"
					Spacing="16">
					<Image
						Height="32"
						Source="ms-appx:///Assets/Images/moby_logo.png"
						Stretch="UniformToFill"
						VerticalAlignment="Center" />
					<TextBlock
						FontSize="16"
						Margin="0,0,1,0"
						Text="{Binding LabelMobyNetTM}"
						VerticalAlignment="Center" />
				</utu:AutoLayout>
				<!-- Search bar -->
				<utu:AutoLayout
					CounterAxisAlignment="Center"
					PrimaryAlignment="Stretch"
					Orientation="Horizontal"
					PrimaryAxisAlignment="End"
					Spacing="14">
					<utu:AutoLayout
						BorderBrush="{StaticResource MobyHighlight}"
						BorderThickness="1"
						CornerRadius="6"
						CounterAxisAlignment="Center"
						Orientation="Horizontal"
						Spacing="5">
						<utu:AutoLayout
							CounterAxisAlignment="Center"
							Height="30"
							Orientation="Horizontal"
							PrimaryAxisAlignment="Center">
							<ComboBox
								Background="#2D2D2D"
								BorderBrush="Transparent"
								ItemContainerStyle="{StaticResource ComboBoxItemStyle}"
								ItemsSource="{Binding SearchOptions}"
								Margin="2,0,5,0"
								SelectedItem="{Binding SelectedOption}"
								Style="{StaticResource DefaultComboBoxStyle}"
								Width="165" />
						</utu:AutoLayout>
						<Path
							Data="M 0 38 L 0 0"
							Height="38"
							Margin="0,0,5,0"
							Stroke="{StaticResource MobyHighlight}"
							StrokeThickness="1" />
						<utu:AutoLayout
							CounterAxisAlignment="Center"
							Height="30"
							Orientation="Horizontal"
							Padding="0,0,20,0"
							Spacing="5"
							Width="410">
							<TextBox
								Background="#2D2D2D"
								BorderBrush="Transparent"
								CornerRadius="4"
								FontSize="14"
								PlaceholderText="Search all folders"
								Style="{StaticResource BaseTextBoxStyle}"
								VerticalContentAlignment="Bottom"
								Width="377">
								<ut:ControlExtensions.Icon>
									<SymbolIcon
										Symbol="Find" />
								</ut:ControlExtensions.Icon>
							</TextBox>
						</utu:AutoLayout>
					</utu:AutoLayout>
					<Image
						Height="24"
						Source="ms-appx:///Assets/Images/filter1.png"
						Stretch="UniformToFill"
						VerticalAlignment="Center" />
				</utu:AutoLayout>
			</utu:AutoLayout>
			<!-- Toolbar Right Side (flow control, presence, user icon, help, and app-center) -->
			<utu:AutoLayout
				Spacing="20"
				PrimaryAxisAlignment="End"
				CounterAxisAlignment="Center"
				Orientation="Horizontal">
				<Image
					Height="24"
					Source="ms-appx:///Assets/Images/mail-send-receive.png"
					Stretch="UniformToFill"
					VerticalAlignment="Center" />
				<Ellipse
					Fill="Green"
					Height="12"
					VerticalAlignment="Center"
					Width="12" />
				<Path
					Height="32"
					Width="32"
					VerticalAlignment="Center">
					<Path.Data>
						<EllipseGeometry
							Center="16,16"
							RadiusX="16"
							RadiusY="16" />
					</Path.Data>
					<Path.Fill>
						<ImageBrush
							ImageSource="ms-appx:///Assets/Images/alfred-e-newman.png"
							Stretch="Fill" />
					</Path.Fill>
				</Path>
				<Image
					Height="24"
					Source="ms-appx:///Assets/Images/help.png"
					Stretch="UniformToFill"
					VerticalAlignment="Center" />
				<Image
					Height="24"
					Source="ms-appx:///Assets/Images/apps-menu.png"
					Stretch="UniformToFill"
					VerticalAlignment="Center" />
			</utu:AutoLayout>
		</utu:AutoLayout>
		<!-- ListView and Details panel -->
		<utu:AutoLayout
			PrimaryAlignment="Stretch"
			Orientation="Horizontal">
			<ListView
				x:FieldModifier="Public"
				x:Name="SelectablePages"
				Background="{StaticResource MobyDarkToolBarBackground}"
				CornerRadius="0"
				ItemContainerStyle="{StaticResource MainListViewItemStyle}"
				ItemsSource="{Binding Pages}"
				ScrollViewer.HorizontalScrollBarVisibility="Disabled"
				ScrollViewer.VerticalScrollBarVisibility="Auto"
				Width="130" />
			<utu:AutoLayout
				PrimaryAlignment="Stretch"
				Orientation="Horizontal">
				<ContentControl
					x:Name="PageControl"
					HorizontalAlignment="Stretch"
					VerticalAlignment="Stretch" />
			</utu:AutoLayout>
		</utu:AutoLayout>
	</utu:AutoLayout>
</Page>

The actual Maui control is inside a separate page, CalendarPage, that I set the data context to on control PageControl ContentControl:

<Page
	x:Class="MobyClient.Presentation.Views.CalendarPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:maui="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:utu="using:Uno.Toolkit.UI"
	xmlns:controls="using:MobyClient.MauiControls">
	<Grid
		utu:SafeArea.Insets="VisibleBounds">
		<Grid.RowDefinitions>
			<RowDefinition
				Height="Auto" />
			<RowDefinition
				Height="*" />
		</Grid.RowDefinitions>
		<TextBlock
			Grid.Row="0"
			Text="Test" />
		<maui:Grid
			Grid.Row="1">
			<embed:MauiHost
				x:Name="MauiHostElement"
				xmlns:embed="using:Uno.Extensions.Maui"
				Source="controls:EmbeddedControl" />
		</maui:Grid>
	</Grid>
</Page>

This produces:

The textblock on line 0 displays, but not the Maui control.

I tried to make CalendarPage a ContentView, but the main project in the solution choked on the ContentView with this error:

The type 'ContentPage' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.

I added using Microsoft.Maui.Controls; to the CalendarPage and it still would not compile.

NOTE: There is a very annoying bug in Visual Studio 2022 that simply loses its mind with code-behind pages. The coupling that is supposed to exist gets broken. I can get the app to run if I use the Desktop profile to launch the app.

The default app project UnoApp project template automatically includes Microsoft.Maui.Controls and Microsoft.Maui.Controls.Compatibility so I have no idea if it is something I have done, and do not know if it is the VS bug that is getting in my way.

The code in App.xaml.cs for the OnLaunched method is:

	protected async override void OnLaunched (
		LaunchActivatedEventArgs args) {

		var workingDirectory = Environment.GetEnvironmentVariable ("ProgramFiles");

		Guard.IsNotNullOrEmpty (workingDirectory);

		var installDirectory = Path.Combine (workingDirectory, "MobyNet");

		Guard.IsNotNullOrEmpty (installDirectory);

		// Read in the application's configuration parameters.
		var configuration = new ConfigurationBuilder ()
			.SetBasePath (installDirectory)
			.AddJsonFile (
				optional: true,
				path: "appsettings.json",
				reloadOnChange: false)
			.Build ();

		var builder = this.CreateBuilder (args)
			// Add navigation support for toolkit controls such as TabBar and NavigationView.
			.UseToolkitNavigation ()

			.UseMauiEmbedding<MauiControls.App> (maui => maui
				.UseMauiControls ())

			// Configure the Host Builder.
			.Configure (host => host
#if DEBUG
				// Switch to Development environment when running in DEBUG.
				.UseEnvironment (Environments.Development)
#endif
				.UseLogging (configure: (context, logBuilder) =>
					logBuilder.ConfigureLogging (
						context,
						configuration), enableUnoLogging: false) // Turn off Uno logging!

				.UseConfiguration (configure: configBuilder =>
					configBuilder
						.EmbeddedSource<App> ()
						.Section<AppConfig> ()
				)

				// Enable localization (see appsettings.json for supported languages)
				.UseLocalization ()

				// Register Json serializers (ISerializer and ISerializer)
				.UseSerialization ((context, services) => services
					.AddContentSerializer (context))

				.UseHttp ((context, services) => services
					// Register HttpClient
#if DEBUG
					// DelegatingHandler will be automatically injected into Refit Client
					.AddTransient<DelegatingHandler, DebugHttpHandler> ())
#endif

				.ConfigureServices ((context, services) =>
					services.ConfigureMobyServices ())

				.UseNavigation (RegisterRoutes)
			);
		MainWindow = builder.Window;

#if DEBUG
		MainWindow.EnableHotReload ();
#endif
		MainWindow.SetWindowIcon ();

		// Set the initial window size.
		var applicationView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView ();

		applicationView.SetPreferredMinSize (new Windows.Foundation.Size (800, 600));
		applicationView.TryResizeView (new Windows.Foundation.Size (1440, 900));

		// The host needs to be Public so that it can be used in dependency injection
		// and injected object retrieval in the view models (and other classes).
		Host = await builder.NavigateAsync<Shell> ();
	}

I cannot provide a solution for you to examine as there is too much IP to strip out, but hopefully, I have provided enough context to give you an idea as to what I have tried. Let me know if there is something else context-wise that I need to supply. Again, I have been stuck at this point in the alpha delivery for well over a month due to a myriad of blockers, so I have GOT TO GET BEYOND THIS BLOCKER!!!!

I
JUST
NEED
TO
GET
THIS
TO
WORK!!!!!!!!!!!!!!!!!!!!

arg!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thanks in advance for any guidance I can get and extra points if you get back to me in the next day or so.......

Regards,
Steve

[mobynet1]

I should also point out that I am not using navigation in the recommended manner. I am using a listview and am using an SelectedItemChanged event to set the data context of the content control I have in the MainPage. I am looking at the SyncfusionApp in the Uno.Samples repo and I see that you are using Regions specifically. Could that be it?

[jeromelaban]

Thanks for the questions. There is unfortunately not enough information to be completely helpful, but if you could provide a binlog of the error, that would help.