Maui Blazor

[dhindrik]

Is it possible to use this for MAUI Blazor?

I have tried to set it up. But I got an unhandled exception every time I add a component to a page. Unfortunately, I don't know how to see what is going wrong.

I running preview 5 of both MAUI and .NET 6. And I have tried it on net6.0-ios and net6.0-maccatalyst.

[limefrogyank]

I thought the point of MAUI was that you write code once and it generates the ui for each platform automatically. Can you really insert your own controls /components?

Do you have a link to the docs about this? I'd love to figure this out if it's possible...

[dhindrik]

It is when you use the hybrid approach with the Blazor WebView. They also called it Blazor Dekstop for a while. But Right now they seem to call it MAUI Blazor. You can see more about it in this video, https://www.youtube.com/watch?v=5fbzxjUUKUM

[limefrogyank]

So, after playing with it for a little bit, here's what I've discovered:

1. Very initial stages. I couldn't get the debugger running on Android.
2. It depends on Microsoft.AspNetCore.Components.* 6.0.0-preview packages. That means all of BlazorFluentUI would have to be upgraded to that version. Maybe they'll relax that requirement... but not yet.
3. I tried upgrading BlazorFluentUI to dotnet6 and it compiles, but it wouldn't run without errors on Android. And I couldn't get the debugger to work so I couldn't tell what was wrong.
4. It seems one of the big features is that no internet is required. But what if you do an HttpRequest? The microsoft css we use for fonts includes a bunch of http links even if you copy the css file directly. I tried eliminating all of that and it still didn't work.

So it's really early. I couldn't get WinUI3 to work on windows even and I followed their instructions. We'll get there eventually.

[vnbaaij]

There is already A. NET 6 branch running on the latest preview. It is under upgrade/net6 branch

[dhindrik]

1. I am not able to debug anything related to MAUI on my Mac.

2. I would not say that they have done this to enable it to run offline, the big thing is that you have access to the native API:s. So it will be a hybrid app, with a similar approach as electron.

[limefrogyank]

Got it working!

Here's what I did:

1. Install VS2022 preview
2. Install MAUI https://docs.microsoft.com/en-us/dotnet/maui/get-started/installation
   • Pay attention to the stuff you need to manually install! Make sure it's for VS2022!
3. Use dotnet new maui-blazor -o MauiBlazorApp (or any project name you want)
   • update the nuget packages to 8.1 (fixes bug if using an insider branch of windows)
4. Clone the BlazorFluentUI project, switch to 'upgrade/net6' branch.
5. Add a reference to BlazorFluentUI.CoreComponents to your MAUI project. It must be done for BOTH projects. The one with android/macos stuff and the one with WinUI stuff.
6. Setup BlazorFluentUI like normal.... BUT:
   • download 'fabric.min.css' and save it to your project and add a local reference to index.html
   • add <link rel="stylesheet" href="MauiBlazorApp.WinUI.styles.css" /> to your index.html
     • I used WinUI so my project name had WinUI tacked on to it. I assume if you're doing Android/iOS you wouldn't need WinUi in the name.

That's it! You'll need to clean the project a few times because changes to index.html aren't added to the project without a clean.

[limefrogyank]

Ok, it's a little broken. As I thought, the icons are downloaded via urls inside the main css file. They won't download. Also, there's something a little wrong with the links. I tried using the demo site inside a WinUI app.

https://youtu.be/v5rcTwusXv0

[vnbaaij]

I was going the exact same way with this.

I've created preview NuGet packages for the upgrade/net6 branch. See the release here: https://github.com/BlazorFluentUI/BlazorFluentUI/releases/tag/V6-preview6. By using this you do not have to clone the BlazorFluentUO repo anymore. Just install the .nupkg file(s) in both projects.

[vnbaaij]

I got the icons to work by dowloading fabric-icons-inline.css (I cannot remmber where I got it from 👎🏻). Here is how the WinUI app looks:

[vnbaaij]

I created a repo with the current state: https://github.com/BlazorFluentUI/MauiBlazorApp

[vnbaaij]

Let's continue the discussion in that repo

[vnbaaij]

I have disabled most of the code of the Demo component for now. It is using an HttpClient that is not available. Did not have time to dig into it deepre yet.

[limefrogyank]

I've reworked the demo component to use Source Generators rather than just pulling the code using HttpClient. Honestly, I wanted to see how source generators worked and this was interesting to learn. It's pushed into main now. If you know git better than me, feel free to pull it over to this repo, too.

[limefrogyank]

Ah, seems I broke the Github build Action. It doesn't know how to handle the source generated types... need more time to figure it out.

[vnbaaij]

Love the idea though! I'm on vacation now. Will take a closer look after the 23rd when I get back. Met vriendelijke groet, Vincent Baaij Egmondland 28 2635MW Den Hoorn 06 421 412 28

…

________________________________ From: Lee McPherson ***@***.***> Sent: Wednesday, August 4, 2021 8:44:34 PM To: BlazorFluentUI/MauiBlazorApp ***@***.***> Cc: Vincent Baaij ***@***.***>; Comment ***@***.***> Subject: Re: [BlazorFluentUI/MauiBlazorApp] Maui Blazor (#2) Ah, seems I broke the Github build Action. It doesn't know how to handle the source generated types... need more time to figure it out. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FBlazorFluentUI%2FMauiBlazorApp%2Fdiscussions%2F2%23discussioncomment-1131555&data=04%7C01%7C%7Cf4d88d845c734c949f6108d95777e7b9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637636994756954337%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=BdWnqh6dvL69MB%2FWtzwEgRbrtaFvVwdtSJ%2BeEkWvDVs%3D&reserved=0>, or unsubscribe<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAANN6N3IXLABHTBAQ2LMEPLT3GDBFANCNFSM5ATQZ73Q&data=04%7C01%7C%7Cf4d88d845c734c949f6108d95777e7b9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637636994756964292%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=EpMHYJ2e6E7OI8h4w6lwFqhQ6gaaJp0%2BIG084497sXI%3D&reserved=0>.

[limefrogyank]

Enjoy the vacation!