.NET MAUI + Blazor Hybrid Tutorial for Beginners - Build mobile, desktop, & web apps with C#

today I want to tell you all about how you can get started building your very first hybrid applications for iOS Android Mac and windows and of course for the web using.net Maui and Blazer to pull together the best of native and web into a hybrid application so tune in [Music] thank you [Music] hey everyone I'm James and today I'm going to be talking about something a little bit different which is about building hybrid applications with.net specifically with blazer hybrid a combination of Blazer and a framework that supports the Blazer webview such as.net Maui now I've done previous videos here on the Channel all about getting started a full four hour Workshop on.net Maui and I'm going to put them up over there down over there in the show notes and all that good stuff so if you're interested in a full walk through a beginner's guide of Don and Maui I have you covered of everything you need to know about building native iOS Android Mac and windows applications all with net c-sharp and xaml but today we're going to talk about hybrid applications why you may want to consider building a hybrid application especially if you're a Blazer developer and how.net Maui and Blazer Works seamlessly together now if you are new here to the channel and you just saw that Blazer hybrid thing.net Maui thing and you want to learn more well I got you covered with tons of videos here I'm my channel I'm James montemagno and I put together videos on the.net YouTube but my YouTube on all the YouTubes and all the channels I love teaching and I do all these videos on my personal channel in my spare time so if you want more of this stuff hit that subscribe button below and ding that notification Bell so you get notified every time I put out a new channel channels videos right here new Channel videos yes new videos right here on my channel every single week all right cool well let's get into it and what I want to do in case you are brand new is give you a very brief overview of what.net Maui is what Blazer is and then specifically how the two work together and then we're going to jump into some code so let's get into it all right so the first thing you need to know is that.net Maui is the multi-platform app UI and it's part of.net what this enables you to do is at the core is access and create native cross-platform applications for iOS Android Mac and windows all using the native user interface and Native Stacks basically inside a.net you have an iOS for net and androidfare.net I'm at catalystfor.net and of course for Windows you have like win UI or other windows Frameworks now these are built and supported the iOS Android Mac bits are supported by the same.net Maui team exposing the ability to build for those platforms with net my dad named Maui does it builds on top of that and handles all of the multi-platform cross-platform goodness for you automatically with a full UI framework access to Native apis and a whole bunch of other cross-platform goodies such as single project cross-platform fonts and images and all sorts of good stuff in there and again check out the video up over here and down in the show notes as well now the great part is that it's part of.net so you get all the stuff that you know and love from.net so the Base Class Library type unification CLI support SDK style projects support life cycle you can Target iOS Android Mac and windows and hybrid with this Blazer webview which I'm going to talk about today and of course get access to all those productivity features in visual studio and visual studio for Mac now normally in a.net Maui architecture it looks a little bit like this on top you have the different platforms iOS Android Mac and windows and you can access all the native apis inside of c-sharp so if you need to access something in iOS you can still do that which is really really cool but the majority of the code that we're going to write is shared code things like our user interface our resources accessing those cross-platform uh features like connectivity and geolocation and of course your business logic so things like models view models or restful service calls database Integrations Azure back-end Integrations things like that are all going to be consistent and what this means is that you will be able to share a vast if not all of your source code between all of these different projects but at the end of the day when you compile up the iOS Android Mac or Windows app you're getting a native application that you can ship to the App Store just like if you built it in Swift or kotlin or something like that you're still bundling it up into the native format so you get to take advantage of all that goodness at the end of the day but you can run your.net c-sharp code there which is really cool and what this looks like specifically is you get a single code base a single project and it's multi-targeted across the different platforms so you get one project and all the different applications with Native controls so on Android you get native Android widgets you get UI kit on Mac you're getting Mac Catalyst which you can have a UI kit or an app kit look and feel whatever you want and then on Windows you get a win ui3 application so you get all that stuff all bundled in but Donna Maui here is also home to being like the perfect use case for building and bring in web components to build out a hybrid application and you can use as much or as little as you want so let's talk about hybrid a little bit and bringing those native capabilities to your web applications so when I think of hybrid I think of it like this is today we're sharing and building out you know different Native components of our mobile apps but what happens if I have a website and I want to bring some of those web components into it well I can reuse my existing web skills if I'm a web developer but I still want to be able to access native capabilities mix and match UI and ideally at the end of the day if I'm working in a team it should speed up my development time I should be able to ship seamlessly to the app store or internally if I want to and just make the types of apps that I want so when I think about this and people ask me well you know am I doing a Dynam Maui a native application am I doing a non Maui plus Blazer hybrid application is there this or that like what's better it's like what are you building what type of developer are you if you're already a web developer having the capabilities to build hybrid apps but accessing running everything in c-sharp still having the capabilities of the Native platforms is a huge advantage and that's what I want to talk about today so how are we going to build hybrid apps well if you saw the title I was talking about Blazer and Blazer specifically is.net's full stack web app framework built into asp.net core there's tons of good stuff in there it works on the server it works in webassembly offline and there's sort of a third mode which is a hybrid mode which enables you to bring a Blazer webview and render out Blazer controls and components into a framework such as.net Maui so if you think about it here Blazer on the left hand side is your traditional web over here Maui on the right hand side gives you access to Windows Mac IOS and Android and then together with blazer hybrid you get to take advantage and Target all of those different platforms so that's a really really cool and what you're going to get still at the end of the day is those native applications and you can bring in as much Blazer air as little blazer as you need maybe you have one or two screens or maybe it's your entire application there's all sorts of examples out there that'll point to and put in the show notes below as well so what this looks like at the end of the day is that you get to take advantage of this vast ecosystem of Don and Maui components and Blazer components and blend those two worlds together you can now seamlessly share your Blazer eraser components across your entire Blazer website and all of your mobile and desktop applications as well and again it could be as much or as little as you want now I've always been in the use case that I love native I love native but I think that this hybrid architecture gives you flexibility and for it as much or as little as you need so let's go ahead and get into it now before we go any further I got to tell you about our sponsor for this video skillshare yeah I've talked about skillshare before and they're back sponsoring this video and you may know them because they have tons of classes in photography film and video editing illustrations and so much more and in fact they have hundreds of classes that are career focused and I think it's a great time spring right now still the beginning of the year maybe you're interested in becoming a freelancer starting your own business maybe you're just interested in what that even takes what's a business plan or maybe you just want to get better at mastering some skills in your current role no goal is too small no matter what you want to learn skillshare is there for you one of the classes that I've been going through is mastering your productivity with Ali abdall I absolutely love it he shows you not only the best tools but also talks through some different workflows to maximize your productivity it is absolutely delightful another one that I think is really really neat that I've always been fascinated about is how to start a successful online business what is ecomce I'm a developer every single day but what if I want to sell some coffee online or I want to sell some stickers online what does that look like Tracy Wallace is in a fantastic class that walks you through different e-commerce finding your product Niche actually setting up your store I'm excited about skillshare and I think you will be too you gotta check them out and that's why I've partnered with them and the first 1 000 people to use the link in the description below will get one month free trial to skillshare completely for free one month for free use the link below and thanks to skillshare for sponsoring this video and back to the show okay when you want to get started all you need to do is install Visual Studio or visual studio for mac and what you're going to want is the.net Maui workload that's going to give you everything that you need but of course if you're doing Blazer development you're probably going to want also the asp.net and web development workload as well now I'll link to documentation in the show notes below so it actually gives you a walkthrough of everything that you need now Blazer hybrid with Donna Mao is supported even and done at six but I'm going to be here in.net7 and you might be watching this one down at 8.9.10 comes out because it comes out every year but it should be a very similar process so just know the templates may look a little bit different as we're creating these projects based on what version of.net you're using but here I am using visual Studio 17 6 preview because I only do preview that's kind of my jam but the same will be true for your normal just stable release of Visual Studio whatever you're on okay so I'm going to go ahead and open up visual studio here I'm going to say new project now when I say a new project we're going to get all of our different project templates inside of visual studio and if you watch my Donna Maui uh getting started guide you'll know that there is a Maui drop down in the project template now over here you'll see I can I can access different languages different platforms that are in here and then of course like where I want to go now if you're under web you're going to see all the different web things such as Blazer server projects Blazer web assembly projects and things like that and if you actually go under Blazer you'll see the Blazer app specifically and the Donna Maui Blazer app you can find it under Blazer or you can just go under Maui and you're going to find the Maui app and the Dynam Maui Blazer app now Blazer Hybrid Works not only without ml it works with WPF and winforms as well but I'm only going to cover here.net Maui plus Blazer together in this hybrid scenario so here's what we're going to do we're going to go ahead and create a new Dynam Maui Blazer app and I'm going to call it let's say Blazer Maui app one that sounds good remember the default is and just hit next and you can select the framework that you want I'm going to say.net7 which is my current version I have installed and of course if you're using previews you can also use.net8.9 whatever you're on whatever you have installed it will be there as well all right so when I create this template I'm going to go ahead and zoom in on the top right and we're going to take a look specifically at the project that we're given I'm going to walk through what it is we're going to take a look at how we debug it how we run it how we modify the code and additionally how we tap into some native capabilities so if you are a Blazer developer the first you're going to notice is that there's a Razer file that came up and this is how we create components and Pages inside of Blazer applications so here we have a index.razer there's an H1 tag and then a another component called server prompt survey prompt if I right click on it and say go to definition we'll see that this is another Razer file this is in the shared folder and it has some spans some different HTML and some code right here as well now if we zoom in we can see that I have these dependencies and we have Android iOS Mac and windows those are the projects that I'm targeting we also have a properties for launch settings and more importantly we have this dubbed up root and this is where anything specifically for Blazer is going to go such as CSS my fave icons my index.html and a lot more so here we can see we have a bootstrap all set up with our Min class so we can use that by default it's basically the exact same template as a Blazer app in fact what we'll see under pages is that we have three pages we have the index we have a counter and this counter is doing what you may expect which is having a button that when you click it increments the count and it puts it out here in the current account right here and then we have this fetch data this fetch data is using standard Razer and Blazer injection here so we have our page of fetch data we're using our blasia Blazer Maui app one.data we're injecting in this forecast service which is being registered with our dependency service and it's just doing normal Razer page stuff so we have an if check if we don't have any forecasts we just say loading else it will display this table and here we are calling into that forecast asynchronously with a date time stamp if we look at the data we can see that we have a weather forecast service which this is going out and it's just simply returning random data for us with date times so nothing fancy there and we have a weather forecast so here we have a weather forecast object uh class that we have that's giving our date time temperature and summary and that's what's being displayed here we can see it right here and this is all Razer syntax so if you are brand new to that I'll put links to some documentation and some Microsoft learn modules to help you learn some of that syntax but it's basically enabling you to mix and match HTML and um and C sharp together and additionally with blazer you can execute you can put your code right here or in the code behind as well now what I want to also show off here is that we still have a platforms folder and if you've watched other Maui videos we can see that here we're targeting Android iOS Mac windows and tizen support too and inside of here anything specific for that platform for DOT net Maui so in our main activity we have a Maui app activity and we're accessing some Android namespaces all in C sharp so that's coming in automatically for us same thing on iOS we have an app delegate an info p list and this is just creating and starting up our application now under resources these are the Maui specific resources so if you're using things and modifying the app icon or you want to have um specific raw assets or splash screen images you're going to modify those here in the resources and then the shared folder is four different shared components um that we have for our Blazer app so here's that survey prompt that I showed you we have a nav menu which is nice and we have a main layout and this is all coming from our Blazer components and razor Pages here so beyond that we have a few other elements so we have an app xaml a main page xaml and a main razor and of course a Maui program our Maui program comes in and this specifically is telling the application how to start it goes in and it says please create and configure the application configure fonts and then here it's going to add the Maui Blazer webview and in debug mode when we compile that up it's going to add developer tools and the debug logger here you can know that this is all just the same asp.net core dependency Injection Service that's part of asp.net core but also down in Maui and here we're registering our Singleton for our forecast service which as we saw got automatically injected into our fetch data up here up top so here it is inject weather forecast service that handles it for us automatically now the difference here is this app and this app specifically is telling what Don Maui wants to do to start up the application itself so the app here has some Styles and some resources that are used in the.net Maui page because remember it's a.net Maui app that's hosting a Blazer webview but here in our code behind if I drop this down we'll see that we have an app that is initializing a main page and that main page if we ever get to it here is r.net Maui page now we are creating our main sort of container for the app in.net Maui then we're putting inside of it is Blazer webviews so you can host as many Native pages with a Blazer webview inside of it that then render out native components now when you are creating this when you're navigating inside of a blazer webview from component to component it's going to use the Razer and Blazer navigation system you can still use the.net Maui navigation system if you want to use the native uh navigation hierarchy in an Android or iOS Mac or Windows application and I actually have it did a video at the lawn uh one of the lead developers on Blazer hybrid.net conf in 2022 and I'll put a link to that up over there and down over here too but look at this here normally our content page would be filled with things such as buttons or grids or um things like a scroll view these are native controls and just like the native controls render native underlying components of the operating system that's what the Blazer webview does the Blazer webview takes advantage of the different Native web controls such as webview 2 on Windows and also the different web browser view controls on Android and iOS and gives access to these different Razer capabilities to render those components inside of the Blazer um webview specifically so here we have our root component it has a selector of app and this is loading up our main and if I go into our main we can see that our main specifically here coming from an as a Blazer application is loading our main layout it has a not found layout here and if we look at that main layout which was in our shared we can see that this is where we see our side nav menu which would give us our options to navigate between and also a main with an about page and the body here as well so now what we can do is we just have our Blazer application and we can just go ahead and run it and when I click on this drop down we have the capability of deploying to Android iOS Mac or Windows here just by default I'm going to select windows and hit debug so it automatically deploys onto my local machine now you are going to have to put your machine into developer mode and it'll actually prompt you and let you know if you haven't done that so make sure that you put it into into that mode but here this is going to compile up a native Windows application and then deploy it onto my machine so let's take a look at it here as it pops up and see what we have all right so we have our Blazer Maui app one over here we have our xaml live preview that's showing up over here we can minimize that for now I think but we have our app running and what we can see is that if I make this bigger or smaller it automatically adjusts based on CSS restyling so here if I'm more in a smaller mobile view for example I can navigate around so I can go to the counter I can go ahead and hit count count count I can fetch data get the weather data if I'm over here I'm in hot reload instead of just incrementing by one I could go back into my source code here and say counter and then what I could do is I could say plus equals 10. I could just hot reload that open up the app again and now we're incrementing that by 10 every single time which is cool you can also dynamically change the application while it's running so here we have the survey prompt but I can also put in a counter and reuse that component from the other page so now when I open up the app when I go to the home we can see that I have the counter component there too now they're not sharing any state because every time I navigate here it resets the state but of course you can enable state in your application but you get all of that that hot reload not only of your Maui and c-sharp components but also the Blazer razor components as well so you get all of that goodness built in now here this is basically a 100 Blazer app in being hosted inside of Don Maui so if I hit uh F12 we can note that I actually get full Dev tools here and I can hover over the different elements right so I do get this and that happens because I've enabled the developer debug mode here for my blazer webview so that's kind of cool right so I get all that stuff to show you that it's there well let's go ahead and run this application now on Android so I'm just going to go and say Android and I actually have an Android emulator running here and you can go into tools Android and there's a little uh drop down here for the SDK and Device Manager and the device manager will pop up there it is and you can create new Android emulators you can plug in an Android device anything that you want and I'm just going to hit debug now this is going to go through a full native compilation for the Android application and then it's going to deploy it onto this Android emulator that I have over here so this is going to take a few seconds because it's going to package it up for the very first time and then it's going to deploy so let's go ahead and let it do its thing as it compiles up that native application not only for a native Android app built without in Maui but with the Blazer webview inside of it okay so our application is starting up and what we hope to see is our hello world we have our counter here we have everything that we would expect and here we have the same counter right so we're getting the smaller look based on the form factor and the CSS styling so all that stuff is there now remember though that this is again it's a blazer webview with a native Android web control so that's what we're doing here as we navigate around going in through that control but it's still inside of that native application which means that we still have access to the different Native capabilities at the end of the day right and that's what's really really cool so I could go into the main activity and here I could go and specify and call any of the Android apis but then in Maui also has different cross-platform apis built in it sort of abstracts those apis as well so check this out let's say we go back into the counter and what I'm going to do is just copy this button and let's make this button check internet there we go and I'll say check internet there we go and I'm going to do a private async void check internet foreign let's go ahead and copy that there and now all we want to do is check the internet right so the first thing we need to do is like how do I get access to the internet well the first thing that we need to do is actually get access to those apis well Donna Maui handles that if I go in and I say Microsoft dot Maui I get a bunch of different apis that are built in here and specifically there's things like networking so I go networking there we go there's a application model which gives us stuff like app actions and app info and launching the browser externally and communication and sharing stuff but we want that that networking there we go and specifically we have access to this connectivity API and that's going to give us access to connection profiles to the current status of the network access and even change events when things happen so let's first say VAR has internet and I'll say connectivity dot current dot connection profiles and or not connection profiles no we want dot network access I'm going to say equals internet so if I have internet access I have internet access I was like VAR I'm going to say uh internet type and again I'm going to say connectivity dot current dot this time uh connection profiles and I'm just going to say that first or default there may be none in there so that's good to know now all we need to do is actually do a dialog a little pop-up now we are inside of a webview so we could pop up a webview control but we want probably the native look and feel right so um how would we be able to access that well done Maui has access to that and specifically the application and the main pages of Don Maui can render and display these native pop-up dialogs so what I'm going to do is I'm going to say oh wait I'm going to say application dot current so that's the.net Maui application running I'm going to say main page and I can hear say display action sheet alert or display a prompt async and this is going to enable me to say internet and then give it a message so here let's just do something like this and I'll say uh status and I'll say has internet and then of type internet type and then I'm going to say okay all right and now when I run this application I'm going to run it without debugging so that way uh I can actually disconnect and show you what this looks like what this is going to do is now run this check internet on this page but it's going to go ahead or on this component actually because I'm using this component multiple places but it's going to go ahead and tap into those native apis and do a native dialog pop-up so I'm going to say check internet I'm going to say true it's on Wi-Fi totally good to go and now here if I go ahead and put this into airplane mode there we go say check internet now it says false and that doesn't have a type at all because it is offline I'm going to put this back into airplane mode say check internet now it's cellular if I go ahead and wait for the Wi-Fi on the Android emulator pop up it's going to just pick the first one so it's still Cellular in there which is interesting and funny but it'll be there as well right so we get the that internet access and the native dialogue prompts now I can't reiterate this enough and you might be wondering well how is this working you just went offline the app still works do I need a server do I need webassembly new how's this running remember this is a Blazer hybrid app.net Maui is running that.net code and there's already a.net runtime there there is no server there is no web assembly it's just.net Maui handling all of that.net goodness of that Blazer webview and all of these components and controls too so now if I go back over and run this on Windows over here let me go ahead and run this what we're going to see is we're gonna get the same type of application that we have running over here but specifically it's not running on Windows and we're going to get a native Windows dialog that will come up because again this display alert is handling that for us automatically so here we go this is going to load up and again we're going to get the app running here there we go we have this application running check internet and now I'm getting ethernet here because I'm on a machine with ethernet which is there so we get true which is very cool I'm not going to put my machine in to uh offline mode but we get this native win UI prompt that we would expect which is really really cool that's going to adhere to light theme dark theme everything like that inside of our application all right so so far what we've seen is getting our actual Blazer hybrid application with Dynamic up and running deploying it on Windows and on Android you might be wondering well what about iOS or what about Mac well for Mac you're going to need to go to the mac and you're going to actually have to deploy it on a Mac just like on Windows on Windows for iOS I actually have a full video of how to deploy.net Maui apps including Blazer hybrid apps with Don and Maui onto an actual iOS device without a Mac at all just plug it into your Windows machine or connecting remotely to your Mac as a remote build host to see an iOS simulator on your Windows machine which is really cool I'm going to put a link over here and down below as well so you can go and check that out in the next steps all right so we've covered some components but what about sharing code right we're not sharing code between our Blazer hybrid app and our actual Blazer web application how do we do that let's take a look Okay so uh we have our Blazer you know Maui application up and running what about sharing code between a Blazer application and my hybrid application well the first thing I'm going to do is I'm going to add a new project and let's go ahead and just add a Blazer app over here I'm going to do Blazer server it doesn't really matter I'm going to do Blazer app one now this Blazer app one is going to look basically identical to what we had earlier so if I go ahead and set this Blazer app one as the startup project we're going to also note that I have a counter a fetch data an index I have a weather forecast a Weather Service I can just hit go and debug and this will go ahead and launch my browser and then run my application now here in this instance you're going to see that well doesn't this look basically identical right there's this if I make this smaller over here yep yeah that looks pretty much it because it's the same code right the template share that the same code components so how do we actually go about sharing code between and components between these well what we need to do is go into our project and I'm going to right click I'm going to say add I'm going to say new project and what I'm going to do is I'm going to go in and I'm going to say give me a razor let's type for Razer class Library and a Razer class library is going to enable me to share different components between our Blazer app and our Blazer Maui hybrid application so I'm going to say Razer class Library one there we go create it there and now what we have is three projects our Blazer web app our mobile and desktop app and our Razer class Library here now this has one component that says this is a component defined by this library now let's add it first into our Blazer app so I'm just going to say add project reference our Razer class Library and now to use this all I need to do is come in and say component one just like that now when I run this again we're going to see our survey prompt which is how is Blazer working for you and then we're going to have our Razer class Library component right here so here we go launch it up there it is it's beautiful it's stunning it's amazing oh it's right there it's everything that you would expect inside of there automatically and now guess what I can add that exact same Razer class Library over here I'm going to say drop that down dependencies add project reference Razer class library now I'm going to go into my pages I'm going to go into my index and you guessed it let's replace counter with our razor component one and I'm going to set the Blazer hybrid app as the startup I'm just going to go and deploy it to my Windows machine and you guessed it we're going to see the exact same Razer class Library component here shared between our Blazer app and our Dynamo app powered by Blazer hybrid all right let's give this a second to boot up and we should see that we get the exact same look and feel of that component I'm on a wide screen so that's why I'm managing that around which is uh which is funny so there we go it's the same exact component so now you know if I zoom in here you could you could actually see that you could start to share all of these data classes these Pages between all of them and basically the entire project the entire app could be put into that Razer class library or other dot net six or dotnet7 class libraries and share that code there so you can start to see how you can share out those different components inside of this data structure Okay cool so that's how you get started that's how you start sharing components but what about you know mixing and matching that webview web components and the native components because right now it's just the entirety of the app what if you want to make it a little bit more native right how do we do that and that's really the beauty of Blazer hybrid is being able to mix and match those different pages however you want to so let's go ahead and do that now so I'm going to do the rest of my work inside of my blazer Maui app I'm just going to close the tabs the first thing that we want to do is I'm going to go into my main page here and note that I'm using the navigation structure I'm using just this main razor that's showing the nav inside of here what if I wanted to use like native tabs right and I wanted to host those different pages inside of it how could I do that well I could easily do that because what I could say is don't make this a Content page make this a tabbed page let's get rid of the background color here and a tapped page has different pages in it so here I'm going to say that this is a Content page I'm going to say title I'm going to say home there we go and I'm going to wrap this Blazer webview inside of a native component page of home now what I'm going to do is I'm going to go ahead and copy this a few times I'm going to then do counter and weather okay now what we're going to do is instead of putting these local components in it I want to put the individual Pages inside of it so to get access to that we can see here that we have local but let me just do a new xmlns which is a namespace XML namespace I'll say pages I'm going to say pages now here I can say Pages colon index Pages colon counter and pages colon and here I'm going to go ahead and say fetch data all right now the other thing I can do too is I could come in and let me go ahead and just add one other change here in the code behind is that this was a Content page I'm going to make this a tabbed page there we go now what I could also do is I could come in and say you know what I also want to in my pages add a native page so let me go ahead and say add new item I'm going to say Donna Maui I'm going to add a new content page here so I'm going to say new page one that sounds great all right and what this page is going to do is going to say welcome to donate Maui but let's put like a button in here and say text native uh button let's put in a um I don't know what else is in here um a check box why not let's put a switch in here why not yeah but any control basically native controls and what I could do at this point is I could come in and say this is new page one that's fine I can go back into my main page and I can say let's make that the next page so I'm going to say local or pages new page one I'm just adding a page in there so multiple pages in this application and now when I go ahead and run this what we're going to see is that we actually get a bunch of different tabs inside of this application oh okay now of course once of course I delete this x colon name because every component can't have the same name so we don't need that now I should be able to run it and we should be good to go let's see here fingers crossed doing it live so we'll get those four tabs three will be Blazer and one will be a native.net Maui page with Native controls all right again we get our application up and running and now we're getting our native our tabs up top with those native animations which is really cool and I get this main page one so here's a native button I get a native check box a native switch here which is really cool so we get those nice little things and then of course I'm getting just my blazer webview right here which is really cool look at that boom boom boom boom and we're sharing all that code now of course I'd want to put some padding in here I want to make it a little bit nicer I could add light and dark theme support all those different things there get access to all of that stuff but I get those native buttons native controls so you can see how you can mix and match these together and I would also say this is that not only can you you know mix and match these components together what you could also do is you could come in and you could mix and match these pages together right so I could say hey let me in this page I'm just going to put a grid in here I'm going to say uh um Road definitions I'm going to say Auto and star and then maybe I want a button that is text native button in here and I'm going to put this Blazer webview in grid.row1 now here when I go over into my counter page I might have to refresh this here what we'll see is that we're going to get an actual blend between the native web View and the native control so here we're going to put a button here on the first row and then the Blazer webview on the second row here so there we go our counter and there we go we get our counter here so we're blending these worlds together right you can create your own page you can put these blades or web using it you can do whatever you want which is really really cool so you can mix and match those different components together which is really amazing to see and the same thing will be true here if I run this back over on Android what we're going to note is that we're going to get again a very similar look and feel because now we're going to be using those reusable Blazer web views and this time though getting a native Android tab View and of course our native page down here page one that's going to be rendering out on Native controls so here we're going to let this compile up and deploy again it should take a little bit less time because it is the second time compiling up so fingers crossed there that it takes a little bit less time all right our application is loading up we're getting our xaml hot reload initialize and now we have our different tabs here on top we have our counter our native Android button here that we can see with the Ripple we have our new forecast so we have the native uh Android uh buttons and widgets over here which is pretty cool now you can also put these on the bottom too on an Android tab page so if I wanted to I can come up here and I can actually say xmlns Android I'm going to say Android um specific so this is kind of a cool feature here so I can say Android tabbed page and here I can say toolbar placement I can say on the bottom and when I go ahead and run this application again now this is kind of a nice thing with Don and Maui is that there's different tweaks for the different operating systems kind of these platform specifics for iOS Android Omega Windows is that you can say oh I want these actually on the bottom because I have I have those capabilities so now we're getting the different pages and controls down here right which is kind of cool so you're in control of what you want over here you could wrap it in a navigation page and you could have the nav bar on there and all that goodness of course that you would would want and you can enable and disable swiping through and now I could go back in I could add different padding different spacing I can really optimize it exactly how I want but we're not blending these two worlds together which is a really really cool to see all right so that is a whirlwind tour of Donna Maui plus Blazer Blazer hybrid altogether building out these native and hybrid web applications for iOS Android Mac and windows and sharing code with our web app all powered by Donna Blazer and Maui what do you think um are you a Blazer developer looking to go to mobile are you a web developer looking to go mobile or build a website or maybe you're done at Maui developer that needs to blend in a little bit of web into your application what do you think leave comments below let me know where you're at your jury maybe you build something really awesome because it's been out for a while at this point maybe you're building some awesome stuff share with me would love to see what you're building I've seen tons of awesome applications in fact a really app that we built is the.net podcast app which is a full-blown application that I'll put in the show notes below that's not only a dotted Maui app a Blazer a hybrid application a Blazer back-end powered by Azure service is really really cool put that down there too you can just get it up and running and see a full application at scale built out I love this stuff people ask me James seemed to be talking about Blazer and Donna Maui and this and that you know I thought you're all Native Native Native well I like the ability to be flexible right in this day and age we need to be flexible we need to to meet developers where they're at where are you at are you web developer well now you can build mobile apps with.net that's amazing right you know you get this flexibility to do more and that's what I think is really cool whether you're building with Blazer and Blazer hybrid or donate Maui alone you're building with net you're building with Maui it's a beautiful wonderful world I hope that you like this video if you want more stuff on Blazer or on Don and Maui or specific things leave it in the comments below down there too in the show notes I'm gonna put links to my workshop I'm gonna put links to the beginner series to uh Jeff Fritz who did a full Blazer beginner series as well on the donet YouTube all sorts of good stuff over there I want you to to Deep dive into this stuff and start building out beautiful applications that are native or hybrid or a little bit of both jam on that like button if you like this video and of course don't forget to subscribe and hit that notification Bell I super appreciate it so until next time I'm James thanks for watching foreign [Music]

Channel: James Montemagno

Views: 73,838

Keywords: blazor hybrid app, blazor hybrid maui, blazor, blazor hybrid tutorial, maui blazor, maui blazor tutorial, visual studio maui totorial, blazor hybrid vs maui, maui blazor hybrid tutorial, hybrid app c#, blazor hybrid c#, dotnet maui, blazor webassembly, blazor mvvm, blazor maui getting started, tutorial for beginner's, dot net maui, maui tutorial, blazor tutorial for beginners, get started with .net maui blazor, blazor hybrid, blazor hybridisual studio, blazor ui, c#

Id: lqLfY9zNKNY

Length: 45min 1sec (2701 seconds)

Published: Fri Apr 28 2023