Blazor MAUI - Same UI code not render on Windows but renders on Android

[sangeethnandakumar]

Description

I have an app UI that shows a top bar with the app name and to the bottom a Blazor web view to render contents. However the same simple code don't work on Windows but works on Android.

This is my MainPage.xaml

<?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:local="clr-namespace:BlazorApp"
             x:Class="BlazorApp.MainPage"
             BackgroundColor="#f8fafc">

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

        <StackLayout Grid.Row="0" BackgroundColor="#003468">
            <Label Text="Test App" TextColor="White" FontSize="Title" FontAttributes="Bold" Padding="16"/>
        </StackLayout>

        <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html" Grid.Row="1">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </Grid>

</ContentPage>

Here you can see RowDefinition is set to 'Auto' for both:

<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>

And this renders like this on Android:

And like this on Windows:

In Windows, The Blazor review is not even visible. Probably it's a sizing issue pre-load and post-load. Why the same code works differently on different platforms?

The appearance of the same text 'Test App' looks ugly on WinUI3 also, See the screenshots.

Steps to Reproduce

Clone and run the repo 'https://github.com/sangeethnandakumar/MAUI-Blazor-Template/tree/checkpoints/RenderIssue' on

• Android
• Windows

Repo: https://github.com/sangeethnandakumar/MAUI-Blazor-Template Branch: checkpoints/RenderIssue

I haven't checked on Mac or iOS as I don't intend to develop for those platforms

Link to public reproduction project repository

https://github.com/sangeethnandakumar/MAUI-Blazor-Template/tree/checkpoints/RenderIssue

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

Android 13 (Samsung Galaxy S22) , Windows 11 (10.0.22623 Build 22623)

Did you find any workaround?

No

Relevant log output

No response

[drasticactions]

@sangeethnandakumar I believe that WinUIs Webview controls don't have an inherent size (Where on Android, it may). Auto uses the implied size from the control, so nothing would be rendered if it's not set.

If you use * instead, it should work fine.

CC @hartez, does this sound right?

[sangeethnandakumar]

I had already tried this approach before raising the bug. Now when we put *, It works perfectly fine on WinUI-3 but checks out how it comes in Android.

The launched app looks like this, Where the top bar is invisible but its size is reserved there:

Now try scrolling the list, Immediately the top blue app bar starts visible.

My basic understanding was, This might be happening because the webview cannot resolve its height unless the full Blazor content loads on it. If MAUI renders it before content loads on web view may be that why it happens. I don't know anyway just my assumptions.

I'm using Samsung S22 for your reference

[MackinnonBuck]

It doesn't look like this issue is specific to Blazor, so I remove the area/blazor label.

[sangeethnandakumar]

You're right @MackinnonBuck. Probably a MAUI Android WebView related rather than Blazor in general. As you can see in the source code it's a plain project with no custom implementation. It's a test app and no bussiness logic there

I'd reproduced the same in multiple connected android devices.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on Windows platform with sample project. If you use * instead, it works fine. MAUI-Blazor-Template/tree/checkpoints/RenderIssue

[sangeethnandakumar]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on Windows platform with sample project. If you use * instead, it works fine. MAUI-Blazor-Template/tree/checkpoints/RenderIssue

Yes @jinxinjuan, However adding '*' fixes Windows but breaks Android. I'd mentioned it above with screenshot