Native components inside of web components

Hi, first of all, great job 😃

The post came out a bit long and disorganized, so here is TLDR:

• Template does not work in Rider, but does work in VS (kind of)
• Can I mix Web and Native components? Will I be able to with MAUI?
• How does the CounterState sample work? Is it the same object within the BlazorWebView and hosting app or is a copy kept in sync?
• Is there a way to “hide” the fact that part of the app is HTML? I’m talking about context menu, back with mouse button etc

---

I got super excited about this whole thing, because in my mind I could just replace WPF app with a Blazor Hybrid, hosted in a BlazorWebView. Sounds great.

However, I spun up the template aaand… Under Rider it opens, but the web view never loads. When I run the app just from bin directory, it works, in VS it also works, but VS starts showin errors after clicking around without modyfing anything, but it still compiles and runs fine. Both Rider and VS updated today, but that’s really irrelevant.

First thing I wanted to try was to put a “native” component inside of web razor component, so I wrote:

@page "/nativetest"

<h3>NativeTest</h3>

<img src="http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>

<StackLayout>
    @*<Entry @bind-Text="Text"/>*@
    @if (GoogleLogo != null)
    {
        <p>Second Google logo</p>
        <Image Source="GoogleLogo"/>
    }
    else { 
        <p>Second logo is null</p>
    }
</StackLayout>

@code {
    string Text { get; set; }
    ImageSource GoogleLogo { get; set; }

    protected override void OnInitialized()
    {
        GoogleLogo = ImageSource.FromUri(new Uri(@"http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"));
        StateHasChanged();
    }
}

The result is not exactly what I expected:

I imagine that getting this to work in Xamarin.Forms will be super hard, but how about MAUI? Is there even consideration for this?

My thought process is that I would love to write the whole app as HTML with CSS, and then maybe a small piece would be much better in a native form (can’t come up with a good example right now, but maybe some libs like CadLib would provide MAUI component for viewing and manipulating DXFs?). That would mean that I have to do the whole app natively, which would not be that bad, but I loose CSS.

I get that there will be some kind of styling system later, but will that make the whole hybrid thing obsolete?

Also, I have a question about the sample. Does Blazor use the CounterObject, as in it’s the EXACT same object in memory? Or is it a copy kept in sync?

Last thing, is there a default way to disable BlazorWebView default controls like right click context menu, go back with side mouse button etc?

I’m sorry for the unorganized gibberish, I just got super excited about the concept, but trying it spawned tons of questions.

[Dreamescaper]

The errors you see in VS are design-time only errors and don’t affect the operation of the program. The root bug is logged here: dotnet/aspnetcore#26647 For now you can ignore those errors (I don’t know of any way to make them go away; they’re just annoying!).

Personally I simply added namespace alias (@using XF = Xamarin.Forms) to workaround this issue. I need to add XF qualifier to all Xamarin.Forms arguments (e.g. XF.FontAttributes, XF.Color, etc) though…

[Dreamescaper]

I think that it will be same as in Xamarin.Forms (considering that MAIU is basically a rebranded XF). https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/