Blazor Desktop - hybrid Web and Desktop apps in .NET 6!

hello in this video i'm going to show you how to make a cross-platform blazer desktop app which shares code between the web version and the native windows version which is pretty cool including how to do native interop like this right let's open up visual studio 2022 and we will create a new project we'll find blazal okay we have a blazer server app which is pretty cool we'll do next let's call this cross platform laser next 106 preview create and then we should have then we should have a web browser cross platform blazer app there you go look it's a typical blazer blazer template with click me and so on which is pretty fancy all right so we close that now we want to make a desktop version of this app so the first thing we're going to do is add new projects do win forms we need to use the dot net core version of this rather than net framework next informs blazer yep and we can quickly run this app so typical typical win forms out there so we want all of this stuff to be usable from also the winforms app so we need to move it out into a separate place cl razer class library so what we can do there is create new project phrase or class library like share next um laser class library yep like so so we have a class library at the top we need to add some nougat packages we've already installed this guy that's pretty useful okay so you will need to have installed microsoft asp.net core components web in there that appears to have automatically been added okay interestingly uh by creating the razer class library it has already created a blazer class library by default which has set up the nougat packages for us which is very useful so all we then need to do is take our pages over there we can delete them from the original remove our shared stuff over there delete them from the original if we add a reference to the shared library we should be able to run this ah okay so we're missing some frameworks here if we head into the project file and we need to add a framework reference to asp.net core which looks a little bit like this razer support for mvc let's put this in here okay very good so that's fixed up the class library viewer errors which is which is nice so we're missing our weather forecast service so what we can do we can just drag that over there because our share code like so delete the original um and the i logger is in extensions logging very nice so we need to fix this reference that we've copied over which is that app is missing so we need to move app over to blaze class library and we'll also move imports over these guys okay let's rebuild using blazer glass library using blaze or class library dot shared rebuild there you go and now we have the laser code loading from the shared class library which is step one complete we're missing one more thing though and that is moving the static assets over to the shared class library so take the dub dub dub root folder paste it in the class library merge it all it's very nice and then in the host we need to change so to fix the css now that we've moved the bootstrap references over to www here in the class library we need to put in content slash laser class library like so now if we run the app even the styles have been brought through from the shared library although we're missing some icons and the fonts are strange which is very odd so so we also need to do this to reference the site css we run the app again very good so now we've moved our entire app to the class library which is pretty cool like so so that is step one complete now we need to make the windows forms app run blazer we need to look for the microsoft asp.net core components web view windows forms nuget package install this guy okay okay so in the designer we're going to have to manually in the design back-end designer code we're going to need to manually um add this because it's not showing up in the toolbox so all the code for this is linked to in the description but we will start creating our code here to manually add the blazer web view like so so on the code on the code behind for form 1 we will paste this stuff in so it will we will re-add app state later so stick around for that in weather forecast service we want to refer to that one in the shared library so for the winforms blazer app the one of the only things that we can't share is the root file so here's one i made earlier in dubbed uproot we have just an index html and this is very very similar to this host page in pages however this is a pure html version of it it needs to performs laser within inbuilt styles so we also then need to add the blazer webview1 to the controls on the form or it won't render at all we also need to make sure that the www folder is actually moving over so for that we need an item group that looks a little bit like this and we can run winforms blazer ah we need to update the project sdk to sdk dot appraisal as well like so otherwise the dub dub dub route stuff won't copy over there you have it just about we can fix this up like that so there we have it this is the same code let's get rid of that border make it really look basically cross-platformy okay cool very good one cross platform blazer app right click on cross platform debug start new instance there you go and we have a web version and the desktop version sharing the code which is pretty cool next up let's do some interop so this is the classic click me counter but we want to show this value natively in a native windows ui so we will stop that there form one we will create a button let's uh shall we get a button wow this brings me back button there you go look at that button one click that's a good function name but we will leave it for nostalgic purposes let's change the button to click me to show counter like so see click me to show counter very nice good day right so we need an app an object to store the state of this so in data we'll just do ads class app states like so class public hint like counter and in here we want to make it say that on the counter page we will inject a instance of the app states okay right and we'll also do app state dot counter plus plus okay in cross platform blazer we will want to add this as a singleton app states like so in the web version and over on the winforms version we will also in the code behind for the form so upstate we will move this to a static variable here somewhere app state one click we will do message box dot show counter value app state dot counter like show run the app go to counter click it a few times and then go for the native interop which says counter value six now there's loads of cool stuff you could probably do with this like have the blazer app pop-up notifications and all sorts of native windows cool stuff if you thought that was useful don't forget to like and subscribe very much appreciated until next time thank you

Channel: Ted's Tech

Views: 24,303

Rating: 4.8476191 out of 5

Keywords: blazor tutorial, blazor desktop, .net 6, c# tutorial, blazor cross platform, blazor tutorial c#, blazor tutorial 2021, blazor desktop getting started, blazor desktop .net 6, blazor desktop app tutorial, .net 6 blazor, blazor, .net 6 blazor desktop, native access with blazor, blazor .net 6, dotnet 6, blazor apps, hybrid apps

Id: jCR26PkaHmk

Length: 12min 13sec (733 seconds)

Published: Tue Sep 14 2021

Reddit Comments

[u/botterway]

Neat - but is it really cross-platform? This isn't going to work on Mac or Linux, is it? It's basically a hosted blazor app within Winforms.

Or if I've missed something, and your demo is cross-platform, can you add something to the video showing it running on OSX?