Modernization Through Migration: A .NET MAUI Workshop

welcome people um to the modernization and migration uh you know Workshop series um we are your hosts I'm Sam Basu with me I have Ed Charbonneau we have we are both uh you know Dev Advocate now we have seen things evolve in the.net space uh so we are thinking um this might be a good time for all of you uh to look at the stability of the Frameworks and the tooling and try to see how you can move your code bases uh forward so this will be a four hour Workshop this is today uh hopefully many of you will be able to follow along we'll you know slow things down a little bit where wherever I'm showing you things that have been quoted up before I will point you to you know GitHub repos where you can get the code but most of the things that we do today are going to be you know things that you should be able to follow along so if you look at you know modern.net let's just begin with with this to have that site add just dot dot net thing to do yeah so if you if you look at modern.net uh you know it's it's not the same monolithic you know uh big uh framework anymore it's very Nimble it's cross-platform it's open source and uh it you know works and runs everywhere you can Target just about every you know device nowadays um so maybe you have mobile apps uh and desktop apps that you're trying to modernize so that's what we'll look at today for some of the web apps you have you know a lot more choices on how you modernize that's all coming up next week when um and I think Jeff Fritz joins us for the next one as well absolutely yeah so that should be a lot of fun talking about all things asp.net and Blazer today we are going to stick to more of the Native side of the story which is desktop apps and mobile apps but we will bring in some laser goodness as well um so if you look at you know let me run any JavaScript right Sam no no JavaScript uh you might see me Tinker a little bit with JavaScript because I think that's the reality iron uh in in you know most people's uh front-end code bases for web apps so it's all welcome it's it's all welcome in Maui so we should be good so if you look at uh you know what we are um you know hoping to cover today it's going to be a lot of you know I have a xamarin app uh how do I move forward what are my benefits should I move forward how do I move forward then I have a WPF app uh what's my way forward I have a winforms app what's my way forward I'm starting up a you know Greenfield uh you know desktop app what are my choices so uh it's going to be more of a conversation more of just a strategy type session and we're going and to uh you know try to dive into as much code as we can and you know hopefully you folks can in a follow along um so going back to.net you know it's modern and it's it's here to stay uh since net you know 3.0 uh each days everything is cross-platform everything works um so.net is just a folder on your machine so you can you know blow it away uh reinstall it so it's you don't have to go through the huge like system-wide installations anymore and you can package.net with your apps so that's nice so it can be you know independently you know hosted so shipping apps becomes a little bit easier so a lot of options here web desktop mobile however you want to do this um so if you want to get on the latest dot Nets so I'm going to hit the download button and see where they take you okay so you have a few choices so.net 6 was the last long term support three so every November you get a.net right and Dot Net 7 came out last November which is stand release again so that doesn't mean it doesn't you know have the longevity it's just you know the LTS releases are the ones which you are guaranteed like three years of support doesn't mean that the other ones you know go away and it's gonna so.net 7 is your present production.net right so however you get it on Windows on Mac I am starting out on a Mac here but I will switch uh things to um to a Windows machine in a bit um so.net 7 is the latest production ready if you are wanting to stay on the bleeding edge.net 8 is also coming out so this November 2023 you're going to get.net 8 and we have had about six seven previews of dotnet 8 so far uh and we are getting ready if you look at the timelines we are getting ready uh to be maybe next week uh to get some RC release candidate bitsoft.net 8. so you'll have likely one two or three release candidates and then we go to GA General availability of.net eight in November so you know get the lot you know latest.nets on whichever machine that you are it's easy to download uh you know if you look at some of the download options you can do you know Linux and mac and windows arm 64 or x64 get just the binaries or get the sdks and you know however you want to get it um you know you go ahead and get it there are some workloads here that are just nicely you know divvied up there are some sdks and there are some desktop workloads and there are some asp.net workloads and you know Mary workloads so workloads are the things that you get in addition to the binaries to you know get started so yeah that's just a high level on all things.net um Ed am I missing out saying anything I think you covered it pretty well Sam and we can we can install these side by side for the most part right absolutely so um I actually have a few things installed I see some of our good friends show up here on uh on chat uh hello Rocket Man um yeah we have some good local pizza chains that's a whole other conversation do not get me a side checked with pizza is that I can talk about pizza for a long time so if you have any.net installs I have command line opened up here um so if I do a.net version it's going to tell me what my latest.net version is so if I do a you know file new project.net app you can see I'm running.net 8 with a certain preview number to it so that's what it's going to start using by default but I also have other.nets so I think if I do a.net list my sdks then it's going to tell me that hey I have everything from 6 to a couple of versions of seven and then I have the eight so absolutely they can coexist side by side and even when you have multiple.nets you don't have to go with the latest.nets you can choose there are some you know configurations that you can do on a per app basis on a per folder basis to say no go ahead and use.net6 that's what I still want to do or.net7 so just because you have.net 8 installed doesn't mean you have to run on you know eight all the time all right um so let's see you've got all the sdks installed Sam yeah I've actually cleaned up a few I've had a preview a few preview once as well um Jay Bowman in the chat room really interested for the asp.net Blazer one um where do you find a link to register okay um so like Ed was saying uh maybe the easiest one is if I go to tulare.com Black which is a webinars so um this is uh listed as the second one but this is actually happening earlier this is today so this is the one for the Blazer one that's coming up uh tomorrow but don't leave yet because we will talk about Blazer that's why I brought head on here uh this way you know fun where we bring in Placer into Maui into WPF into winforms those are all options for good options um okay uh so let's see um oh uh there are some friends here uh Kurt Liz rockerman in Columbus Ohio I used to live in Palmer so as I get the reference here now I'm in Pennsylvania and I don't get as good as Pizza as I as we used to in Ohio uh anyways we're talking about U.S Centric things here some of us are local within the midwest regions of the United States but you know if you're in Europe I'm sure you have great pizza uh better Pizza sometimes than us anyways so uh that's you know present.net uh you get the.net that you want so um let's start with the mobile front first right so let's say you have been running a native mobile app that you've written with xamarin iOS xamarin Android or xamarin forms and you have seen some of the.net Maui stuff and you're considering is it time enough for me to migrate or um you know is tooling stable enough or the Frameworks um you know good enough what should major solve our consideration so let's start with xamarin Maui's story first and then we'll switch to desktop okay um so I am going to start off with net Maui first so if you have not done any Maui if you have you know been on the fence just you know seeing it grow uh this is about three plus years in the making so the first Dr Mary platform and if you do a search on documentary this will likely be the page where you land it's just a landing page looks nice with the fonts and and some of the ingredients uh but you know dotnet Mary came out with uh kind of Midway in between.net6 and dotnet7 uh so I think it was May 2022 was when when it came out and then it kind of evolved a little bit more uh with you know.net 7 and you know now it's much more grown up I mean it's getting ready for DOT net eight so uh this is stable Ed and me have uh you know a lot of success stories to share where Enterprise folks who have huge applications are building desktop first apps uh with Dr Maui right so the framework is here it's matured I think and tooling wise we'll talk about visual studio and vs code some of the other options here but it's there for you to build modern mobile apps and modern desktop apps so I'm going to start off here again if you are new to Dr Maui get the bits it says you know get started here so once you do uh it's going to tell you you know here's how you get you know installation on Windows Mac or Linux and here's how you get the binaries and the sdks so I'm going to start off here with visual studio for mac and I know it has a few things to say I have a few things to say as well here which we'll talk about but you know ID wise we'll talk about some other options but let's just open up a brand new um in Dot and Maui app and again if you don't need to follow along if you want just do file new project that's what I'm showing you so if I do a file a new project here if you have the modern.net installed if you have um you know the dotn value work notes installed then you will see a multi-platform app be it in Visual Studio for Windows or Mac same exact thing and if you see these two templates one is a.net Maui app one is a.net Maui app Blazer hybrid if you see these two templates then you're fine so that's what I'm doing I hit continue and you can choose.net 7 or dotnet 8 based on whatever you have installed and you get up and going so once you open up a new project like this file new project this is kind of what you get and Sam if I if I don't have those templates what should I do okay so you have a couple of options so if you are on Windows right so uh let's let's go back here um I think they have Windows versus uh uh Mac OS specific uh things but if you're on window tabs on the left hand side there yeah exactly right so it actually knows that I'm on Max so it tells me that so the best way to get it on Windows is to get visual studio right uh Visual Studio 2022 onwards you should be able to have a checkbox that says give me the document Maui workloads and that's how you get it if you for some reason don't see it or let's just say you're on a Mac then there are a couple of things you can do so if I do a net first up if you do not see command line like.net-help or just.net you don't have.net installed any modern.net so it's going to give you the command line um so I think I can do a list my workloads or I may be getting this wrong now I think it's uh there's a way to list my workloads hold on I have a cheat sheet there's also on that same page you were just on there are install instructions under Windows and Mac absolutely so here's my million dollar uh cheat sheet of all the commands because I cannot remember you should share this Sam is this online uh no okay so it's dotnet workload list right there you go so you grab that and um you do a workload list it's going to tell you all the workloads that you have I have taken out a few ones so right now it's showing me the latest Maui ones sometimes you'll see iOS you'll see Mac Catalyst if you are in any doubt like do I have the Maui workloads installed I maybe I don't see the templates then this is a good place to start you are just going to do uh where is it you can just do a net workload install Maui right sometimes you might have you know multiple nougat packages so it helps to say you know ignore my failed you know sources otherwise.net workload install Maui that for sure on Windows or Mac is going to get you the workload bits that you need does that answer your question Ed yep I think that about does it okay and uh again chat room uh we are here for four hours feel free to you know take a coffee break come back and join us uh but and hopefully you can keep doing some things we are uh doing here with us uh so let me know and if uh if I need to respond to the chat room otherwise I will uh keep on going so uh let's bump up my phones here a little bit and I will dive through what you get so this is a you know hello world documentary project now maybe you have seen this maybe you haven't but I wanted to start here just to Showcase what some of the differences are because we are going to look at xamarin forms and we're going to look at some migration stories so it helps understand what is it that we're trying to move to this is a boilerplate.net Maui uh solution with just one project in it now the first difference that you should see is in my um solution I don't have five different projects for one for iOS one for Android one for Windows one for taizen it's just all one so this is what they call the single uh project and if you look at the Cs project here there are a couple of things in here to you know kind of note first is uh the project style is now a microsoft.net SDK so this is what they call an SDK style project it's a CS project with that on top makes things much more simple easy to read and you're going to see this one line of code here that says single Project true now this is going to be important when we look at migration from xamarin forms because you do not have to make this true if you don't want right because in xamarin forms we have you know five different projects and when you're trying to migrate over I would recommend you you know move to this single project but you are not forced into it if you don't want it uh there are a few more things that they drop in here for you um this use Maui of true you absolutely want to make this true because this is what gives you some of the apis so platform level apis like I want to write C sharp that I want to reach into an iOS camera or an Android camera or a Windows or a Mac I want those platform level apis to be all accessible to me that one flag is going to be the one that opens it up so if you make that false a lot of things will be turned off for you so make sure you have that now this implicit usings again you're not forced into this I recommend that you keep it on because this is what's going to let you write C sharp 11 and you're going to benefit from all of the language features and then the output type here is an exe because we are trying to build and this target Frameworks this is what they call what's called a multi-targeted project so it's a single project but it has a list of all the platforms where it can run and those are just names.net7 android.net7io Catalyst for Windows it's just a little bit more complicated you can also do tizen here and then it comes down to some of the other property groups and this is where you get some of the benefits so down here is a folder here called resources this resources folder is just a folder it's not a different project but all of your app dependencies all if you look at packages they are just in one place so even though the dependencies they will show you the different things for iOS Android Mac cat list but you don't have to worry about this when you add a nougat package here it's going to add that nougat package for every one of those platforms that you need and at runtime it's just smart enough it's just one copy of that printed packet it just shows up here differently but you do have these resources folders um a resources folder which is essentially all of your shared things and this having done a lot of xamarin forms and now having done some Maui this is one of the biggest benefits right so all of your things that you want to be shared are right here so that includes your app icons that includes your Splash screens your fonts your images any of your Styles be example Styles as well as like CSS Styles which we'll talk about everything is shared the images is particularly nice if you look at some of the splash screens here and they have a thing called the image resize itizer built in it's kind of a funny name but that's exactly what it does you don't see it it's just an internal um you know framework feature so you give it an SVG and they're going to try to figure out how to render that right SVG for iOS Android Windows and Mac in terms of Splash screens in terms of icons so fonts is a huge benefit here so in xamarin forms you would have to install a font for every platform that you support and then manage the changes now it's just in one place so which is really nice okay so this is kind of how it starts out with resources and then you still do have a platforms folder now this is just a folder not you know five different projects Android iOS Mac tizen windows so anything that is specific to each platform still needs to go in here so and you will have some things that are specific for example info plist or your permissions uh manifest xaml in in Android or Windows or tizen specific things and every program will have like a program.cs which is how it bootstraps the app and then Maui comes in app delegate is the one that you know does the bootstrapping and then your permissions your entitlements all of your extra things they still stay at a per platform level except you are trying to not add you know as little code as possible for the platform specific things because you want it to be truly cross-platform um so uh there are some things that will still be there in the platforms using crawlers but you are trying to you know try to get away from it as much as possible when you do a build uh it looks at all of these Target Frameworks if I do a build right now it's going to try to build for every framework so you know one pro tip is when you are you know developing a new app you don't want to do a build probably for every platform every single time so turn these things off maybe you're just you know building first for iOS or first for Android first for Windows uh you can get to those things but you know while you are doing your inner Dev Loop of you know trying to make some changes seeing it uh work you know turn off some of the other Target Frameworks that you don't need so now this one here is a Maui app so everything should be set here uh it's you know giving me a choice of all the different things that I can you know run this on I can you know Zoom this a little bit so I can run this on Mac all types of iOS simulators I can run this on Android and and so on and so forth so let's go ahead and do a quick run here um on a Mac first that's going to be desktop if you are wanting to um play along just hopefully find new project Mary I'm just trying to give you an explanation of where some of the things fit um so let us know if you have any questions okay so out comes uh a Maui desktop application this is just hello world you get the nice.net bot logo and you click on this it's going to count how many times you clicked pretty simple and then the same app I can simply switch this up to let's just run this on um on an iOS simulator here um and let's do a build one quick question that we get a lot is um what if I'm on Windows do I need to have a Mac to build for iOS and the answer is yes and no it's complicated because here's the thing when you're building these app packages these are all midi wrap packages absolutely native apps so they need to be built on each platform natively so for iOS it's xcode so apple has a restriction that your apps that go to the stores or that have been Enterprise distributed to your users they need to be built with xcode that is licensed to the same developer that has the Apple Store account so no one can get you around that so that's in Apple's developer Store App Store um you know pricing 99 for a year but you don't have to have the physical Mac you know you just need to have an xcode maybe it's in the cloud maybe it's you know a Mac Mini that you throw on onto the desktop and then you never have to actually see the Mac as long as Visual Studio can go and talk to your xcode and do the build that's all you need so um out comes the same documentary app now on an iOS and it'll work on iPad it'll work on Android you you get the idea so this is just hello world and it's nice that I can just you know without changing a line of code since the build is smart enough I can just point it to a certain platform to do a build as that's really nice we had any questions here so far I think we're doing pretty good so far Sam uh just remind folks uh in in the chat um I am monitoring chat if you have questions as we go along it is an interactive Workshop make sure you drop something in there and we'll try to answer it the best we can yep um so while the app did run um I forgot to show you a few more things so first up is Maui program.cs this is a departure from what we had in xamarin forms so this one is now using the.net generic build host so now you have the create Builder exactly the way you know Ed does things for Blazer we are just tapping into the.net you know build host and we can plug in any of our dependencies uh you know you can you know set up all of your fonts and anything else that system wide you have or app wide you have dependencies on you can just do it all right here so dependency injection is now baked in this was actually a little bit of an internal battle because you uh while the benefits are obvious you pay a little bit of a price performance wise as the app is you know coming up but again the benefits you know far overway um the the little downside that you take hit on in terms of performance and then everything starts up here with apps animal which is you know a common place to keep your Styles or maybe you want to move your Styles off like as they do here so they remove the Styles and the colors off to xaml and they put it in the shared repository so you don't have you know to keep updating it here and then your app starts out um with the app shell and in fact let's go into the app xaml.cs this one here points you to the app shell again this was also heavily debated app shell is a way of of getting you a common uh or a nicer starting point right so most apps end up being a collection of views that you navigate in between so you can you know roll on your own I often do not use the app shell so you're not forced into it you can simply say main page is new main page then it starts out right off here mainpages.xaml this is the view that you see so this is the one that has the.net bot and the button and the hello world so that's what you see except we are not coming to this page directly we are starting off with app xaml which is saying no go to the Shell and the shell essentially says Okay I I am empty I don't have anything I just have a single container and I'm going to point you to the main page so if you want to skip the shell that's totally fine you can come straight to the main page but the benefit is with the shell you get the fly outs you get the tabs at the bottom for you know know iOS you can get apps to the bottom for Android and then navigating between view one and view two and view 3 and coming back all of that is kind of built in and it's in a URL based navigation you can you know carry parameters forward and back so it just gives you a nice you know starting point but you know it's good that they are not you know forcing you into this some of the fly outs are disabled but you can add your own fly outs and get going with it okay so um add any questions from you on just uh you know Maui hello world scenario and how things are starting up under um use Valley app uh it's typed is that starting up the app.xaml is that what that's for I am not following where you see use now yeah use Mario line 11. oh I see this one here it has a type of app pointing to the app.xaml the whole program there so that's your like your roots like entry point to the application main.cs like uh yeah entry point and that app.cs like this app this is a object that stays in memory while the app is running all through and then there are some things off the app object that we can tap into there are some preferences there are some dictionaries there are some things you can you're you know write into but this app object stays with you all through okay so this is Maui hello world right now let's talk about how you get here if you have uh something else so let's switch gears here oh and by the way um before I I do that let me let me close this okay um because this is what uh Ed and we were talking about visual studio so if you have not heard uh Visual Studio for Mac uh is being retired now if you are if you are old like me uh I mean it it's totally understandable why if you you know look at the present uh you know area of tooling but it still is is a little bit of a you know sad uh in a time for me because I have seen the visual studio for Mac uh IDE kind of uh evolve like we started way back 2011 12 time frame where it was mono devop this was even prior to xamarin days they had an ID called Mono devop which was you know portof.net outside of windows and it was meant for Linux but it had a built up an idea around it and then xamarin came along and uh they built up a whole ID called xamarin Studio which is how you build IOS and Android apps on Windows or Mac and then Microsoft took over xamarin and then it became visual studio for Mac so a lot of people may not know this history but but this that you see Visual Studio 2020 for Mac essentially is a borrowed code base from a few iterations of Ides now this is an IDE but uh you know you know I don't know exactly you know usage numbers but it's expensive to maintain engineering wise uh a lot of emphasis nowadays with Blazer and with Maui or you know any other type of tooling is with Visual Studio code it is you know cross-platform it's clearly very lightweight and you know Ultra popular um so it's just was becoming a you know maintenance headache so visual studio 2022 for Mac is going to be retiring next year right so while I'm showing you some of these things and again you can keep on using it forever but it's not going to get any security or you know platform features so the same app that I showed you is actually the same exact experience on Visual Studio code so here's Visual Studio code um if I um let me show you this first so.net Maui extension for vs code and you will likely end up here so there's a documentary extension for visual studio code that lets you do all of the things it writes on top of the c-sharp dev kit and the c-sharp extension these are language pack features and cross-platform features um using you know newer compiler systems like Rosalind and this talks about how you go about you know getting the extension and you know building it here is Visual Studio code if I look into my um my extensions here you'll see that I have a few things I don't have much I I'm not a heavy vs code user but you know maybe it's time I I jump into that you can see that I have intellicode C sharp dev kit I have dot in Maui so this is the extension that you need because once you have that things light up so if I do a create new project here if I can zoom in you can see I can get the same exact you know.net new project types.net new maui.net new Maui Blazer hybrid all of myasp.net stuff all of my blazer stuff so it's pretty much the same exact things that you get and then if you do a documentary project here let's do that again you get asked like where should I you know keep the folder and then it gives you the exact same project so if I actually open that same Hello World app that we just looked at let's go into projects and let's uh what was it called Maui hello this one here um so let's open up that same project that we just looked at and um out comes this little one here hold on let me double tap on this yep close some of these warnings now here's something new this Maui hello this is the normal um kind of explorer that you get with Visual Studio code uh let me bump up the fonts here a little bit more so this is fine but I think they're trying to borrow more much more from Visual Studio as the ID so you get a solution Explorer now this is the same thing that it's just a little bit more aware of your files and folders and how things need to be arranged you can right click on things a little bit more uh so you have the exact same app and then I can run this I can just run this from here I can say start without debugging um you know or I can let's just you know go into a xaml file or a CS file here once I'm you know I have a diamond Maui project opened down here at the bottom you have this little curly brace which is sometimes hard to see it's like this little one that I'm talking about this one here gives you all the other options like this right now my debug Target is a Mac but if I tap on this I now get all of the same options like here's my Mac here's my pixel 5 here's my Android here's my iPads all of the same things that you see from Visual Studio they are also right there now so Sam there's a question that is very closely related to what you're talking about right now so we should hit it while you're on the topic uh the question was uh on the development Loop is it better to be on the platform uh for performance and debug reasons is there anything better about being say on a Mac while you're debugging in Mac OS app versus like debugging it from remote or something I see um well yeah yeah I mean if you're running if you're on Windows and if you're building a Windows app and that's what you're debugging um it's going to be a little faster uh if you are on a Mac and you're debugging a Mac cat list app it's going to be a little faster but again that's just for Windows the moment you go to iOS or Android it's it's about the same and if your simulators are local then it's a little bit faster as compared to remote simulators where you're trying to look into something else or a machine that's somewhere else so yes it's it's faster if you can be local but at the same time you know things have come a long way so it's not you know uh not so bad if you do remote as well and a follow-up question here is it true that you can debug uh or use the debug version of the application um running the Apple Gadget directly to a Windows machine oh Apple Gadget uh let me let me read the read the question again go ahead uh um I can see I can flag that one for you oh I see from uh gujaro Clary dick if I'm saying it right is it true the debug version of the application can be run on any Apple Gadget directly connected to developers machine uh yes so um I'm hesitating a little bit trying to understand what you're asking here but essentially um you can have the iOS project as long as Visual Studio can talk to an xcode you can deploy it on any simulator or a regular device like an iPad or an apple um so yes absolutely you can deploy anywhere as long as you know you're on Windows you want to deploy to an iOS device Visual Studio will need to go talk to an xcode and do the build but you don't need to look at a Max so essentially there is a thing here if I let me collapse the Q a panel there's a thing here called um Windows iOS simulator so if you're on Windows and if you are building for iOS then this is likely what you will end up using um so you you have some of these you know remote simulators on your you know on the Mac side but then you get when you hit F5 from Visual Studio on Windows you essentially get this which is just a remote version of the iOS simulator it's just essentially the iOS simulator running inside of a small you know shell of a window and then it just you know streams essentially whatever the IR simulator is showing you on on a Mac the benefit here is you know Max as much as Ed likes to make fun of me Max will not have a touch screen and I actually don't want them to have a touch screen their iPads that I can go touch but Windows machines do have touch right so if you have a Maui app like this and you're on Windows maybe you want to use this simulator because this lets you pinch and zoom this lets you actually tap on things if you want so it's your choice I think you might have already answered this one Sam but it might be worth showing one more time um can you show how to toggle between different devices from Visual Studio code yeah yeah so uh again this is all very new if you have feedback about this so the documentary extension for visual studio it's not out ready yet and in fact there are some things that it has some catching up to do so if you are you know editing some xaml your xaml intellisense is not quite at par with what you'll get for visual studio for Mac but then that's just you know vs code versus Mac on Windows Visual Studio is more than capable but you know vs code is catching up a little bit so some things are not quite done yet they're working on it maybe they will change this up as well but down here notice at the very bottom of my screen it's aware of which language that I'm using so language mode is xaml or language mode is c-sharp and right next to it uh you know I've given them this feedback that this needs to be more prominent to know exactly where you're running so this is where you switch up your debug Target so I can choose an Android I can choose an iPad or uh or an iOS device right so again it's just a little bit hidden uh doesn't show all the way uh very prominently where you're running but you get used to it once you you know do this a little bit Visual Studio shows you more of a drop down vs4 Mac and vs code is just more in front okay so add any more questions or shall we move on uh we get a couple related to migration they're a little bit off topic I don't know if you got a migration segment coming up we can answer them in or if you want to take that now yeah okay let's let's look at some migration patterns some more differences then we'll try to do a little bit of a migrations thing and maybe we'll get to that when we get there um so let me show you something um that is old school and we'll talk about some of the differences so here is uh hold on let me uh comment up some things so I can talk through it um so here is a xamarin forms project okay um so here if I right click on this um if I look at the project file this one looks very different right so this is xamarin forms this is maybe this is your production reality right now because xamarin forms had a good run for six seven years and now it's been you know the evolution to Dr Maui is what it's looking at so if you are on xamarin forms you have until May of 2024 to migrate over to Dr Maui so which is not a whole lot of time now having said that come May 2024 your examin apps are not suddenly going to stop working it's going to be fine um but you're not going to get any of the security benefits and the bigger thing is your iOS in some in some ways Android as well you might be stuck on a version so if your users want to move on to iOS 16.1 on 16.8 17 and so on you may be stuck with an older version of iOS which is not what you want to do so if you have a xamarin app right now now is the time to you know start thinking about migrating off so this is what you get with xamarin forms which is very different now I have a single solution and I have one common Library which is what we used to call the.net Standard library that is shared between iOS Android Windows Mac whatever it is that you had you know Target platforms and then for iOS then for Android then for Windows you get one separate project each so this is where some of the pain points were so my packages like I would have to manage those package versions nougat packages and my dependencies for each project which was painful right and then my fonts and my images had to be catering just to iOS for them to do a build for just iOS just for Android to do it just to build for our Android so these are some of the pain points and they're trying to you know fix it all with Dr Maui but let's take a look at how things start so here is the.net standard project which is the shared Library you notice that now it's a net standard 2 which is a thing of the past there are no more net standards it's just a net library now that it can be shared and this is running on mono it has xamarin forms uh and so on so one of the first things that I will point out and you know Microsoft is pretty big on this as well in their documentation if you have a xamarin forms app today you have had a few versions of this like so Ram xamarin from something two is what I remember earliest days uh to three to four to 4.7 to 4.8 and then five so xamarin forms 5.0 the major version is the last uh major version that you're going to get updates beyond that there will be just you know security fixes so if you're running on xamarin forms that is 4.7 or 4.8 or even prior uh it will serve you best to upgrade your xamarin forms app to 5.0 so you know just get the nougat packages I think there were just a couple of small breaking changes between 4.8 to 5 but you want to be on xyron from five first before you try to even plot a move to data node so here's the dotnet standard library and here's how we used to do things in the past and actually this hasn't changed a whole lot if I look at the app xaml.cs which is how the you know app starts up um now you do have that same app object that you know adami talked about but I don't have the create build host because this was not the.net generic host we used to come straight to the main page here however this actually has not changed a whole lot if you wanted those hooks into your application life cycle like when my app starts up or when my app goes to sleep or when it you know comes back into the foreground with the resume those are still the same lifecycle hooks now you get a few more choices but here it's just a straight up main page and if I look at the main page here I'm rendering some xaml here I get some labels we'll talk about some different versions of xaml as well and I get some you know other types of UI that I want to render I wanted to show you what it looks like uh what it used to look like in xamarin forms and then what it looks like in.net Maui and then we're going to try to you know look at some migration patterns so here I have an entry so the xaml as a language used well it doesn't have a standard per se so each platform kind of did its own thing with xaml which may leads to these annoying differences between xaml dialects right so um you know xamarin forms is more for mobile first mindset so they called it entry which is the same as a text box this is what you would call it in WPF or you know Silverlight or other other you know xaml Stacks or when you Sam while you're on the subject as xaml forms there's a question in chat about using storyboards xamarin iOS using storyboards absolutely so this is a very common way we used to build the front end of your app so this is xamarin form so it's trying to do as much of the abstracted UI as you can so this piece of xaml that I'm showing you this is common so it turns around and renders the native labels and Native uh you know UI for each platform but you don't have to do this uh this is talking more about xamarin iOS in which you still have a shared c-sharp library but you can build all of the UI for your app natively in xcode uh with storyboards or with you know Swift UI all of that is welcome and you can still do all of that but just know that at that point you are building uh things that are very native to iOS or very native to you know Android if you're doing XML so yes you can still do that and at that point you are not doing the abstracted UI you're doing more of the Native UI and then tapping into a.net library for all of your shared resources so uh this again uh if you want this uh this little project this is up on my GitHub repo so you can follow along I just wanted to show you like here is an entry uh field uh and normally you get the the normal white text box but what if I wanted to customize it a little bit this is how we used to do it in xamarin forms uh so I would write a another entry field make my own class here so here's my custom entry right so the custom entry essentially extends the entry uh you know UI component which is abstracted and behind every you know entry component you know component like this there used to be a small piece of code quote called the renderer so you define an entry in your xaml or in C sharp whenever the build system sees an entry it turns around and renders the native entry native text box on iOS on Android or on Windows or on Mac right um however if you wanted to customize that you could so here I'm extending the entry and I'm just saying I want a text box with a green background because you know who doesn't want a green textbooks right so with just that one piece of code here and this is in my you know Common directory I can run this on iPhone 14 uh let's go and run this on iOS notice I did that for you know all custom entries so anywhere in my UI if I'm using a custom entry it's going to you know catch up and do that background color and I will walk through the steps of this migration in just a little bit uh so here comes xamarin forms back on iOS and here is my regular entry field which is you know white and then here's the one with the green or the light green right so here's how you do a custom customization of a certain UI component that you want to be the same all across like you're building the next Facebook you want your UI to look the same all across this is how you customize it for every platform however if you wanted that customization to be a little bit more um you know granular then you have to come down to the platform level so in my iOS project now I have another thing called the custom iOS entry and this is the code that I had turned off for a second you don't have to you know worry about this I'm just trying to show you an example uh this is not something you need to code I'm just trying to show you what the differences are and then we'll actually look at some of the migration patterns um so I am showing you a code here where I am uh creating what's called a custom renderer right so every piece of UI that is shared in the xamarin forms used to have a thing called the custom renderer or it has a thing called the render which renders native UI but you can double down and customize that renderer to do its own thing so here I'm saying I do this only on iOS go ahead and tap into where I rendered this you know text box notice how it brings in UI kit which is very much an apple thing so now we are in you know native iOS land and we are changing the controls background color to UI color again which is coming from UI kit so Apple's thing a certain RGB I don't remember exactly what that RGB is but you are doing this here at an iOS level and I have an assembly renderer here so what this line of code is trying to do is and this is actually what is a little problematic we are trying to do an assembly scanning to say is this xamarin forms app running on iOS if so forget that you know uh regular entry renderer and use this render instead so we are swapping out an assembly which takes a hit on performance right but again this works this works just fine so I'm going to go around that same code again um and you will see the difference and Sam do you have any GitHub repos for the stuff you're working on today yeah I think this one should be out but I will go check in just a second so this one same exact app right but now since I'm running this on iOS I get that purple uh text box right so if I run this same app which I actually don't have the Android head if I run that same app with the same code on Android I will still get the green text box because I do have a custom entry that is customized for uh all so let me check if I have this one on GitHub because this one was not something that you would follow along I just wanted to show you uh let's see if I do if I don't I will be happy to put this up as soon as we are done here Maybe not maybe not this example here that I just showed you um so uh I will put this up on on GitHub just so you can you know see some of this code but this was just a way of you know trying to show you that you you got some ways to customize things in xamarin forms and you know bring it over uh and do it on a poor platform basis or do it all across for uh you know everything however let's do this actually if if all of you want to follow along uh let's just do the you know happiest scenario and this is what uh you might be you know dealing with a more complex scenario like this but let's just do a brand new project okay and this you can certainly follow along so let's just do a multi-platform app here I'm going to choose the xamarin forms blank app let's just say you are in xamarin forms land and you're trying to migrate so let's uh hit continue here uh it's gonna ask for a few things maybe I don't care for Android right now so let's just say uh xamarin forms old app okay so let's hit continue and that's fine go ahead and create this project for me okay so I get uh the classic xamarin forms app as well and again hopefully you can do this you know with me um is the screen rendering catching up uh yeah I think it should be fine uh okay so I get the xamarin forms app and again I have the document standard library and I have the iOS project so let's right click here and if I look at the project source file this is still a.net standard library and since it's new it is giving me xamarin forms 5.0 or something like that right so this is in case I had a xamarin France project right now so I have my standard project and I have my iOS project and everything maybe is running fine on iOS or on with xam and forms let's go ahead and do a quick build and make sure this is working I'll do a build for the whole solution it's doing its thing okay build is good and now I can go ahead and run this so this is all still xamarin forms is what I'm showing you it is doing a code reboot and that's my iPhone 14. okay out comes the hello world xamon forms app so if you start a resignment from sap today which hopefully you're not starting a news ever from Sam uh you likely have a xamarin forms app that is structured the same way as this one here your one.net standard library and you have you know platform specific products so let's just say this is the app that you want to now migrate you have heard the deadline it's May 2024 you are now ready to migrate this over so what are some considerations there is a lot of help here already let me close down some of things I don't need um so let's look at um xamarin forms to Maui so there's a lot of guidance here already and the you know the developer Community is stepping in because this is not something you are doing by yourself a lot of people are in the same boat we are all trying to upgrade our apps to um Dr Mary so there is official documentation as well as there are lots of you know articles and videos of people uh doing this now for some it might be a very seamless process but for some it might be a little bit manual and depending on your app depending on what you need so before we go into this I'm going to show you one more thing here there is something called the dotnet Upgrade Assistant this is actually a nice little helper uh to help with your journey to migrate apps so this has been you know again almost two years in the making now so this comes in two formats one is a command line two which works the exact same way between Windows and Mac OS and then there's official Studio extension for that as well which I'll show you when I go to Windows but if you look at all of the types here let me bump it up this is the.net Upgrade Assistant and the things that you can use it for asp.net MVC or web forms all the way over to you know running them on.net framework to running them on.net three five six seven eight you name it along the way there are lots of you know complications about you know MVC razor Pages or you know web forms views and how do you move that over to maybe asp.net MVC or Blazer if you want to you know get all the way forward so that's all that Ed and Jeff will cover I think next week right yeah because your folks are talking about you know wide range of facebook.net migrations yeah we're basically migrating on asp.net um dot NET Framework 4.8 MVC application to dot net core 7 with uh Blazer on the front end very cool I'm going to get my AC running because I'm starting to sweat a little bit it's it's hot in here unusually uh hot for this time of the year okay um all right so um one more thing you'll see in this dotnet Upgrade Assistant are uh or is is the desktop help so winforms and WPF and we'll look at those things when we look at windows and desktop side of the story um winforms you can run it on Dot and framework forever or you can move it to.net 6 or 7r8 and a lot more modernization things open up for you when you do that so that's really nice same story with WPF and you know I'm old I I still Marvel at the fact that I can take a win forms application which is something maybe I just had started in 2002 or a WPF app that maybe has started in 2006 and I can still run them on.net 6 and 7.8 which is you know remarkable however you can also now use it for xamarin forms to Dot and Mary now as with any Upgrade Assistant just keep in mind this is not a magic wand that's going to do everything for you it's a starting point it's trying to help you you don't have to do this if you don't want in fact a lot of folks that I talk to like if you have a very very complex xamarin forms app what some folks are doing is you know straight away just starting a Maui app and then just moving things over by hand right so a lot of your xaml all of your c-sharp is you know automatically welcome that's fine but a lot of the xaml is also reusable you can just you know copy paste over and see what breaks but a lot of folks are also doing this as a first step so again if you tap on this it's going to tell you all the things that it can migrate and there are some things that it will actually not try to do for you because it's too complicated so it's a good starting point right so start start with that and I will show you the visual studio extension when we go to desktop but just for um the command line tools if I do a learn more this is what they're talking about how you want to get installed uh hold on where is that up uh it talks about all the things it can do uh upgrade so this is talking about the visual studio extension uh where is the command line one uh okay so upgrade with the command line tool here um and you do that so let's let's go ahead and do that so here was my um uh this app here that we just created so xavin forms old app right so let's go there so this is sitting in my projects directory here xamarin forms old app right so this is where my xamarin forms app is living so I have a solution file and I have two projects inside of it one is my.net standard library and then I have an iOS if you choose Android you'll also have Android in here so let's go ahead and run this and there are multiple ways of of doing this people have shared their experiences I'm going to show you what I feel is the you know least uh path of friction so let's go ahead and into that project here a little bit um these are my projects we're gonna go into xamarin forms uh old app right and now we are in here so if I do a list of all my files right there is my xamarin uh you know app and my solution file uh with my DOT and standard library and the iOS project so if you have not installed this before I'm going to show you the um assistant CLI uh installation dock [Music] this one here so this is the Upgrade Assistant and this is what you do so.net tool it's a global tool so.net tool install Dash G for Global I'll be resistant and that's what's going to get you the thing if you have had it before now you can also update the tool itself right so once you have it you'll you'll see that Upgrade Assistant light up so I'm going to go in here and do an upgrade Dash assistant because that's the you know way to invoke the tool and I'm already in the folder so I'm going to do an upgrade right and I can say upgrade this particular solution if you have multiple Solutions or multiple projects I'm going to show you uh some of the options that it gives you and this is exactly the same if you are doing command line on Windows or Mac the visual studio extension is a teeny bit different on some of the things it does which we'll talk about okay so I fire up the Upgrade Assistant and it's going to ask me a few questions as we go along it can be very verbose and tell you all the things it did or it can be kind of silent so now it's telling me hey I see two projects that you have one is your.net standard library and one is your IOS app which one would you like me to upgrade now this is where people differ I have seen people start with their IOS app or start with their Android app and then move that over to Dr Mary and then bring the dotnet standard Library over I like doing it the other way and I think you know some other people have also commented maybe this is the way you do it um so it's it's all about getting the most benefit for you so do whatever is right for you so I'm going to select the.net standard Library which is a shared one first now it's asking me hey do you want me to do an In-Place upgrade or do you want it to be side by side now the in place are great which we can do for like WPF and so on um but this is essentially you know living on the edge you are on the cliff front they are saying do it on the very project that I am on and you are signing up for whatever it does to your project so maybe a little risky for you I always prefer the side by side so I can keep shipping and running my xamarin forms app as it is I just want a side project to make it a Maui project whenever I am ready to ship so let's do side by side here so now it's saying hey do you have an existing project that I can just you know dump all the files in here or do you want me to create a new project so go ahead and create a new project so now we're going to say xamarin forms uh instead of old app now we're going to say xavin forms uh to Maui right that's just the name of the project now it's asking hey what's your runtime where do you want me to run this app all right and and hopefully you are seeing the same prompts if you're doing this you know with me um now or it might be a little different based on which dot Nets you have installed I have.net six seven and eight um so it's giving me some choices here let's go with Net 7 which is the present you know production ready version of.net so dot net 7. so it's saying hey I have gathered all the things that I need you want me to continue yes so go ahead and do that so it's going to start spinning its wheels and it's actually fairly fast in what it does because I gave it the.net standard project so it didn't have a lot of things to do um but it still did a few things which we'll walk through so it did like 11 steps zero fail zero skips so that's all good so what did this actually do so if I go back and look here all the way up to the top uh it's trying to transform it's got these like Transformers and it's trying to do one thing at a time first is look at the Cs proj uh you know project file and try to do some updates to it because this was the old school.net standard library now you're moving over to an SDK style project where it's you know new world and Maui and uh you know modern CS prods now this one did not have anything else you can see those implicit usings it's setting those to enable it's setting the single project to true it's setting the you know Target Frameworks to IOS and Android and Windows and Mac so it's doing all of those things now this one did not have anything else so it's easy but you can see that it's taking out these things like xamarin forms so I had a xamarin forms reference package for 5.0 something that cannot be the case in your Mario project anymore because this is.7 form so it took out that reference and it also took out xamarin Essentials and replaced it with the Maui references so which is exactly what you want right now if you are doing things like the xamarin forms Community toolkit or if you have any third-party dependencies it's going to try to analyze it and if it finds the corresponding thing especially for you know the dot net Maui toolkit it's going to replace it and then tell you that it did for some it's just going to flag it to say hey I don't know if there's a corresponding one for DOT and six or seven so I'm just going to leave it as it is so that's what this one did so the reason I start with this is the.net standard project is kind of lightweight it's not something that has a lot of platform dependencies so it's kind of easier to bring in so let's go back to visual studio here and it's now reloading the solution because now it realizes that I have added a new solution to this so I will let that fly for a second all right so now I have my old school examin iOS or xaminforms.net standard Library I have my xamarin forms iOS library and now I have this new thing called the xf2 Maui design forms to my resolution if I close down these things from the xamarin world and if I just look at the Maui project now let's right click and open the project file now you see it's different now it's Maui because now it is an SDK style project I have the use now it is true I have the target Frameworks set to.net you know 7 or 8 or 6 iOS Android Windows whatever you need a single project is set to true now this again it might be different for you but to me this is one of the biggest benefits of data in Maui being able to have that single project so I would recommend that you keep that on however you'll notice that the output type is not an app this is essentially a library that they just created just to get you started and the reason I bring that up is if you have any dependencies in your xamarin forms project which where Windows specific or iOS or Android specific it's going to flag it and anything that is variable anything that can be moved over including namespaces it will make the transformation much much easier for you so I get this you know CS branch which is Dr Mary but this is just a library so what I like doing is I actually cannot run this because this is just a library so here's what I like doing I would add another net marry project here right so let's just do a documentary blank app and I'm going to match the target framework because I chose.net 7 before so.net 7 it is now let's just say xamarin forms um uh let's just call it Maui new app so we have the old app that we are still supporting but we are spinning up a new app okay so now we have added a new app here so as compared to the xamarin from stimavi which is a library where I can still keep my you know older libraries and dependencies now I have a brand new Maui app right so I can make that my startup project and now it's the Maui app it knows already how to run on Mac and and so on so what I will do is bring some files over so I have my dependence I can actually create a reference to this uh xavin from Stu Maui project from my you know actual documentary project but notice in my Maui project I still have all of the things that I need my program.cs is wired up exactly to the one I want and I have this platform specific folder so what I would do is I would look into my iOS xamin project and anything that was specific to iOS any Splash screens any entitlements any info p list I will just copy them back over into the IRS project right so this is what I find the easiest thing to do so what I will do here is um in my app uh mainpage.xaml is the way this was called Maui new app so we're going to take that out because we already have the main page that we brought over so we'll delete that sure delete that and from that Library I already have a main page here I'm just going to drop that back in my Maui app so now the main page is here this is the old namespace so we're going to change that up to let's just say Maui new app right that was the namespace and let's look at the code behind here uh this is the wrong namespace so let's just call it the Maui new app and that's it so now I have the same main page that I had in my xarin forms project hopefully this the build picks up let's just do a build here no it's trying to restore packages because now it's a Maui app so it has to go get its dependencies again I was going to say there's about four questions right now they're pretty long ones so I think it'd be best if you took a quick look Sam and see if you've already answered some of them and um if you might want to go into detail on others yeah absolutely let me do this build and then we'll look at what the questions are so just to recap what I am suggesting is if you have a xamarin forms app uh it's it's completely up to you uh people have had you know varied experiences based on what your dependencies are and and what your app complexity is all of your c-sharp should be easy to bring over so if you have a xamarin forms app like this I would recommend that you start with the shared project the dotnet standard Library bring that over uh use the Upgrade Assistant to bring that over and then the iOS or the Android ones I mean those are you know not something you need a full-on Maui app because they just go into the folders inside the Maui app so it's just a little bit easier okay so it did build and this is where you are going to likely have some build error so you know take your time fix one error at a time and go ahead and do that so now let's run this since this did build world so I have the same xaml from my xamarin forms app but now I'm running this on Mac Catalyst and now you see that welcome to Diamond forms although it's nums I'm informs now it's all Maui but I have some xaml that I can now share between you know iOS Android and Windows uh and Mac so that's how I would start my migration Journey if you're on this path take a look around people have had you know vastly different experiences for some like I said it's not too bad of a deal for some it's a little bit more complicated it all comes down to your dependencies and ideally hold on I'm getting a call that I don't want to take ideally you are trying to utilize this uh you know single project because this is the biggest benefit that you get you do not have to do Platform specific fonts or images it really is truly shared across all platforms so that's my just two cents on xamin forms to matter now let's look at the chat room here will there be a recording yes yes Tony absolutely we will it's going to be a little long here because it's like four hours but we will put this up on YouTube as quickly as we can um more people asking about recordings yes we'll do that um oh uh Scott Hoffman is asking uh a very tricky question and so this is what I tell Ed right you know the Euro you have the web word which is just a browser in an evergreen browser you can ship all your apps uh the native world is very very complicated especially if you're going to the App Stores so Scott Hoffman Hoffman is asking about uh app certificates okay um this again is different based on platforms if you're on iOS and if you have a xamarin forms app today that is already in the store yes you can utilize the same certificate you will have that certificate file in your xamarin forms project if you take the iOS project and you upgrade that it should leave the certificate as is if you don't just bring it over you know by default because your app name your app description and your app metadata is not changing you're just you know switching up the framework from Simon from to Maui so you can use the same certificate I think Android Maybe different but you know I I don't dabble as much into Android as I do with iOS so that's just my intuitions two cents okay so Caesar Ferrero is asking how efficient is it to use the new approach in Maui in terms of devices like printers native applications in Android and iOS um it's very difficult to work with printers and other external devices when we talked yeah yeah okay so the question that Caesar is asking is how Native can I get uh with Maui it's it's a good story for the most part um so let me uh let me close down some of this so let's take you to [Music] um let's take you to the.net Maui uh docs so let's go read the docs here and if I go into uh platforms and let's look at platform integration right so right here this is what used to be called um xamarin Essentials where you had a collection of uh you know 40 or so apis that were abstracted you have the same thing in document Maui it's not called it used to be called Dot and Maui Essentials but then it became so essential that it's not there anymore it's just baked in so you don't have to think about it it's just there so uh things like launchers and app informations and communication things like contacts emails device features like batteries device displays flashlight geolocation geocoding media libraries so camera media picker text to speech all types of sharing functionality storage so file Pickers file system access all of that everything is done for you and it's all baked in inside of Dot and Mary so if I look at let's just say device features here I want to tap into the battery and and see how that's working out and it's cross-platform I can just write C sharp I have to do some permissions sometimes especially for geolocation I have to do permissions for Android permissions friend for iOS but I can pretty much write straight up C sharp and be able to tap into these platform apis which is nice so device information there there's a lot of things like flashlight geocoding geolocation haptic feedback all of those things to answer Caesar's question though this is nice this gets you probably 90 percent of the way out there however you will always like the native stacks of IOS and Android those are fast in terms of their API you know canvas size you will invariably always have things that you do not have um you know uh an essential API form like a Maui essential API for so it's just it's maybe something that's very unique to iOS that you just don't have in any other platforms or maybe it's just something that nobody or Microsoft has not written up yet and the printer is probably an example like that again you it's just a hard thing to do um and especially you know for iOS or Android it's more of a desktop friendly thing for Windows or Mac so for that you're looking at What's called the dotnet Maui plugins uh again uh this is um uh this one's pointing you to the community toolkit because they have uh some plugins that you can actually you know help write my good friend Gerald versus Luis um he has a whole thing hold on for a second I'm going to go to YouTube for a second and I'm going to pull up um Gerald versus Luis okay he's out of Netherlands and he works with the.net Maui team quite a bit and uh he makes a lot of really good videos and he had done something about plugins here that I want to show you build your own plugin here so there's a template for it and you have to go into native land and you know write some iOS code surf code or Java code for Android for printers you might have something very window specific but you can make it work just for Windows just for Mac or you can actually make it a plug-in make it cross-platform and make it work for everybody so just a quick shout out to Gerald real quick say I'm just going to do a quick housekeeping question a lot of folks either came in later or have to leave early asking about recordings so the webinar will be made available as a recording takes about a week to get everything processed and posted so look for it on teller.com webinars or our YouTube channel in about a week yeah um I see some questions about desktop here uh so hold on to for uh to those for just a minute while we switch to desktop um but I'm trying to uh do the mobile ones first um uh let's see uh a lot of questions here um did you uh see any that you uh wanted to answer uh uh oh Frank uh Russell was asking what's the vs code extension that we use it's it's called the.net Maui so vs code extension for net Maui that's the one you need for vs code um um uh storyboards we we kind of talked about that um oh okay so Doug Jones was asking you said we could Target a specific framework when building the code is this done through IDE or you need to edit the Cs project okay so that's a double-ended one let's let's go back in here into visual studio for a second so let's just say I have my Maui app right so right in here I have my um choice of where I want to run this right so I I can do Mac I can do iPhone I can do iPad or you know any of the iOS devices or I can do pixel when I do a build like that it is still building for all the platforms so which is what I was saying you should probably turn it off if you don't need so even though I say give me a Mac build it will by default do a build for every platform so if you don't want that so go into your CS project here uh project file so what I would do is when I'm doing uh just my Dev Loops here I'm just going to copy that line right and I'm going to comment that out I will come down here and I will take out anything that I do not want to build right so I'll just do this so in this case I still have those Target Frameworks that I will turn on later on when I want to test for Android when I want to test for iOS but in my Dev Loop maybe I'm just doing Windows first so just doing Mac first so just run with whichever one that you're doing so even though you you have these choices here in fact now it takes away all of your choices because it doesn't see the target framework so you saw that like with all the target Frameworks my choice of where I deploy all of them light up but I can just choose one so even though you're just doing a build for Mac by default if it has all the target Frameworks then it will try to do a build for all of it which is just a little bit more time consuming so that's my one hint that you know turn it off when you don't need those platforms um okay did you talk about certificates at all Sam yeah yeah I did so those should be reusable unless you are changing up the app name or any of its metadata because then that's a whole other app in apple size um uh Dennis is asking let's say you're developing from a Windows Visual Studio environment which is you know the reality for most of you do you gentlemen you have Hardware gpus installed to help performance during the dev Loop um uh yes and some of it uh should be stuff that's built in I can speak about the max side and I'll let Ed speak about the Windows site so if you are doing any Android emulators the modern Android emulators will all use hypervisors and that's just a VM with some additional GPU help so they can spin it up a little faster iOS simulator does the same thing uh for uh with with xcode now when you are on Windows and you have and you're targeting iOS um then you are dependent on that other Mac and that will still do some uh you know virtualization but um Ed what's your experience with like Android on Windows so in in the hyper-v settings I believe this is in the Android SDK settings as well there's a little check box that I believe is on by default these days that says use uh GPU acceleration so basically it will emulate um the Android Hardware uh Graphics processing so it's not bogging down your CPU so the the emulators they work uh pretty Snappy on uh on Windows once you boot them up the first time it's always that first cold boot that gets you but once they're up and running they're nice and fast yeah and then things have come along we have used like genymotion um you know so choose your Android simulator that's working best for you once you get up that from that cold boot it's it's not so bad nowadays um okay uh maybe let's do one more question then we can switch to some desktop uh things here uh okay so John is asking we are trying to migrate a salmon forms app that was primarily on Android like an admin type app like a kiosk Style app okay which we relied a lot on platform specific interactions are there any resources that are specific to this type of scenario which will help us migrate this style of application okay so what John has is uh I'm guessing still a xamarin forms app but it's you know it's heavily focused on Android and he has a lot of you know Android specific uh platform things so what I would do um John and again your experiences is going to be different so you will have an Android app here and it's the Android app that I can try moving it first to Maui so it's immediately going to take out all of your xamarin forms references and it's going to swap out all of the xamarin essential namespaces with the corresponding things in Maui and again you don't need those namespaces some of it is just built in so at this point if we look at what um xamarin Essentials was let's just look at this up so hopefully you're using some of the xamarin essentials um to reach out for those Android libraries so if you look at what xamarin Essentials did probably 35 or so apis so accelerometer app actions barometer battery clipboard all the way down to device vibrations and text to speech all of those all of this that you had in xamarin forms they are all available to you in.net Maori right that's just you know done and in fact Donald Murray does a few more apis that were not there in xamon forms so if you're using xamarin Essentials moving them over to Maui uh should not be a problem if you are however using Android libraries where you are doing some very specific Android plugins which are you know not done for any other platform you can bring all of that over right so um that's just you know native land so go into your Maui app and in your Android project instead of just having permissions here drop your device specific libraries that you do stuff with Android and then on on your Dot and Maui site you can always do specific things so I can you know go in here I can say I always have things like I can do a hash if um Android or I can say if iOS or I always have those on platform uh you know um idioms to say on this platform do go use this library on and so on so I'll show you more examples of this uh but you know you can always do Platform specific things in documentary so if you have an Android specific library that you just want to bring along go ahead and drop that into Android specific uh you know folder Sam do you have any quick comparisons between uh react native and Maui oh boy oh that's opening up a can of forms um sort of like a tldr version of like how do I choose yeah okay so let me take you into the react native word for a second uh now this is a completely different conversation but just to kind of you know talk about this so react native is very suitable if you are doing any react development for web apps right so JavaScript and Spy Apps is what you're writing now you have a need and a desire to bring it over to you know native mobile apps so react native is your choice and it runs on desktop Ranson uh you know iOS or Android which is great now react native does things in a very react native ways so it is jsx it's you know writing HTML within your JavaScript and they have a very similar concept of what we do for renders or handlers in Dublin Mary so they will turn around and render native UI everything is a widget and they render 9 UI for iOS or Android now for you to bootstrap this app they use a separate you know bundling mechanism it's called Metro and your Dev Loop is very very quick because you're just touching a component which we also have in the in dot mli I can do hot preload on iOS Android Windows and Mac and so in terms of performance I don't think there's a difference honestly it all comes down to are you happy with the react code base do you want to keep on doing react and HTML and jsx and CSS or are you wanting to do.net so that that's your split if you already have a react application you don't need to do react native because like react we can also bring in react inside of Dot and Maui which I'll which I'll show you when we talk about the website of things but you know it's performance wise it's it's not doing much I think react native and Dot in Mary are actually very similar performance wise because they're doing very very similar things flutter is a different story because flutter is more about painting pixels so I think flutter is a little slower sometimes but again the app end users are not going to notice this the dev Loop of you you know making a change and seeing it work that's about the same in flutter and react and as well as in doctor and marriage so you know choose your poison okay A little quick note on the the react native stuff too I was talking to um a react developer just the other day and asked them a little bit about react native and the react native and react aren't as similar as you might expect either so uh your like UI code is gonna completely need to be Rewritten so from some some react developers perspective like react native is not truly like react it's similar but so different like it's it's a total different mindset similar ideas because I mean they they cannot just take your react code for web apps and just turn around and render native UI they have to have those widgets which are written in a certain way I mean they're similar but you I mean you cannot just expect to take your web UI and just make it a react native app you know except to rewrite that UI to make it a true native app however you can bring react into desktop uh and into Mobile if you want uh with with some you know modern web views which we'll talk about um but you know that's just my two sense foreign I know there are lots of questions and we can keep diving into more let me um move a little forward and show you some more things with desktop and then uh you know we can actually try some uh more things as we go along uh that maybe you can follow along um so let's talk more about the desktop side here for a second I'm going to close down some things that I don't need um yeah let's uh close all of this down so we talked about.net now we talked about xamarin forms but um what about desktop and how does you know Blazer uh work on on desktop like that so let's go ahead and um bring in Blazer here a little bit I mean it's territory here but uh you know Blazer is obviously very popular if you are a.net web developer because this is you know Morgan and it's a beautiful uh you know web framework for doing C sharp front and back so you can do server side uh with a lot more server side rendering with a little signalr Bridge maintaining a shadow Dom on the client side or you can go completely client-side with webassembly so this obviously is exciting for net devs because now you can do C sharp and Dot net front and back so uh this is what four and a half years in the making yeah Blazer there was in a production ready so it's mature it's grown a lot and this is for all things web apps right this is how you build modern web apps with net however you can bring some of this goodness over um to desktop apps as well so if I go look at document Mario one more time and this is maybe perhaps where you know we can all step in and improve the docs a little bit I don't think this is they make as big of a deal as it it should be probably because this is Dr Maui if I go read the docs and you kind of need to know where to look to find this uh let's go into user interface here and I'm going to look at uh oh where is it controls um views because everything in in dot in Maryland is a view presenting data plays a webview so keep in mind there are a couple of things here first up there is a web View xamarin forms also had a web view this is nothing different this is just saying I just I'm able to render a modern in a web browser this is packaged in and I will be able to render local HTML or local CSS uh you know in in that web view or if you want to point it to a remote URL it can do that as well so that webview really hasn't changed between xamarin forms and Mary so if you had a web application that you wanted to embed inside xamarin forms this is what you likely used and that's fine that's not changed however there is now a newer thing called the Blazer webview now this one is still a webview but it's really smart in in how it does a couple of things uh and and they talk about this a little bit but I think we can do a better job of explaining the benefits of this a little bit so this is a web view but it's a smart webview so it's smart because it knows how to abstract itself from the platform so when you have this in a DOT memory app it tries to realize what platform are you running on so if you run this on Android you get a webview that is chromium if you run this on Windows you get a webview that is Windows which is Edge and webview 2. if you run this on iOS you get the webkit one if you run this on Mac you get What's called the WK webview so it's giving you a different web view for each platform all of this is seamless to the developer you don't need to worry about it and also this one is smart enough to I mean it is called the Blazer webview it doesn't actually have much to do with laser if you can do completely your own thing with reactor angular inside of this but it is smart enough to load up the Blazer component model and the Blazer routing you know engine and the layouts so it's getting ready to render a Blazer app inside of a Mario app so let me show you that in just a second here so if I did um let's go back here if I did a file new project you can do this you know with us here if I do a file new project and uh in my multi-platform app instead of choosing.net Maui now we choose.net Blazer hybrid this is what they call Laser hybrid which is essentially Blazer brought inside of data Maui with that Laser Web view so that's the one that I'm using so hello world project nothing is different about it so however some things are which we'll talk about so first thing is you get a net Maui project if I look at the Mario program.cs I still have the generic build host but now I have this extra line of code that says Builder dot Services here's my dependency bring in that Maui Blazer web view that's that one line of code that I need to bring in that webview I still have you know my app xaml and this one here essentially points to you know your main page in this case so you don't have to use the shell you can bring in the Shell if you wanted to and then we go to main page Dot saddle so for folks like Ed or folks anybody who hates xaml this is all the xaml you ever have to see because all it's doing here is said giving you a container this one here is a Content page everything in xaml is you know a Content page or a tapped page or a master detail page so it's just giving you a placeholder and then it's giving you a Blazer web view so everything in this UI is all a laser webview so there is no native UI components whatsoever we are letting the Blazer webview Drive the whole thing and how it's driving it is because I have a www.group folder here just like my web apps inside of it I have my CSS I have my static resources I have my favicons and I have my index HTML this index HTML is essentially just a placeholder it brings in a couple of CSS libraries it brings in some JavaScript if you want this JavaScript which we'll talk about a little bit more is a very smart Visa JavaScript again Ed doesn't like to write JavaScript and you don't have to but this is giving you the JS interop bridge if you want wanted to but beyond that this div tag is the whole app being rendered this is your entire laser application being rendered inside of the div tag you never have to see this anymore once you have this set up and then you know by default it points to the first component which is main so we started with main.razer this is essentially just a router and it's just saying hey go to main layout that's where you're going to get the layout of the page and then off you go the main layout sits here in the shared repository and that has a nav menu it has a survey prompt so everything is a component and then you have your Pages directory which is your index.razer these are your Blazer views that you are just dropping inside of your Dot and Maui app and making it work right so let's go ahead and run this first actually on on Android because I want to show you a few things you'll notice that I have an if debug statement here these are the compiler checks right so I can say if I'm running this in debug mode go ahead and give me some more things give me some logging and give me this thing called the developer tools uh so this is essentially what every web developer will use your developer Tools in Chrome or Edge or Safari or whatever it is that you want so let's go and run this on um on Android let's let's just start this with the debug mode so hopefully you have done a file new project and uh you have arrived at a there's a hybrid thing you can you know pause and just let me uh show you around here a little bit or you can you know play with this yourself so it's called starting my Android emulator for some of you folks who are asking how is it it's not bad this is a pixel 5. it you know comes up fairly quickly now this is running in debug mode so it has to load up all the you know all the symbols and all the things for you to debug so it takes a little bit longer if you're not doing it in debug mode it's it's a little quicker as well so it's still building here so this is the Blazer hybrid project nothing new we have added just just file new uh project and we're trying to run this on Android and Ed I'm actually going to use a small piece of code that you sent my way the other day exactly it was smart the way it was done I'll show you what that means for iOS or Mac um and while you're talking about this stuff Sam and while we wait for this to build uh it was a good question here about can I use features from the uh platform apis the camera geolocation Etc from from Maui so yeah with the Blazer hybrid app you you get access to all from Lifeline apis right yeah yeah absolutely I actually do have a project that's also in my GitHub repo I can show you that so you can do some very very native things with laser which is quite a fun thing to pull off from web Technologies so yeah give me a minute or not a minute but I mean 10 15 minutes and we'll switch to that native um you know functionality with laser so it's deploying to a device this is in debug mode so it's you know taking a little bit of time from a cold start but you know it's an Android emulator with pixel 5. okay out comes my.net Murray project and this will be like a Blazer hello world type thing it automatically recognizes that you are on a smaller form factor like iOS or Android gives you a hamburger menu here you have the counter you have everything that works so this is Maui app running on Android but because we are in debug mode just to kind of prove the point what that webview does is I can go to Chrome and I can do Chrome uh I always forget what it's called oh I actually have it here so Chrome inspect devices so I'm going to bring up the URL here so Chrome you know whack double whack inspect slash devices this is Chrome's way of letting you look through um you know developer tools on any running app and since I already have it running here you'll notice that it knows uh right up here that's my Maui Blazer hello right so it already knows there is a chromium web view inside of my app so it knows that I can be able to debug this because this is Android that's a little bit more of the wild west and open so I can hit inspect here and I get this new window with the devils that is so nice this is you know think about this for a second this is a native app and you're able to look through all of the code here uh and I can just you know point and click and I can see where I'm pointing um so let's and also the nice thing here is I can tap on here and it's a full-on app so I can go back to home and you will see that the emulator goes back to home as well so it's kind of replicating exactly what the emulator will do which is you know really nice so here's my blazer UI here um so let's go into the div here here's my page here's my sidebar here's my main um here's my article of the diff tags here's my hello world and I can change this to whatever I want a low end right and I hit enter and it shows up right up here right so this is devtools you can mark all you want with your HTML CSS and JavaScript you can see the uh the simulator also caught up to hello ad right and you can see your CSS you can see your JavaScript here manipulate this all you want this is just Dev tools for your native Android apps or iOS apps so this is nice really nice and I can do this all day long in Chrome uh however uh let's let's do this let's change this up a little bit here is that me or you uh maybe it's me uh so let's do uh the same app and let's move this up to iOS our our Mac in this case I'm going to change this up to uh let's just go to a Mac here now uh this is uh one line of code that Ed sent me you you have multiple ways of doing this but um yeah my emulator crashed that's fine because I actually made it um close so here is my main page.xaml and again you have multiple ways of doing this here is a Mac Catalyst way and this is an apple thing so for anytime you have the WK webview which is exactly what we are rendering you see that WK webview that is the webview that's rendered for when your dot MLB app is running on a Mac Catalyst if you are doing this on iOS then you're gonna you're gonna get the webkit you're going to get the webview too if you're on windows so this is an apple 16 iOS 16.4 onwards restriction for any Safari type web views that are embedded essentially you need to have you know an info p list permissions thing to make that uh Safari webview inspectable so it's just a setting that says inspectable needs to be true so with just that and I'm doing this just for Mac Catalyst here let's go ahead and run this on um on a Mac Catalyst build now so you can do this here or you can also do an info p list setting on iOS and it'll do the same thing for you so here's the same app now it's Blazer Bowie hybrid app running on desktop so it has more real estate it doesn't need to do the hamburger menu it's smart enough responsive enough to do that I still have my counter I have my fetch data everything works the way it is but this is a Mac application now so now I can go into let's bring up Safari and uh if you uh enable uh you know in your debug in your in your Safari options uh if you enable the in the develop menu to show up here I have my iPad you see that and I also have this you know weird number essentially it's just pointing to a local application here and there is my Maui Blazer hello award zero zero zero zero right so that is the same web view that is driving um uh my apps so let's go back in here in my app tactive um not the sidebar I'll go into the main that article uh there's hello world again and let's change that back up to Ed because it's famous hit that and now we come back to our Mac Catalyst app now it says hello Ed right so you see what I'm doing here I'm just changing up HTML CSS and JavaScript on the Fly because I have a modern web view everything here is a web view there is nothing native about this but this is a good strategy if you have any Blazer developers in-house or somebody's already making a Blazer application and you can bring that over to you know native land to desktop very easily now this is nothing new though um I will say this because it gets a bad rap sometimes um so let me also talk about this one here electron Js this is nothing new the desire to have web applications be welcome on desktop we have been doing this for like 10 plus years now electron is Battle tested electron is what runs your you know your slack your figma uh up until a while even like your teams was an electron app so this clearly works uh it is just you need to know what they're doing because there are two things that are different so electron will ship with node.js because that's the bootstrapping that's what runs your app and it ships with chromium uh engine like the browser engine the browser component so you have like a consistent canvas to render your HTML CSS on so by default the hello world electron app is going to be heavier or a little bit bigger in app size than a Dr Mario because Maui takes a completely different approach it trusts the user to have a modern Greenfield browser and that's the browser that's borrowing we are getting the webview from so a little different but you know electron if you just want to see Blazer or reactor angular work on desktop electron is still a good option but I think Dr Maui Does It Better with the web View and that there are some real benefits to that so that's just you know one quick look at Laser running inside so the way it's doing it is like I said main page you only have a Blazer web view here's my main razor which is just the router and then I get down to my index Pages which is all of my laser views and everything works the way it is one thing to note here is if you look at the Cs Branch there's one key difference here as compared to a dotnet Maui app which the project type is an SDK microsoft.net SDK here you have a DOT Razer that one word in there tells the compiler that hey I need to be ready to render Razer components I might not but I might come back so just be ready to render Razer and that one line of code is actually important if you want to bring in some laser dependencies which we'll talk about to kind of help out your your life so how can we help a little bit so if you look at um let's close down some of this Ed and me are obviously biased here because we work for Progress software and we make things that make you a little bit more productive this is all of generic UI for all of your dotnet development so for you know mobile development you have been able to do xamarin forms and now we have Taylor ufo.net Maui so these are all absolutely native UI for iOS Android Windows and Mac and for the first time you have uh you know uh UI from us that works seamlessly between between you know mobile and desktop it's not a light statement to make because think about a data grid think about a chart and we want that experience to be you know unique to mobile and desktop so touch versus keyboard and mouse so we are very careful in how we rendered this so all of this is native however if you look at the website of the story you can do all the things asp.net or JavaScript but let's look at Blazer here this is Ed's world and this is Blazer UI for all of your modern web applications be it server side be it webassembly we are up to what like 120 plus UI components here for Blazer Ed if not more yes so this is Rich and it is like four plus years of engineering so all of this UI is for web apps but uh you know we are here to tell you that all of this UI also works on dotn memory which is you know phenomenal now you can bring in all of your web goodness your custom built laser components or teleric components and just render them just fine on desktop as well as on mobile electron does not work on mobile so Mario is your way to bring web to Mobile in a very nice way okay um so I will show you much more of this but let's um Switch to Windows for just a second because I feel like we're just spending all our time on a Mac which is not fair um all right add any questions while uh my lights flicker because I'm about to bring up my VM here uh there's been a couple questions about uh differences between Blazer hybrid and Maui um like are there any performance trade-offs between the two in your opinion Sam um is there like any other concerns Pros cons of using the the two choosing between them um so to me it comes down to um where you want to be do you want to be in.net c-sharp and xaml award to write native apps with Dr Mary then you know straight up Dot and Maui is your solution if you are leaning towards reusing some uh web code and Blazer is something you're comfortable with then place a hybrid is your story in terms of performance they're both the same right so laser hybrid will run exactly on top of the same bootstrapped.net Maui app you have access to the same platform apis which will I remember we'll we'll need to get back to that but in terms of the UI that's where it's different so dot and Maui is straight up native while Blazer hybrid is straight up web and you're rendering things inside of a web view this is a modern web view so it will render things like a snap and Blazer is actually not running anywhere else it's not on a server it's not on webassembly it's literally running on the same metal as you know Maui apps are running so performance is exact be the same just keep in mind though it's you know HTML CSS versus dot net xaml and the webview even though if it's a webview it's not sandboxed in like other web views like a pwa or electron might be this is truly uh you know a native app so you can you know tap into all of the platform things so performance wise there is no difference now having said that we are developers we can always shoot ourselves in the foot and get into trouble so that webview that I showed you there is no stopping you from putting a dozen web views on a single View if you do that just understand that each one of them is a chrome or a you know Edge or something like a safari process that has to kick in to render that webview so if you do a dozen web views on a single page yeah your performance is going to take a hit but if you don't if you just do one then you're fine your entire web app is going to be rendered and it's going to be running locally so you're fine okay uh I am on Windows my beautiful Windows box I I do actually have a Windows Tower that's under my desk sometimes I remote into it but when I'm on the road the VM is hard to beat um so let's look at um Microsoft Visual Studio and things are too big for me maybe I can minimize a little bit uh uh so let's uh start with uh some things here because we have not looked at the windows story at all let's start with Dr Mary first and see where things were so um let's um oh I already was doing this code so we can actually you know jump through this a little bit here so this is a DOT and Mario project so I can do file new and I can do project if you want to follow along then if you have those workloads you're going to see the.net Maui or the dotnet Maui Blazer hybrid these are the two templates that you light up you do Dot and Maui and you hit next and close this is the app that you get this is a Hello World documentary project exactly the same app that we saw in visual studio for Mac I have my platform these are all folders Android iOS Mac Catalyst Tyson and windows I have made shared resources everything is exactly the same I have Maui program.cs which gives me the bootstrapping I'm going to bump up my fonts here a little bit more so you can all read so exactly the same code now here's the nice thing here let me go into mainpage.xaml here this is the xaml that gives me the UI part of it this is a straight up.net Maui app right so um let's go ahead and hit this on in a debug mode and I'm going to run this locally on my Windows machine so again if you're following along just file new project dot MLG app that's what I'm showing you on Windows here so now you can see that on the background it did load some diagnostic tools and other things that it needs but this is the same document we have that we saw on iOS Mac or Android now it's running on Windows I do get a few extra things since I'm on Windows I'm on you know the best version of the studio so I get some additional things like I can do a live visual tree I can change up some UI I can see how that UI affects myself and I can have some extra things like I can choose elements and where is the one that I uh like showing off okay so binding failures this is a fun little thing because in xaml we're often doing a binding so I have you know data Grid or I have a list View and I'm binding it to a collection of items or an objects if I'm binding something wrong like if I have a label and I'm binding it to a property that just doesn't exist it's going to bark at me and it's going to say hey I don't have a corresponding property to bind so you get some extra features but otherwise this is the same so now you notice that at the very bottom here it says xaml hot reload is connected so it knows that I'm running this app and everything is hot it's hot reload hot restart everything is hot so it's popular here today so we're going to change this hello world to hello end and I don't even need to save my app here it's already picked up right so you see how quick this is so what when I'm developing at home I put that the simulator or the app on a site monitor I use an iPad and that's where it stays I don't have to touch it and I can just you know keep hot reloading this as far as I can and it's not just the xaml part of it here so when I click on this button here it's going to fire off this main page that's mlcs here let me close a few things so we can see more of the code uh too many things are open go away go away go away go away go away there we go uh so now you can see that when I click on that counter I have a counter um you know integer here that I'm incrementing by 10. uh so I hit this once it goes like click 10 times this again 20 times so I've clearly changed this code uh before so that's because it's saying doing a count of you know count plus 10. let's just change it back to what the usual thing is which is Count plus plus which is incrementing by one so I save this now this is C Sharp uh you know code that I'm changing it's a small component of my page here so here in Visual Studio for Windows you do not have this in real vs for Mac uh on vs code you can do similar things with you know file Watchers but in vs for Windows I can just hit this fire icon this is you know C Sharp hot reload is saying hey I applied those code changes and now my app is still running now when I hit this it's going to increment by one like you see 30 132 so it's you know pretty good in your Dev Loop between editing xaml and editing C sharp I will say this though um you know know where things are going to fall off right so as long as you're on the same page you can edit all the xaml that you want uh but if you change up some of the core pieces like if I look at Maui program.cs here um if I have additional dependencies that I'm listing out here if I'm swapping my you know ioc container if I'm changing up which views I'm loading up then the hot wheeler is just going to fall apart right and you kind of expect that so if you're on the same page if you're just changing up some common C sharp you can do this all day long and it's you know it's actually fairly good trying to keep up with it so that's just a Hello World experience for net Maui I'm going to change this back to world because it has had enough flows for the day I think uh let's um let's look at a different uh side of the story here um first up is let's create a new app here and again if you folks want to follow along I just want to show you what this looks like so let's go to a new project here and I'm going to choose if I do a search one WPF here now we're talking desktop winforms in WPF if I do a search on WPF and based on what you have installed you're going to see a whole bunch of things one is a WPF app you notice the c-sharp and windows or you can do a WPF app doing Visual Basic that's still an option you know for all three of you uh no I'm just joking it's it's fine uh but uh you can do a WPF library and so on or you come down all the way down here and now it says it's a WPF app but it says.net framework right so here's the difference this uh template here WPF app gives you a WPF app that's running on.net framework 4.8 or whatever it is but if you choose this.net this WPF app this is going to give you a modern WPF app running on.net6 or 7 or 8 right so that's the difference let's start with old school WPF right so you've had this WPF app forever it's running on.net framework so uh let's go ahead and create this this is my WPF old app right and that's fine C demos now notice how it's saying hey where do you want me to run this uh looks like I have a few of these dotnet Frameworks installs 4.7 4.8 let's just go with the latest one 4.8.1 and create so what I'm doing here is creating uh you know a classic old school WPF app that's running on.net framework and this may be the reality for a lot of you um if you are you know maintaining a quote-unquote legacy app I don't like the word legacy because it sounds like it's old but it's not it's running your business so uh you know it's very important so I get uh this WPF app all right and everything about this is a.net framework app I get my windows ammo and my windowsaml.cs this is exactly how a WPF app will start out if I make uh if I right click here if I look at the project properties here you will see that it's running on.net framework 4.8 it's a Windows application I got my build pipelines I got Trace I got everything uh debug everything is set up exactly what a dotnet WPF app will be so let's go ahead and run this uh really quickly just to make sure it builds and Samwell you're on the topic at WPF we've got a question is there a seamless uh conversion for telwork WPF controls to Maui um they've extended some of their WPF controls and wondering how easy it would be to convert them yeah that's a great question uh and I think a lot of folks are in that same boat I'm going to pull up a couple of links and we can talk through this but give me a second to get back to you uh on on on this I'm going to pull up a few links here uh so we can talk through this together but just you know let's come back to the question in just a second uh I will talk about what it is like for telleric UI if you're using WPF versus marians and so on um okay so I get this empty pH because there's literally nothing in it but this is a WPF app running on.net framework now here's the nice thing about uh you know WPF I can right click here let me first show you the extensions if I go into my managing my extensions here um I have a visual studio marketplace with all of my extensions and I can search for this um uh you can see I've done this before.net Upgrade Assistant uh oh uh there it is right so this is an extension this is going to be exactly a wrapper over the.net Upgrade Assistant that we saw over a command line exactly the same tool with some differences um so this is just a extension that makes it nicer it's it's more GUI friendly it's it's all command line and it works nicely so I can come in into my WPF app here and I can right click uh notice I can do a few additional things here so let's just do um uh what is this thing called the.net analyzer uh this is one um hold on so WPF .net upgrade assistant and this talks about uh the dot net operate side of things here um okay WPF here how to upgrade wpm desktop app to.net 7 is what they talk about here which is exactly what we are about to do so um so what I'm trying to do is before you plan a migration from WPF or winforms you should do a analyze right so the dotnet nougat analyzers and remind me what what it's exactly called but it's it can actually look through and tell you like these are some nougat packages that do not have a corresponding thing so it all comes down to your dependencies right but if I um let's just say I'm not using any window specific things or nougat packages that can move forward I can do an upgrade right and out comes this little UI which is pretty much the same as the command line thing it's saying hey what you want me to do upgrade projects to newer.net because that's what this is about now it's asking me do you want to do an in place or in a side by side so again I prefer the side by side because it doesn't touch your you know excuse me default WPA for Xavier informs project just gives you a different project and you can keep working on the older one but this one's just a hello world WPF app so I don't care I'll do it in place you know live on the bleeding edge a little bit now I get the same prompt where do you want me to run this on now this is a WPF this is not a Maui app right so this is saying hey right now I run on.net framework right 4.8.1 and if you then let's just do a right click on this and um how do I get to the project file in here the Cs proj because I can open up the properties which is the same thing but there's a CS project that I can open up that has the old school CS brought we'll see how this this changes once we do the upgrade so let's just dot Net 7 here standards support and let's just hit next and now it's going to tell you hey what do you want me to upgrade so this is where if you're doing this from xamarin from stimavi if you have very Android specific things you can just you know uncheck them because you don't need those migrated out but everything else here it's fine and that's it I'm just gonna go upgrade and now it's gonna sit there and spin for a second it's fairly quick it's restoring and it's done completed 1860 successfully six skipped okay so what you see here is the result of what it did let me minimize this here a little bit and you can actually see the build output for more things a green solid check mark means it was successfully able to go in and do that thing so CS Branch successfully applied all the Transformations blah blah blah and I did it an empty green one means I kind of did it but there are things that you should look at yellow will mean that you should definitely look at it like this this empty field kind of app config no applicable transformation so there was really nothing to migrate it's just gonna give you that file as it is and then sometimes for Maui or Android you might get like a yellow or a red to say hey I don't know how to migrate this whatsoever you can you should manually look into this but again for a straight up WPF app um this is pretty easy and this is where you know Ed and me will tell you it comes down to your dependencies if you have a nougat package that you're depending on that only runs on.net framework does not have a corresponding thing on let's say net six or seven or eight you will not be able to move forward you know clearly because you have a dependence that you do not have a corresponding thing and maybe this is a time where you question whether you really need that dependency because it's preventing you from you know moving your code base forward right so maybe it's a good time to refactor and question whether you how much of that dependency do you want to need do you want to use so I'm going to close this here and now if I right click on this where is my uh oh edit project file right there I couldn't see that before so now you have a WPF app but notice the difference now it has changed up the project style to be an SDK style project now it says hey your target framework is dotnet 7 Windows this is not a Maui project this is a WPF project output type is a win XC and I have some package references right here so right out of the gate it just transformed the runtime from.net framework to modern.net this thing.net7 I can run this on.net you know eight or dot net six and if I go ahead and build this and run this it's not going to look any different because it's an empty app but I just wanted to show you that.net Upgrade Assistant that extension is there for you to do these In-Place updates uh fairly quickly um okay now how should you go about doing this because there was a question about uh teleric UI so let's let's try to answer that um so uh if I look at um blogs.tillary.com okay so this is where a lot of us you know Ed and me uh will write a blog post uh on things that we care about uh this is where we put a lot of love and care about you know topics that matter to you so my good friend Rossi here has written a couple of Articles if you do a search on wpf2.net replace a hybrid or wpf2.10 Maui on our blogs you'll likely end up on these um uh on these articles so in here she has uh really used a graphic that I really like so it's kind of a tree so let's just say you have a WPF app and you're trying to decide which way do you want to go uh do you want to keep on running WPF because what it what I just did was I ran WPF from.netframework.net7 I can stay on WPF no problems with that WPF runs with you know mouse and keyboard on desktop it runs with touch on like a kiosk type surface so I can do all things modern with WPF or should I go to Maui because that's a big jump because compared to xamarin from stimavi that's easy because you're just changing up a few namespaces some libraries some some xaml some of the way the app bootstraps WPF to marry that's a big jump because now you're completely changing up the runtime and the framework WPF is very window specific even when WPF is running on.net 7 or dotnet 8 it is very much a Windows desktop technology.net Maui is a cross-platform technology and you will have to do some work to make a WPF app work as a documentary so this flowchart here essentially tells you what you care about so do you care about the native look and feel then yes then you absolutely want to do Maui or no I want the same look everywhere do you love xaml yes then I can do Maui or I can do Blazer hybrid if I prefer CSS HTML so it's just a nice little graphic that shows you between Dot and Maui and Blazer hybrid so if you do decide on Dr and Maui so between WPF and xaml and Dr Mary's ammo understand their differences because um Mary's AML is about the same as win UI or xamarin from saml which is the 2009 xaml spec so that's just a zamo spec that we uh you know there too but WPF and Silverlight those use the 2006 xaml specs so there are some annoying differences okay and it's not one to one but at the same time it's not hard so if I take a WPF app and if I try to move all of the c-sharp code forward maybe it's not using some of the C sharp 11 features but it should move just fine the xaml is not going to move fine as it is so my recommendation would be to keep your WPF app and open up a new DOT and Maui app within the same solution and then move things over one at a time you do not have a tool that goes WPF to Maui in one go because that's just too difficult but most of the UI part you should be able to reuse but you need to know what the differences are for example if you want to use a text box that's called a text box in Maui or in WPF as compared to an entry in in Maui things don't have borders like the way we are used to in in WPF land it's more about containers in Dublin Mary although if you're using some of the tillering bits our apis are about the same its height and width in WPF as compared to you know height request and width request in in Dr Maui layouts are different layouts are either you know you can use like a stack panel WPF it's like more of a stack panel or a vertical stack panel or a horizontal statement grid is a grid dock panel is a dock layout wrap panel is like a teleric wrap layout so there are some similarities but you just need to do this by hand there is no magic thing if you are dealing with windows again things are just a window in WPF land things are not quite just a window in in dot net Maui land because now it's talking about you know is or Android as well but there are you know corresponding similar things you can get the window handle and resize um what else so events are it's like either button.click versus button.click so not too difficult images and resources this is probably one of the biggest benefits because now you can bring in all of those images and you know Styles or fonts from WPF into a documentary project put them in that shared folder the resources folder and it will start getting reused between Windows Mac iOS or Android so a lot of different things you can do Handler customization so again check out this article it kind of talks through what it is now in terms of what the question was like how do I use this versus that so let's let's go and do that so let's uh in fact we can build this a little bit on our own so let's look at our UI if you look at desktop right so we have been doing this for 20 plus years now we started with winforms now we have you know WPF uwp win UI and Mary B cater to every way you want to build uh you know Windows desktop application if you look at our WPF Suite this is uh what 15 years in the making so it's very matured right it's got 150 plus UI components every type of visualization every type of navigation data management you can think of we got it and these are all Native UI components for WPF running on windows so if you take any of this and you want to transform it into a.net Maui app you have to realize Dr Maui is two years old as compared to 15 years old with WPF so it's not Apples to Apples it's not the same comparison for most of your hard eating things if you compare the Maori Suite with the WPF we are you know we have been working on this very rapidly so it the suite is growing but it's not at parity with WPF right and again we have Enterprise customers who are building desktop first apps coming from WPF with Dr Mary so if you look at some of the things we have done in in the very suite for example those are very desktop friendly let's look at some of the docs here I love showing off the grid because that works across everything if you look at the grid troll here for example this one here I love some of the features in here in particular I love these things like frozen columns so I can you know freeze some columns here and I can move it around all of my you know sorting filtering UI uh you know grouping UI row details where you have like you know one so it's like a grid within a grid type situation like you have each row of the grid open up and show you another grid or a chart autograph so you can do all of it just understand that you know it's not Apple strapples because Dot and Maui has not had enough time so if you're coming from WPF to Maui hopefully we give you most of the things we need but you know it's it's a churn we are trying to build up as many things as we can and again you don't have to completely come to Mario altogether you can stay in WPF and still benefit from some of the new modern-ness so that's my two cents add anything I should answer I had one question that we might have differing opinions on is there an advantage to waiting for net 8 to release before migrating a xamarin app to Maui what's your opinion Sam oh boy um no you should start right away because.net 8 to me it's more yes they're adding a lot of features to it but it's more of a stability race because they are really trying to solidify some of the tooling um so um you know Maui will keep on working the way it is in.98 with a lot more uh stability so if you have uh you know as I'm informs happen now right now you can move it to Maui between moving from Maui from seven to eight it's just changing literally one line of code from the target framework of dot Net 7 iOS 2.net eight iOS and you'll be up and running so I've had I've had differing experiences than you so migrating from uh six to seven I've run into breaking changes and having to regenerate the projects so my my recommendation is if you can wait wait yeah um six to seven was a little bit more involved than seven to eight would be in terms of apis and breaking changes so yeah it depends now um Ed if you can uh try answering one or two more questions I gotta take a quick break and buy a break and I'll be right back in like 30 seconds uh let's let's dive into more of scenarios of desktop and and what this means uh I know there are a couple of questions on using um uh Blazer uh with some very native features we'll get to that but let's uh keep talking more about the WPF and winform story here a little bit more because I think it's uh interesting uh what some of those things mean for us so let's show you another project here and again you don't need to follow along just watch a little bit because you can do this on your own I'm not showing anything you know out of ordinary just trying to you know prove a point because folks were asking about like I have this is the reality for a lot of folks like you have a WPF app that's been running your business and it's running fine and you are questioning whether should you go into making an adopting Maui app it depends if you have a need for reaching the Mac desktop then I mean that's the only thing you can do because like winforms and WPF will not work cross-platform those are windows Technologies so if you have to go across platform maybe you don't need mobile right now maybe you just need a desktop but you need Mac then yeah you kind of have to jump onto Dr Maui but if you if that's not your concern if you want to stick to Windows then maybe you don't have to give up on WPF altogether what I want to show you here is another WPF app here see I have not made this adopt and mavi project this is still WPF but I'm going to bring in something here so in my references you can see that I'm bringing in this nougat package called microsoft.web.webview2.wpf so look for it in the nuget repositories you're going to find this so when we talk about the Blazer webview so now we're talking about bringing Blazer goodness but not just inside of a DOT and Maui app we can bring it to WPF and winforms as it is because we know that you're on windows so we don't need to use the Blazer webview we can benefit from the laser webview even without going to top 10 Maui so I'm bringing in that webview to nougat package and with that one nougat package I can just drop that webview 2 in my you know main window.xaml still very much a xaml app and I can point to uh you know URL so let's go around this okay I have not done anything to this you know WPF app so it's just you know running a straight up WPF app this may be your lowest hanging fruit kind of a hackish way but I'm essentially rendering a big web page inside of a WPF app right so you can do this all day based on the web page you will get things that are responsive or not right so you can do this all day so you don't need to go to dot in Maui you can have access to the webview too so when I use a Blazer web view on Windows it's actually rendering a webview too so here we are completely bypassing Maui and just saying give me a webview to so I can render some web UI now this may not be very um you know convenient to just render a native or a website within a WPF app let me show you something that's a little bit more realistic and maybe we can build on this a little bit more bring in some teleric UI to this so uh as you bring in this new app Sam can you elaborate a little bit on like what the next steps would be to get more involved with like the cross platform aspects when you know you're migrating things over to Blazer hybrid here like is this like a stepping stone that you can use to get um from WPF to say like a Maui Blazer app and and then fully migrate to allow Android iOS and all of that stuff yeah yeah but that's a separate question right that that is making it to a DOT and Maui app so uh I would you know love to show you more about how a straight up Dot and Maui app would work but this is still on WPF land okay so if you folks can just hold on to that for another 10-15 minutes let's wrap up the WPF story where you are sticking to WP if you're not making a Maui app yet um and then then we'll see what it takes to make it a WPF or make it a Maui app right um so that was just a quick look at WPF but let me also show you this quick thing I'm just trying to wrap up the if you wanted to stay with twin forms in WPF what would that look like um so hold on this is a different app I wanted to show you um uh this one here first no that's the webview my bad um it plays a rifle that's the one I wanted to show okay so this is still a WPF app but notice like what Ed was saying I have not made this a DOT and Maui app yet right so because you know Roi is something important you have to think about it uh should I completely give up on my WPF app if most of your customers are still on Windows maybe you don't need to make it a.net Maui app right so as a modernization strategy you can bring in some bits of modernness into your WPF app but still keep it a WPF app you don't need it to be cross platform yet so maybe this is kind of a long hanging fruit so here is a WPF app if you look at my dependencies here in my do get packages I still have that one dependence that I brought in which is my webview 2 or webview WPF packets with that again I can call this webview 2 or I can call this laser webview because now it's running on.net7 so here is my main window.xaml here I am calling it a Laser Web view oops unlock that no go back in there so this is still a webview too but I'm now calling it a Blazer webview and I'm pointing it to some Dynamic Services if you look at uh the um main windows xaml.cs I am bringing this in as a service right so I'm pointing it to uh you know the build service provider so I can grab any anything that Blazer brings into into the picture here so here's my main window and it's pointing to this Blazer webview instead of pointing to main.layout or main.razer now it's pointing to counter right so there is a www root folder here which is very web thing that we are dropping into WPF and that can bring in CSS that can bring in index.html right but our goal is to bring in some Blazers so if you look at the index HTML this is pretty much the standard index HTML that one would have if you are doing uh straight up you know Blazer that's the div tag so what I'm doing here is exactly what is documented so if you do a search let's just say WPF Blazer right you're going to land on this page that's what they're talking about build a Windows presentation Foundation project with laser in it and this this is the same steps that we are taking here so with that we can now drop in a counter.razer component which is a straight up Blazer component and I don't have much more styling or anything else going with it but I can just run this right so it is a web view but it's now being a little bit more smart instead of just pointing it to a URL I'm saying hey I have a counter.razer Blazer component sitting right inside of my WPF app I don't have much styling to it but here's the counter working and that's the same laser component that you see working across web uh or or mobile so you can bring in Blazer straight away inside of a WPF app right so these are very much an options if you wanted to follow along and do some of this on your own do a search where it says WPF with Blazer and right in here there is also win forms with blazer so that's also an option for you let me show you that really quickly here let's go in here close that and we're going to do laser event forms so this again just think about this Wind forms is 20 year old tech deck and we are putting Blazer inside of that making it run on.net7 uh so if I do um uh the edit of the project file you'll notice that it's running on.net 7 Windows uh my output type is a win exe right and I have a dependency that I'm bringing in which is asp.net core webview so it's the same webview but now it's for winforms instead of uh WPF so with that one um you know nougat package I can have my form1.cs which is my designer and I can bring in that laser webview I can just drop it you can see that webview right in there right so I can drop that in here and then that's all I need I can drop in my counter.razer and that's my blazer component and I can go ahead and file this up and this is a winform you see that form one this is absolutely a winforms application running on.net6 or dot Net 7 or dotnet8 with a Blazer component inside of it right so when you think about migrations from you know WPF or Wind forms you don't have to go to Dr Mary right away right because you are maybe you have your customers still on Windows and windows is where you want to be you just want to benefit from some Modern UI bring in Blazer bring in all these modern things inside of your WPF or informs app you don't have to make a switch to dot ml because that is not a simple switch that is not as I'm informs to marry switch now you're changing up the framework so WPF to Maui or winforms to Maui is going to be much more involved because you are changing up the UI stack and changing up the framework that you're running on so if you want to stick to or if you can have the option of sticking to win forms or WPF you still can bring in some Blazer goodness into those desktop applications okay just to clarify we need to upgrade from.net framework to some version of modern.net before uh six is the minimum absolutely so if I right click here and show you the project file this one is running on.net7 so this um got undocked again so this one's running on dotnet 7 but I can dot net 6 windows but this web view thing is going to start working from.net 3 forward right so all of the modern.nets not.net framework not.net core but dot net I think five forward is when it starts working but six seven and eight is absolutely went into work so if you can afford to just modernize the runtime of your WPF or your winforms app to a modern.net like dot net six seven or eight then you can do this all day long make sense okay let's switch to something that was asked a little bit back about um Blazer hybrid right so um yeah let's close down Visual Studio here on my windows box uh we'll keep the VM running in case we need to get back to it but let's um switch to some more visual Studios stuff okay uh where was it um and I'm gonna jump out for a quick break Sam yep absolutely um okay so let's talk about a few things here first is uh this one here let's do um the Blazer thing where it's a daughter Maui app you're bringing in some Blazer but you are not sure how much of the Native stuff that you can do so let's try to answer that and actually while it is gone I'm just going to take a quick look at um at the Q a panel and thank you by the way for hanging out with us and hopefully you are able to do some of this uh well Josh is asking will this video be available for later view yes we will record this and put this up on YouTube as quickly as we can looks like John Orton had a few questions answered uh let's see uh webview 2 uh yeah so John the question was is the webview 2 nougat package available for legacy.net framework now you have to move to a modern.net that that's the key thing and again the dotnet Upgrade Assistant is actually really good so if I um go back here to the.net Upgrade Assistant here it is really good at doing some of this like winforms a WPF you want to give it a winform sap that's running on you know.net framework and move it to.net seven or eight it's really good at doing that so use the.net Upgrade Assistant move it over to a modern.net then you have the webview available to you right away uh [Music] yeah uh Florian is saying I really like to focus on this technology is we all use for such a long time but they don't have a cross-platform story yeah um WPF and winforms will always be Windows Technologies and if your users can stay on Windows then you can stay on Windows as well um a couple of questions that are Maui specific which we can get back to um oh I see uh Dennis is asking a good question here progress until Eric has such a large number of controls across different Suites I would love to be able to do a div to see what exists between Blazer and Maui uh yeah uh the Blazer schedule view yeah that's a good point so there is um well the thing is like there is no diff because these are you know very widely different platforms Dennis uh but you know I would pull up the two pages side by side like you know the Maui suite and then the Blazer suite and see watching what you're missing uh because we're catering to different audiences laser is still mostly for web developers while Maui is for Native developers uh there might be some differences I think the schedule that you talked about uh we are actually building a scheduled view uh for Dr Maui it's not out yet it's coming uh so if you need that right now then laser UI is maybe something that you you know bring in because again keep in mind like our Blazer Suite is again four and a half years in the making so a lot more engineering has gone into it as compared to the Dr Maui Suite which is you know two and a half years in the making so it's catching up fast but you still have some things that you have in Blazer that you don't in in Maui yet um okay um oh boy um Ethan uh you're looking for an upgrade tool for vb.net framework as well um first up we can do a hugs as a service if you are having to support VBS I'm just kidding really is good it's just you know not as many people do this uh nowadays we used to have a thing let me see if I can fill this up or if we support this still um yeah where is it ah we still do look at that um so um who's answering to hold on for a second let me see um the question came from Ethan Ethan Parish okay so vb2 uh C sharp right so we actually have a tool uh that is fairly popular and a lot of people do this uh so if you go out here to teleric.com and you come all the way down to free tools uh there's a vb.net to c-sharp converter uh take it for what it is like you can type in all of your VB I can you know switch it around and it spits out C sharp right so if you if language is what you're trying to upgrade not just Frameworks then start here it's going to give you all the C sharp and it's and I've we've heard you know folks use this quite a bit and it's you know fairly robust and it just transforms your VB code uh to C sharp if that's what you're wanting to do so hopefully Ethan that gives you a starting point um okay and you're back my friend yes sir all right so we are trying to answer a couple of questions uh dive a little bit more into the Blazer hybrid story uh and see how good is this uh for you uh and again for each of these things uh these are this code you don't have to follow along right now because it's a lot of code here that I'm trying to show you all of this should be up on my GitHub repo uh let's go check here uh so that's github.com whack my name and uh some of the things that I'm showing you here they're all out here so there's angular there is react and there's Blazer everywhere so all of these things uh uh laser Maui and so these are all things that I'm showing you that are all up on my GitHub repo just to Showcase a couple of things that were asked right if I am bringing in laser inside of my desktop or my mobile app through.net mavi um how Native is it right is it Blazer just because it can just render my HTML CSS or can I do some native things and answer is yes because even though it's a Blazer UI you are doing this inside of dotted Maui which means you have the bootstrapping you have the platform apis to do all types of native things with blazer so take a look at this if I do a file a new project and if I do a Maui app here if I do a Blazer hybrid app that's where I'm starting right so it's a Maui Blazer hybrid app is what I'm starting out as if you look at Maui program.cs nothing's different about here I got my Mario Blazer webview I am doing developer tools if I'm doing this in debug mode and that's about it mainpage.zamo nothing different here I have my Blazer webview and I'm pointing it to index.html and I'm pointing you to the first main component uh www it Remains the Same I got my CSS in here I got some index HTML this is the you know boilerplate index HTML for all of your Blazer uh you know loading up your app so none of that is different what's different here is once we get to the actual laser components in my pages I have some index.razer keep in mind this is absolutely a Blazer component that I'm writing absolutely meant for web except there is no web here I'm writing this as a part of net Maui I just have the SDK style project so or the Razer style project so I know how to render but this view is a Blazer view but it is still running on top of dot Dynamic so take a look at this I used to be able to do things like add using Microsoft Maui Essentials I don't have to do that anymore because it's now baked in because if my if I look at my my CS project here you see that use Maui is set to true so with that flag I already have that those apis I don't need to bring those in anymore but now from my blazer code I want to get to some native things so here's the survey prompt which is how it starts out I have a button here that says do some native stuff right and then I have a couple of H3 tags so very HTML things and then I have a code section here where I'm writing some c-sharp code as a part of my blazer UI now Ed is going to be the first one to tell you that you don't need to do this hold on for a second another phone call that I don't need to take right now so this code section here Ed and me come from the the world of asp.net classic which was the good old days of writing spaghetti code where your markup and your business logic was all together and it's not good practice because it's hard to test and just you know things just get very spaghettied up quickly so if you're doing this move that code section off to a you know separate file make it a partial class you can do index.razer.cs in which case you can just move this entire code section off to that separate file and then at runtime the compiler puts that whole class together so make it a partial class and just put it away um so here I am uh I have a you know function here that's being involved to win that on click of that button is called right so classic Blazer on click uh invoke this function and here I want to do some things where I'm tapping into some native things so let's run this actually on Let's do an iPad Pro and let's go fire this up on an iPad Pro and let's see what that does so it's going to be a cold boot it's doing a build for all the platforms first okay so this is about the app so it just knows that I know how to run on iOS I know how to run on Android and so on so I just want to showcase what this looks like if you are doing Blazer so out comes this app here which is classic hello world Blazer I'm really surprised at that in like four years like they have not actually changed the hello world there's a template it's still the same it's coming it's coming up this will change very slightly okay all right there are changes okay so I have the classic Blazer hello world thing I have my counter I have my fetch I have my things but here's my index.bazer so this entire view is being painted by my laser view here which is index.razer and I do have that button like do Native stuff right so let's go ahead and hit that button and now I have a few extra things notice how I had these H3 that had a message and I had device info so I'm bringing in some uh some you know text-based information into those h3s so what it's saying is Hello from this is the app name it's running on portrait mode uh so layouts and then it's running with this resolution 2048 by 2732 which I think is the iPad Pro's resolution this is the device it's running on iPad Pro 12.9 inch 16 inch and 16 GB and it's running on iOS 16.4 so iOS versions and it happens to be on Wi-Fi so Network here a little bit as well now I don't have this as a watcher but I can you know flip my simulator and I can you know hit the button again now it's going to say landscape right so if you had a listener then it'll flip automatically if you did that so how did I get to all of this well it's Blazer but I have access to all of the.net apis right so here is app info this is very much a dotnet Maui Microsoft dot Maui uh you know object that gives you the application model uh and I can tap into the name of the object I can go main display orientation so layout versus our portrait versus landscape and I go main display width and height these are all very very specific apis that I have ready-made access to from my blazer code here's the device info giving me the device name and here's me going into the network stack connectivity.networkaccess and make sure that you do have internet and again this one's not foolproof so I should have some fallback plans of you know 4G 5G 3G whatever you can check on the internet and the connection profile if it's on Wi-Fi then I say it's on it's on Wi-Fi so as simple as that so I can tap into some very native things now let's go to the counter.razer component here for a second it's still my running on my iPad let's go to the counter here and you see a few things here I have the counter component which still works the way it is but I have two more buttons here read to storage and read from storage and right from Storage so what do these do those two essentially reading and writing from the file system right and just because this is Blazer doesn't mean that you cannot so think about this if you had a Blazer application that's a pwa this will be a you know jumping through a few Hoops to write to some disk right and sometimes use just the browser cache that you can write to or some browser storage this is literally been written to the iOS disk or to the Android or to the windows to the Mac disk right so I can read from Storage looks like I run this once in the past but let's write to storage now you see the timestamp here that is the timestamped off like now so let's go back home and come back to the counter component again read from storage now I get back the same timestamp right so how is that working well it's simple uh I have access to something called the preferences this is my counter.razer in my preferences I can set and I can get so I'm just this is a key value pair it's just a dictionary so I'm using a last used uh you know timestamp I'm writing it and when I'm reading it I'm just reading the last use the same key you know obviously you want to do some you know null checks to make sure that key actually exists before you read that and so on so I can do this all day long now if you wanted to do this securely like maybe it's just maybe some credentials or something that you're writing that needs to be secure because this is essentially being just written out as a flash file you don't get to actually see the flat file you could on Mac Catalyst or Windows you can actually see the flat file on iOS or Android it's just slightly more difficult to see the file that's been written out but if you wanted to encrypt that file you're absolutely could there's an API called Secure Storage but guess what that needs more permissions both on Android and on iOS you need to have more permissions Windows and Mac are fine because you're already on desktop but those need additional permissions which before you can do secure sorts now the picking of the photo thing that's kind of fun so here's a Blazer UI and I want to tap into the camera or I want to go into your media storage because you take pictures with your mobile devices right so I can do pick a pick in which case I get a very iOS specific uh you know window that comes up this is not my window this is just iOS window saying here's a media picker here's your app gallery and you know out comes some very you know deep inside the simulator are these You Know sample images so I can you know pick one sample image and out it comes in my blazer view so how is that working out so that image is being rendered this is keep in mind this is a Blazer view it's just a counter component there's an image tag in here right so there's a button that's the button I clicked and I said pick a photo right and when you clicked on that button we came down here and we said media picker you know it's async and awake so we want to do things asynchronously in documentary we can we just said pick a photo media picker options if you wanted to something title and just choose something and then and once the user does choose something you can access have access to the full file path of that image that you chose from the media gallery and I'm handing off that entire file path to my blazer application to say go render this so just think about this for a second we took an image file which is deep inside the simulator and we are rendering it inside of an image tag and to you know top it off I can actually have some you know this is convention based in Blazers so I can do counter.razer and I can also do counter.razer.css so I have some styling you see that I saw that image in here it is kind of nicely centered right in terms of you know height and width so that's because I have a little bit of CSS here that's you know checking the you know Max width and height and it's just making it nice and Center so all types of HTML and CSS at play here from a very Blazer specific view but it's dealing with some very you know native UI components when we're talking about file paths um the Maui apis normalize those file paths for us if we use some of the built-in uh I don't know what they call them there's like a library of default file paths that we can access so if you access for example the my documents folder uh if you use the the one provided by Maui it'll resolve to whatever is equivalent to my documents on the given platform yeah um yeah absolutely it does some abstractions uh let me check here Josh is saying audio is out I can still hear you and you can see yeah as far as I can tell everything's still working normally so I recommended that he restart his go-to webinar okay good good um Dennis is asking about templates um yeah we do actually have some templates that try to help out so you can do a couple of different ways which we can actually you know dive in and show you some of our templates and how those differ you can bring in our nougat packages starting from Microsoft template or you can start with our template however it is that you want um oh so Dennis had actually used the vb.net to c-sharp converter it's not perfect but it's you know it's pretty good that's that's good that's good um okay uh so let's let's go back to this and I'll show you uh some of our templates and see how you can work with this uh now when you go to the fetch data uh Blazer does its uh usual thing of there's a Weather Service that's local there's nothing you know that's being brought out and it's just you know some fake data here but we are on a DOT and Maui app so we actually can you use the users your location um so let's click on fetch data I'm trying to remember oh no this is a new installation so I have not run this app on this particular iPad so it's asking me this so if this looks familiar like you see that um allow my native Blazer to use your location do not say that you're going to stop the user but clearly this is an iOS prompt right and Android will do the same thing so essentially this view is telling the.net Maui runtime that hey this app is trying to use the your geo location do you have permission as user so I'm going to say yes when I do that I get a device location I see that that 37 something and then one minus One Direction that's the geolocation uh this is running in a simulator so that's likely the geolocation of Apple's HQ in Cupertino but if you run this on a real iPad or a real iPhone or an Android device you get the real geolocation so how did we do that uh nothing is just absolutely nothing to be done there is just an H3 here right and what I'm doing here is when the page loads up we are doing an on initialized async and we are asking for I think forecast data which is what Blazer does we are now in in addition to that we are asking for geolocation notice this comes from microsoft.maui.devices.sensor so we're now going to the Maui abstraction and asking for our geo location and we're getting the gas you know get last known location once I have it uh you know you might want to do more checks to make sure you have it actually then I'm just bringing out the left and the law just to show you that I can reach your location now this being Blazer if this app is running on a browser sure you can read the geolocation from the browser but you don't have to because now it's a true native app right so somebody was asking us the question like from laser running inside of Maui can I do Native things absolutely everything that Maui exposes out as a platform specific API through an abstraction you can do all of it from Blazer right there's nothing stopping you just gonna say it's probably worth mentioning if you're going to be writing this where you have a web version of this app as well uh you'll have to like rapid interface around some of these uh features so you can swap them out with the web version of it so if you're running say geolocation in a web browser you're not going to have access to the Maui API you'll have to use the um the JavaScript based geolocation API or a nuget package that that pulls that in as a c-sharp library for you yeah yeah and actually we can we can look at a solution where you are you know so think about who laser hybrid is meant to you know attract it's Blazer developers who are already doing stuff for a web you don't want to give up on the web just because now you can do it with Maui you want to have the same solution from which you can serve up both the web and Native apps so let's look at that actually and then we'll look at some more templates because there are some questions about that so let's close this yeah let's look at this one here this also is in my GitHub repo so again some of this is a little bit of involved coding so which we don't want you folks to have to do you know with us so you can take a look at all of the repos uh just to kind of see how this works out um okay so this is a solution that you know Ed has written a whole um you know ebook about uh Ed how can I pull that up your uh Laser Web in one solution uh Blazer or sorry teller.com white papers okay see if you wanted to do this there's a whole white paper to help you out lots of good ebooks and stuff up here yeah there's a hybrid and web and one solution so check out the ebook that Ed has written uh he's the authority on this but I'm going to just show you this really quickly uh this is a solution which is a combination of a few projects so what we have here is couple of Blazer Web projects here the client and the server that's shared you don't have to have the shared one this is with the asp.net backend you can just go with a Blazer straight up server side or webassembly what you'll notice here is in this project I don't have the Pages directory which is where my blazer components live because I don't want them to live just in my blazer project I want the same UI to power my native apps on desktop and mobile as well as my you know my web apps so that just thing has just been taken out I also have a dotnet Maui project with blazer hybrid this is the exact solution that you get when you do Mario new project laser hybrid same exact thing I've taken the pages this folder out because I want them to be in a separate folder or a separate project by itself which is this one here this is called an RCL a Razer class Library it's not an executable it's just a library that's referenced from both the Mario project and the blazer for web project and this is where I have my pages this is where I have my shared UI for index or counter so that I can serve it up from both web and Native so the benefit of this is let's just do the web here first and the way we excuse me why this up is in my imports.razer here in my blazer web project I'm going to bring in that shared repository right so I have access to that in my app.razer I'm instead of just pointing the router straight away to the main uh you know main layout I have to go through the shared UI project so I'm just pointing to the main layout that's in the shared project and not in my blazer project that's about it um beyond that everything is the same so let's go into the Blazer web project and we're going to run this first and start that up now this being the web project it knows how to run on Chrome it is running for some reason it doesn't bring up my Chrome for some Blazer apps so I can go to this uh localhost 5000. so here's Blazer excuse me running on the web um exactly as you imagine so this is index.razer notice here I am reading the platform that you're running on this is kind of hard-coded but you will get more of it when we run this on my way and I'm reading the window dimensions here which is Javascript again you can read your location from the browser or from Maui if you want here's my counter component and everything works the way it is this is blazer for web except none of these two pieces of Razer components were actually in my blazer web directory they're coming from the share directory and the benefit of that is I can have the same UI now drive my native projects so let's switch up the startup project here um to the Maori one and this is running on Mac Catalyst let's actually run this on um on the iPad Pro that we will see the device a little bit better start that okay um let me actually um close down my PM that I don't need right now all right it's trying to rinse up on my iPad Pro same exact app here so again uh this exact project of laser everywhere um uh this is something that's out on my GitHub repo so here you can see it's the same Blazer project same index.brazer but now the Blazer is running on platform iOS because this is essentially a an iPad right and you get the window dimension of whatever it is this is the iPad and then the counter component works exactly the way it is so everything is good however let's change this up a little bit here's the advantage so now that we have this running um hold on [Music] this up again uh stop stop stop okay here's the benefit I can go in here and uh change up things that will have an impact everywhere so here's the Blazer button here's the CSS this is app white so I can change up this to whatever I want so background color of let's just call it red right and we're going to comment out that other line so we're changing up the default color and let's just run this instead of the iPad Pro let's run this on uh on a Mac Catalyst now and let's do the same debug start without debugging so this is the benefit it's the same exact UI Blazer UI that's powering the same UI across native apps and web apps which is really nice so here out comes the Mac desktop application notice how now it says hey I'm running laser noun running on my cat list so it recognizes that this is Mac OS and it's even if it's kind of iOS it's still called Mac Catalyst my window Dimension did change and if I go to the counter component now I have a red button as compared to the blue button right so and I can bring this up on my blazer app on my web app as well as Blazer on my iOS or Android it's going to be right everywhere because it's a shared UI so this is one of the main benefits so to kind of talk through what Ed was talking about like how do we switch up the implementations uh here you can do this your own way but the thing that Adam me both like is is an interface so here's my shared service it's just called an i platform info so I can get the platform name and I can get the window size it's just an interface right so this is all that I have in the shared repo and then I want to have separate implementations of this in my blazer for web as well as blazer for married right so you can do this however you want so here's the memory implementation which is super simple actually let's look at Services platform info Mario device info platform name just straight up I can read the platform name anytime and I want to get to the Windows size I can get main display info width and height right so the dot net marry side of things are pretty simple so I can just read that anytime if I have to go look at how we do this for web it's a little bit more complicated because now I have to go talk to JavaScript again I don't have to just you can approve a point that I can so here is the same service now for web apps here's platform info this is actually bringing in this browser service and it's trying to get the width and the height and the browser service essentially is the one that brings in that JS interrupt so I can actually go read the JavaScript provided window dimensions see that get dimensions that's the Javascript file sitting somewhere in my www. right here window dimensions see that width that's just reading the window inert width and window inner height so straight up JavaScript that's what I'm reading to bring up those Dimensions from from my blazer app running inside of the web um Ed can I read do I have to talk to JavaScript if I have to read the window dimensions in a browser or does Blazer provide this in any other way no uh but you can pull in a nuget package okay uh that will do this for you so you don't have to write the JavaScript code you can just write the C sharp there exactly there's a lot of new get packages out there to um do almost all of the the JavaScript interrupt stuff these days so any of the browser apis that you need to access you can usually get those as uh third-party packages off a nuget and access those there's even some that are built with Source generators so they they didn't even have to get written by a human nice nice yeah you know Blazer is a rich ecosystem you got so much going on uh and then Mary is catching up fast on some of the apis and other things now um there were some questions about our UI in particular so let me show that off um really quickly um let me show you first the Maui side uh let's see where would that be uh uh let's actually go to the file system so if you are interested like what can today do for you I get all of this stuff but I'm interested in Maui let me close down all of this uh let me just see what I can do straight up with uh some teleric UI so let me show you that so if I go to the mobile components here or you can do desktop as well it's the same Navi Suite that we're going to point it to you don't need to trust anything that I'm saying go to the app stores you can see some of this UI so all of this UI is out there for you to use this is all you know 60 plus native UI components so we have been busy and all of these things are desktop first and mobile first as well which are particularly tricky for data forms and data grids and we've been hard at this so it's gotten some legs here if I look at the demos here um so we got a couple of demos for you to look at that are actually in the App Stores so there's a DOT MRE control showcase so go to the iOS store or the Android store or the Microsoft Windows store and look for tuleric this is an app that you're going to find or we have another one called crypto tracker which is really cool that I'll show you how it does things here so all of this code is also open source from GitHub so you can see how we build a full scale app in know with all of our UI inside of it and then see how that's working out when you install this there's a little installer that comes in and does this for you so let's go into my my documents here progress you can keep this however you want here I have some of my xamarin my Bowie bits uh I think we are this is not the latest one we have a Dr Maui released at 6.1.0 which actually has.net 8 support as well but this one's the older one I'm going to go into my examples here and look at the control sample gallery and let's bring up this solution in my vs code so this here is a control Gallery exactly what it sounds like so it has all of the controls all in one place which makes it a very busy app but this is all mvvm without any mvvm Frameworks that we are bringing in so let's go ahead and run this it might take a while because it's a big app to build I don't remember exactly when I had run this for the last time but it's got all of artillery UI all in one place and it's just ready for you to build okay so that wasn't too long of a build it's trying to come up now I ran this on Mac catalyst so you should get a Mac desktop application out yep there you go so for those of you who are considering a green field desktop app today and I'm saying this slowly because uh this is big what I'm trying to say if you are trying to start a new desktop application today my advice again you can do your way my advice is to go with Dr Maui which is not something I say lightly because you can have WPF with all of its you know maturity all of its complexity uh you can have win forms you which is very productive but I'm saying Maui because this is the way forward this is going to immediately give you a source code that is ready to be cross-platform it is already cross-platform it's going to work the same way on Windows and Mac and then eventually if you want to add on maybe your customers are asking for mobile apps the same code base is going to serve up on Native mobile apps so yes you might not be as well uh you know served with all of them complex UI but it's a great starting point to have a you know truly cross-platform shared code base so all of the UI that we offer in Maui it's all right there for you so you can you know check it to check it out and again you you don't have to run this locally you can also download this on your iPad or your Android device and you can check out some of the UI like check out the data grid and some of the charts and graphs this is a full-fledged data grid with filtering sorting everything that you can think of uh everything works these are some of the uh you know templates that I was talking about that are really nice like the Frozen columns I love the fact that I can you know freeze up a column and then I can scroll all I want and my columns like stay the way they are so some very desktop friendly features I can right click I can do context menus I can do things like that and then charts and graphs are always popular because you know who doesn't need charts and graphs so we have you know dozens and dozens of different types of charts oh this one's a chat example this is you know going into like chat GPT type Integrations if you wanted to I wanted to go to the chart Mark not the chat so here's the chart demos we got area charts barge charts uh you know Financial series um line Series so pretty much everything you can think of we we got you covered so if you're coming from WPF to uh Maui desktop you might not have everything but it's still a good starting point tell us what you need and then we'll build it for you we are working with some Enterprise customers very very closely who are coming from wpf2.net Maui and they're asking for more and more desktop friendly things and that's what we are building so take a look at this and all of this will work just fine on iOS Android as well um okay so that's the control gallery and then let me show you um the other one here which I really like because uh how it's done let's show you the crypto tracker this is uh an app for fake cryptocurrencies Ed and me love investing our thousands and thousands of dollars into crypto which is up to you if you wanted to but this one's a cryptocurrency a Tracker app everything is fake about here the data part of it at least but I can run this on an iPhone 14. uh just to kind of showcase what you can do in terms of reusability so the point I'm trying to make here is dot net marry as a code base is meant to be for Native oh hold on it's not being able to execute that's not fun okay Visual Studio close for once and we can bring it up uh let's go to the crypto tracker here and we can open up the solution okay can I not run this on an iPhone 14 sure can yeah switch Visual Studio being registered yes sometimes um okay so the thing that I'm trying to say is just because.net Maui oh I had multiple emulators close this just because drop dead Maui gives you a code base for serving up mobile and desktop apps together doesn't mean that your experience should be the same and this is true for Blazer or Maui however you want to do it you should cater to the platform that you're serving it up on so being responsive being reusing your UI is important so this is all Native okay we'll get to Blazer in a second where you can do all types of you know responsive things you want but this is a straight up on Native app so this looks very mobile first kind of right so it's you know telling you all of the cryptocurrencies here I can tap on Bitcoins and then it actually navigates to a second page right so notice the navigation here this is a completely separate view it's showing you how Bitcoin is doing over a month over six months and these are some of our fancy crafts and charts but that's beside the point I can do Candlestick all sorts of fancy things and then when I come back I come back to this list this is very classic mobile because you know many many mobile apps end up showing a list of things right you have a list here that shows you a list of things and when you tap on one thing you go to navigate to a different View and you come back and so on so classic you know web UI or you know native UI for mobile so let's close this and uh we're going to switch this up to be running on a Mac Catalyst or even an iPad will do the same thing because we're looking for bigger real estate here so let's run this now on an iPad and again this Source Code by the way is open source on GitHub so you can check it out exactly how we do this uh how we render some of the charts and graphs uh now it's going to bring this up on a Mac catalyst so Mac desktop almost here okay boom so now it's a Mac desktop application right still Dr Mary still Mac Catalyst but notice the difference here just because we have more real estate and you can do like if it's more than certain number of pixels switch to this mode or this is kind of a little bit more you know broad you can just say if Mac Catalyst do this if iOS iPad do this and so on so you'll notice that here I have the same exact thing so I can tap on each one of the cryptocurrencies and then I have a view which shows you how it's doing except now these two views are just put together side by side you are doing a Maui app you do not want to recreate the UI once for desktop and once for mobile you want to reuse that desktop as best as possible right so here this UI looks very familiar right this was the same list view we saw on a mobile device and then we navigated to this other view uh on mobile and this is the same view it's just being loaded up side by side so this is a very you know Common trick that you can do really saves you a lot of time so let's take a look at how this is done so let's go in here I'm going to close down some of the emulators here close that down okay so memory program starts out here nothing different about this let's go to My Views here so you'll notice that I have a couple of views these are views that are you know not tied to any platform per se I have a header view I have a data grid view I have a list View and so on this is the selection view which is essentially just giving you one big grid and then a list view inside of it which is giving you that list of you know cryptocurrencies this one's you know all stacked up with like item templates and data binding and all types of things so these are my views and they are separate from my platforms then I go into my uh let's see app xaml is where we have it uh no this is just uh that's not here I have xaml.cs yeah this one here so notice how when the app is starting up we can say where you want to be so if you are on Android or if you are an iOS right so now we are saying if you are mobile then your first root page should be the coin selection page which is the Bitcoin which one you which cryptocurrency do you want to select go directly to that page and that page has the list view if you're on Mac Catalyst then this main page is the one that you've got to use and even if you're on Windows or Mac Catalyst then go use this so we are switching up the first View and that uh you know navigation page that view comes from here so here's the desktop page right notice how this desktop page essentially brings in that you know tab View and then inside of it there is somewhere is that list View and then it brings up that other the the detail view right next to it as compared to the coin selection view which is the first starting point of the mobile view it's just a straight up uh you know dead Red Data grid and then it's just info uh with the list view in it so what I'm trying to say is uh do those checks so that you can reuse some of that UI you don't need to recreate the UI from scratch between mobile and desktop does that make sense for people uh let's see any questions uh David likes it thank you great or uh maybe uh Ed answer the question um to uh yeah just decompile is there any love for just decompile I love that thing of how you can just decompile.net assemblies um Okay so nothing else here uh chat chat room and let me know if there's anything I can respond to um okay let's talk about one more thing here uh let's talk about um uh so that's the generic.net Maui uh you know just a straight up native Suite but let's talk about some teleric UI inside Blazer UI inside of Maui so uh this is another project and again this is also up on my GitHub if you want so that let's look at repositories and that's the project that I'm talking about celebrity based in UI so it is a super simple.net mavi with laser hybrid solution there's nothing else to this except for uh file new project hello world there is a dependency that we are bringing in uh so if I look at my dependencies here um yeah let's look at any one of them like the Mac Catalyst one here uh so if I look at my nougat packages here I am bringing antilleric UI for Blazer this is the nougat package for all things Blazer UI for the web this package has no business being in a uh in a native app like desktop or mobile but we can bring that in because my CS fraud says hey I'm a sdk.razer style project I can do this all day long so here when I bring in that dependency which is right here package reference version 4.4 I don't know if that's the latest one add or there has been more after this it doesn't actually complain because it's fine it's a Razer style SDK Razer style project with that I have to bring in some more things in my import.razer I have to bring in some of the generic Blazer binaries uh you can see where I'm going with this I'm trying to render uh teleric Blazer UI inside of my Maui app right um so nothing else in here index.html this is pretty standard stuff that our Blazer documentation is going to guide you through a couple of libraries here there's a script reference here for a Javascript file this is the webview that you know Blazer brings in there's a CSS reference for some uh CSS that's you know Kinder UI style CSS that we bring in and that's about it and then the main layout I am wrapping up everything inside this thing called the telleric root component which is a way for us to come inside and know the Dom a little better right and and so I can do like floating windows I can do you know uh model windows inside of the Dom so is is that kind of a good explanation of the root component yeah it's it basically sets um a uh a point for the teller components to be able to draw uh like you said with like a window pop-up and it also sets up some of the services that that are needed to run some of the components okay all right so I do that and then I can get to my index.razer page which is pretty much the standard uh index.bazer page that you see um in the Blazer project that's you know scaffolded for you except I am adding on a whole bunch of things so here's my survey prompt with the welcome then I'm adding a Taylor button I'm adding a barcode I'm adding a calendar I'm adding a date picker there's like a circular gauge and there is like there's a card view so a whole bunch of things right so let's go ahead and run this on running my Catalyst here first okay so out comes the Mac desktop application this is Mac Catalyst powered by Dr mavi but the whole UI here is a Blazer webview and the whole UI is being powered by index.brazer this nav part is separate so here's my index.bazer here's my server prompt but I have a tethering button I have a barcode I have calendars which are fully functional it's a you know really rendered calendar here I have a card view I have a circular gauge and then here is a date picker which is the trick that Ed showed me uh notice how if I tap on this I get the date picker but it's kind of meant for mouse and keyboard it's you know small but if you render the same UI components notice how in the date picker there is this thing called the Adaptive mode now so I can just turn that to Auto so then when I go run the same app on a smaller device here like an iPhone I'll have a slightly different experience so some of this is going to come down to you how you want to do responsiveness if we are you you are using some of our UI we will like to help you out but again it's not a silver one so some of it will have to be you figuring out what the user experience looks like on a smaller form factor um you know with whatever UI that you need so here's the same UI index.gracer is the same exact uh you know UI that we're rendering here's a date picker so now when I tap on that I get a full screen date picker because now it's you know touch friendly uh because now I'm an iOS or Android so this is how I would interact with that so the same UI we have that for all of our UI components or for all of our input components rather importance which is really nice yeah um so any type of Pickers that you can choose just set the Adaptive mode to Auto and then we will you know figure out what platform you're on and then uh it's some of it is going to come on come down to your CSS you know media queries if you want a certain experience on a width of this pixel versus width of that pixel that's something you can always do on your own right so we try to help you out so we are here to tell you that if you are using any of our blade amazing UI right which is a lot of our laser UI components for web which is a lot like in four plus years we have Ed and team has been super busy so all of this UI component system that you see for Blazer which is meant squarely for web apps now there's a whole new tab here called Blazer hybrid every one of those UI components are also welcome on Maui with you know the laser hybrid story with full platform API access and with adaptive rendering now you can do this All right so and we will also Stand By You So if you're doing this on Dr Mary on desktop or web or or mobile and you run into issues we are here to support you so all of generics laser UI goodness is running perfectly fine with mobile and desktop apps I've got a good component we can show real quick if you click on demos this is very topical for what we're covering so if you're uh doing a uh if you're coming from a xaml background this is going to be super helpful if you're doing Blazer hybrid uh under the layout section you will see a grid layout and there is also a stack layout okay hold on layouts okay I see uh grid layout okay yeah so this is a um not like a data grid but a layout component so you can lay out your views uh this this would help with your example that you just gave if you wanted to lay out those components a little bit better on on those views so uh there's the grid layout that gives you um the ability to lay things out in a grid which is possible with CSS but maybe you're not a CSS Guru so if you click on view Source on that tab Sam you can see the the layout is done very similar to how you would do it in xamarin forms this is very xaml for you yeah oh this is exactly example yeah okay and then we also have the uh companion for this and that one if you go back to the last page it's easier to find I think it's called the stack layout oh on that one yeah this is just laying things out in in kind of a tube in either direction either uh vertically or horizontally and it works like the stack layout in uh in xamarin forms okay so stack orientation you're just setting it horizontal vertical uh I got some cards here okay so I see that yeah interesting um this is by the way um uh a good thing to point out because uh sometimes we forget so let me go back into an automatic for a second um a good thing to keep in mind if you're using um the stack layouts so if I go into user interface uh uh where is it layouts okay uh you can do absolute you can do bindable Flex grid stack layout so stack layout is for you to stack things vertically or horizontally in the past we used to have a stack panel right and you can still do that um you could use you have a stacked panel and then you would set the orientation property to vertical or horizontal please don't do that anymore they would really like you to stop doing that because they have now made you a vertical stack and a horizontal stack okay uh these uh so this is exactly what it is like stack layout uh orientation is horizontal don't do that the performance is so much better uh maybe the oh so they have it different like the stack layout and there's a vertical stack layout and there's a horizontal stack layout so this is exactly the same thing but the performance is about you know 30 percent better than having a stack layout with that orientation of vertical so same exact idea but the engineering team cannot say this enough like they would really want you to use the vertical and the horizontal stack layouts instead of Justice declared okay now um Ed let me ask you a question here um have you seen uh so when we go to Blazer hybrid uh story with teleric UI um have you ever uh tried doing Blazer UI inside of a traditional desktop app like winform so WPF personally I have none so shall we try we have a little bit of time so if you know folks want to see me fail uh we can we can do that because we just have this app open which is you know bringing in laser hybrid inside of a.net Maui app but what if we can do the same thing on straight up winforms or WPF app so let's go back to Windows Windows 11 my good old VM I do not run heat in my office in winter time because the VM and the fans are good enough for me uh let's see um if I can go in here we can start with that Blazer web View now this mayor may not work because we might have to do some work to figure this out so this going back is a WPF app right so this has got nothing to do with Maui but we have um we do have that webview 2 package that we're bringing in right let's go back and check yep we have a web View and that webview should be able to look at www.root and find that index.html and then we are dropping the counter Razer component in here uh nothing else to that so now this one here is um I might not be able to do that on a straight up WPF app let's just see the project file uh dotted seven windows um let's give it a try because I'm not sure what it's going to complain about uh let's let's see all right packages manage minute packages do I have my sources figured out uh oh I don't even have a source yeah so hold on for a second I'm going to go try getting this so let's do docs because I keep forgetting and sometimes I'll add the source the nuget package sometimes I uh take it out and I forget what the source is so let's do uh restoring nougat packages I just want the URL uh no not there Mac getting started with nougat packages and I just want to set the source so I can pull down my source there it is that URL we're going to copy that [Music] um URL now we're going to go over to Windows here uh you can close down some of the simulators go to Windows okay so before I do the package I need to set my nougat package options okay package sources right and again this might be a good trick for you to know if you are using any type of generic UI it's the same everywhere so you get the nuget source which is the straight up one and then I can add more things to it this one here uh we're going to call this the generic source uh and for the source we're going to do that so nougat.laric.com vac V3 index.json um no that's not a thing so let's do an update okay so now it points with lyric and I think that should be it uh it might ask me for my credentials the first time I try doing this um so let's go to manage and let's switch to the lyric source okay here we go so this is my whoops my credentials here I have multiple internal accounts so this one's my personal one just so I can browse okay here we go so now let's look for uh it should be you know hitting that nougat source and try to pulling back uh all of the um uh till Eric nougat packages that are out there so you see all of the you know stuff from kinder UI just map data components documents libraries a whole bunch of stuff right so here if I have Blazer if I search for Blazer there is report for your tiller you have for Blazer I will be up to 4.5.0 interestingly so I was one level back so can I bring this inside of a wpfm I don't know we'll give it a try output it's going to show me something just shipped about a week ago too Sam that's brand new I am I Am brand new I am in hello look at that okay so uh I am bringing into lyric UI for Blazer uh the latest bits here 4.5.0 keep in mind I'm doing this in our WPF app right um so we will have to do a few things to make sure I am all set first is imports.razer uh this is not bringing in much so I'm going to go and copy those things that I know I'm going to need which is these two uh yeah what else do I need no I think that's it uh well we'll see what it complains about and then we'll fix it all right CS barrage now it has a reference to generic here for Blazer nice 4.5.0 okay so fix up my imports.razer index.html has to have a few more things right because this is just the laser CSS we need our style sheets and a little JavaScript interrupt yep okay so this is the style sheet and we're gonna get that JS interval these are all by the way well documented so um look at any um Blazer uh getting started guide it's going to point you to the same things uh wait this style sheet uh no that I should have that statue this is the other two that I need so so here's my uh Kinder UI CSS and my terrific place of JavaScript and what else do I need um main layout oh I should make that an electric boot component yep and let's go here to oh I don't have to actually have a main layout here because I'm just pointing it to the index age table maybe I don't need it there's there has to be some some sort of entry point is it only a counter component on this app yeah this is just pointing to a counter component this has got nothing else so if you look at the you know Blazer webview is just saying hey go to the counter component so uh so it'd be around looking under component yeah yeah normally you would have a layout which brings it all together this one just doesn't have anything to it so some things might not work but then again some things might so let's go and try to copy some things here let's start with uh we still need one more setup uh what is that go to Maui program CS on your current oh you're right you're right so this one actually has the add generic Blazer yep ooh uh where would I add that to my WPF app uh is there a dependency injection no um well there's this which is called laser impacted cell collection yeah so [Music] um this is essentially pointing it to will this work right there yeah uh go below the ad WPF line [Music] yeah paste that in I think like induction doesn't have a like there is no Builder like it's not using that's okay that's okay we'll fix it we just need the last part really take those two items out and change it to service collection yeah if I can type okay just that you think that should do it okay all right well give it a try so let's start with the button and the barcode okay uh we're going to come into our counter dot razor here there's my increment button we'll let that stay and we'll try to render uh toleric button and a barcode it's complaining about things which is fine it's not been built so does this build okay it builds and the visual studio is still being Visual Studio that's that's okay um so shall we run this yeah look at that first try thank you Mr Sharp now that is all that we needed so look at that a WPF app you know rendering not just Blazer uh inside of it that counter component that's a Blazer the layout is completely out of whack here but you get the point so that's the counter component and then there is here's my button and here's my barcode so now I'm getting adventurous because I can do more things here I can just move this down I can give it a break yep that now and maybe um do one more so I have a nice separation so now let's bring in more things um we have the calendar the date picker it's not going to be as nice uh without the root layout uh let's do the calendar you can always just wrap the entire thing in a root layout oh I see okay artwork components and end below the last component the teller recruit layout okay okay let's do the circular gauge here okay uh we'll bring that in in a second let's just see if these render because now these are some really Advanced UI I got the calendar and the circular cage all inside of a WPF app in that beautiful no yeah I didn't even bring into other things that I needed missing missing some code some fields yep there you go so that's all easy to bring in oh wait I already have a code component I just want to get these all right so now I have a min max so the date time uh and I have the date I have the date picker which I'm not using yet but does this build yes okay so not looking very good but you kind of still you know see the point here uh can I make this any bigger okay there you go so there's the barcode there's the calendar that all works and navigation works and there's my circular gauge yay but I can make this bigger and then I can see the whole thing uh now let's do what uh Ed was just suggesting we do let's go back here uh so this um layout is the one that holds it all together so I'm going to copy this to direct root component and I'm going to come up here and you said wrap the whole thing right yeah just put it from top to bottom yeah and we're gonna close this here oh look at that intentions works as well but it knows that we brought in that nougat package so we clearly should be doing something with it so that's nice all right so now uh what did we miss um we are missing the card action which is understandable how to make it work and let's do the date picker yep there we go so we got the circular gauge right after the calendar um yeah let's do the date picker right here okay now we've got to show that selected date is this and it still has adaptive mode on that's fine we will do a build build is good run this okay look at that so laser UI generic button laser barcode laser circular gauge Blazer calendar and here's the date picker uh that works too look at that that root component is all it's needed so it's showing me the selected date uh from whatever I select so this is in a WPF app you can do the same exact thing in a winforms app and just like I'm just you know I just chuckled at times with just some of the flexibility that we have uh you know we we like to complain a lot in the dark net world like things are not good tooling can be more stable but you know this is amazing to me that I can take uh all of my laser UI and I can you know shove it inside of a Dr Maui app I can do it from WPF I can do it on winforms so you know more and more strategies for you to try to you know modernize parts of your um you know desktop applications okay um what else uh let's see any questions here from the chat room yeah the failure is the greatest teacher uh said Master you are absolutely uh you should see how much we fail um yeah I was I was joking uh Ed and me were at uh conference um uh recently and we're talking about you know failures of the very get-go but it's a it's a conference where they had you know big rooms I had like a big you know in a ballroom but and excuse me the speaker section in the front it was just all flat so even though there was a big room it wasn't like a Podium because the moment you give me a Podium where the speaker is uh standing up on something I've done this not once but twice where I have just fallen off the stage so uh you know you uh you deal with older people we have failed in just about every way you can think of um uh let's see Dennis is also asking um I need a feature where I can specify it for the entire app this is is this something you already answered Maybe um I answered it so when we showed the um the responsive setting or uh that component here go back and look so adaptive mode it's right there on line 21. uh this actually at current state has to be sent set at the component level on each individual component that you want to use this on uh so Dennis was asking uh I need a feature where I can set that setting globally um and and Ajax we used to do this in web config so uh back on that telleric root component Sam if you scroll up uh or you're which app are you in all right there are some global settings we've added here as well so I don't know if you can get intellisense on that but I think there's just one right now and we've considered adding others here uh enable right to left is one of them let's see so you can enable right to left um language uh the right to left language feature on uh all of the components globally through that setting I was going to ask like is it only text or does it actually try to rotate the components around as well um it will change the UI uh according to the the language so some like buttons and things will actually move to the um interesting right aligned part of the screen yeah so you can set that globally here so you can say enable right to left it's I think it's a true false setting um and then we would have something similar here where it would be uh the uh adaptive mode and you'd set the Adaptive mode at the the root component level and it would just filter down to all of the children so we don't have that feature uh right now and um if you want to see that go to feedback.tellerick.com and and post it or upvote it thank you Dennis Dennis is going to post it there if you're uh also interested in that go up vote Dennis's uh post when he's done yeah um let's see Michael Holmes is asking I realize this is not on topic but can I upgrade a.net 5 Razer Pages project 2.7 using the prede assistant yeah yeah so Michael I think that's more of something what Jeff and um Eddie will cover next Wednesday I think like 13th um so yeah I'm not even sure it's necessary for that to be honest um you may just be able to go in and change your CS project file to say.net7 and that's probably about it because those are very new Frameworks like five to seven is is not a big jump um it should be a quick upgrade yeah um so um back on this question I think Dennis was asking this before um what about templates so there is a little bit of help here so let me close that thing down um if I do a new uh no actually I don't want to do that new hold on I want to nope nope come back come back uh let's just open this for a second uh no just give me a thing to open uh let's just do Maui hello I'll show you um so um let's see do I have it installed uh maybe I took it out yeah I have taken it out actually so we can try during this live um yeah do you wanna go ahead do you want to try and visual studio code Sam yeah Visual Studio code will definitely have it I'm just trying to see um if I'm missing that oh actually it's right here so hold on for a second I will try to show you this because I have taken this off so if you do any of the installers uh Dennis or anybody else watching xamarin or Dot and Maui we do do extra things like templates and other things so those are included um uh as uh things that are that you can get to um either for the nougat packages are installed as well as the visual studio templates are also in there I'm trying to see where that might be extension so see that mpac that's for uh visual studio for mac and then Visual Studio for Windows gets it by default so let me see if I can pull this up so yeah and then I would love to show you the vs code one as well uh where are my extensions uh source code extensions okay here we go extensions sources it's getting Visual Studio stuff and I can do an ad um why is it asking for URL I just want to point it to a service can I just how do I bring in an M pack maybe uh that's more like it's because it's looking at Visual Studio but I I had this instantly asking the wrong person Sam I know I know uh there's a way to open up drop it or something I have no idea no no hold on we're sunset in it anyway yeah well actually we did have the windows One open so let's see if I have this here or no no I don't have any of the generic ones installed what's wrong with me I should have them all the way I I used to I have just cleaned up a whole bunch of them so hold on for a second hold on so in visual studio for Mac which has been Sunset yes extensions oh there it is okay so installed are some of this browse okay there it is so install files that's what I'm looking for so documents go to the latest release Maui extensions impact open yep and install sure all right I think now I have to close it and bring it back now if you install uh the components on Windows from the teller or the progress control panel it will automatically install the extensions for visual studio as part of that process oh no I'm not seeing my extension yet this is really easy for visual studio code if you want to jump over to that and look at it yeah seeing the installed ones at just about 10 minutes left here oh yeah I didn't even look at the time yeah for some reason it's not liking my extension on vs for Mac okay tell me about vs code let me close this uh vs code there's a button that you will see right away um on yeah extensions now if you just type in Telluride I'm going to close uh some of my workspaces because it's gonna okay now it's a clean slate extensions teleric oh look at that and then uh you want the one or I would do the Blazer productivity tools install on that and then you might want to look in the um scroll down inside of the docs right there and see I I don't remember the command to get this up so yeah so it's typed out yeah Ctrl shift p once that is done yeah um maybe the command shift B gives me all of the Maui stuff is it called genetic something yeah yeah I think you might have passed it if you start typing oh there it is there it is a beautiful Blazer template wizard yep yeah click on it just click on it real quick Sam uh the launch wizard yeah yeah launch the wizard just so you can see the wizard itself yeah it's really nice it lets you pick the uh the swatches um that you want to use versions that you have installed are listed there uh you can switch between whether you have a paid or trial license uh Blazer web assembly and Blazer servers so it walks you through that and then there's an admin dashboard template as well so if you click on that it might show you a preview I can't remember if you get to see a preview or not okay so maybe you don't get a preview there but um that one gives you like some pages to start with that's really nice yes and then also um when you installed this you just also installed Snippets so you can type in the name of a component hit Tab and it will auto complete a uh kind of a demo version of that component so it'll kind of have everything but like the data binding like the the model attached to it so for a grid for example it'll stub out what you need and then you can fill in some of the fields there and get going real fast nice and and and uh since vs4 Mac is being retired again it's going to keep working until August of next year we are going to look to build similar experiences for Maui again right now there's nothing stopping you you can you know pull up a Maui app and you can just bring in a Toyota reference and be you know done with it but we would like to have a similar experience to what Lena Blazer has so inexpect an extension that's going to work with vs code as well yeah on Visual Studio for Windows we have already have the the laser hybrid template yep which also I don't seem to have installed on this VM uh too many VMS I I have it on my windows box which is also my streaming PC yeah on this you want to run the progress control panel and just install it all yeah yeah it'll just get it all okay um so we talked about a whole bunch of things here today and uh let's see let's look at the chapter one more time see if I if you're missing anything thank you so much while you have the browser up Sam if you could go to teller.com uh webinars again um that's a good place to watch for the uh recordings to drop yep so they all say register now but if it's a completed webinar I believe that changes right we'll see links to the recordings for past webinars yeah that's right here yep cool yeah yeah come on look at that bail out yeah um when that is ready so if you're registered already uh it will be emailed to you but if you're you know telling a co-worker that hasn't registered just tell them to visit this page and check on it in about a week and I want you know join the theme Builder webinar I want to learn because like all of your CSS Styles all of your custom uh SAS things they are all welcome now the web and the native awards are nicely coming together we can you know customize all we want and then bring it to Native mobile and desktop um so we talked about a whole bunch of things today uh just a lot and I in fact like um what's a good place to say let's go to blogs.tillary.com and let's look at um some of the ones that we looked at so let's just do uh WPF to Maui something like that yep so you know look around on the blocks we have lots and lots of documentations on it so my point is um see where you're at okay if you are on xamarin then moving from xamarin to Maori that's easy let's actually pull up the.net upgraded system one more time and uh let's look through all of the code paths okay so first thing is uh let's just stay here for the rest of the few minutes here if you are on xamarin forms and you're trying to go to Maui that's the easiest thing uh maybe not so easy if you have a very very complex app so take your time with migrations I have heard things both way I've had a couple of super simple apps which the Upgrade Assistant was fine to do on its own but it's just a starting point you will invariably have things to do manually and I've also heard people who have just you know kept design forms at the way it is start up a new DOT and Maui app and just bring things over manually that way you have much more control over what's going on anything that you have in xamarin iOS or xamarin Android move it into the iOS of the Android folders in Dot and Maui and you know run with that so hopefully xamarin forms to Maui is not a huge pain point for you but again you know you will have some work to do if you're on Wind forms then your choices are to first try to make it run on a modern.net.net six or seven or eight if you can because the moment you do that laser hybrid is an option for you um laser UI can start lighting up some of the you know UI inside of your informs application if you're on wpm then you have a couple of choices one is again you want to you know clean up your code bases the best you can um excuse me always look at your dependencies same with xamarind forms same with WPA for winforms if you have a dependency maybe a printer maybe a just a random thing that is very window specific that is not letting you move forward maybe you should reconsider how much you need that maybe you can write a plugin make it across platform abstraction and then you can make it run on.net six or seven or eight so WPF you got a few you know fork in the road if you want to stay on WPF then make it run 1.net six or seven or eight and then that's going to give you the Blazer option of doing Blazer High hybrid inside of WPF and as you saw you can render all types of you know laser components and styles and routing generic UI components all inside of WPF or if you really wanted to make it a cross-platform app then you look at Maui and there is some guidance here from Blazer to Maui because it's from WPF to mavic it's not you know Apples to Apples most of your c-sharp is reusable most of your xaml should also be reusable as long as you understand the difference in namespaces the difference in layouts so it's going to be a little bit of manual work but it's very doable and in terms of you know UI component Suites you know our xamarin suite was very full featured the Maui Suite is already at feature parity with xamarin if not more but then the Mario Suite also caters heavily to desktop not quite as rich as WPF yet because again we have not had that many years but we are iterating on that very very quickly so any type of modern desktop or modern mobile apps that you're building hopefully it's cross-platform and my vote would be to go with Mario and see where things take you if you're migrating so take it slow take a deep breath take your time as you're migrating modernizing there are lots of strategies in place figure out the best that works for your app and your code base foreign I think that's about it Ed any final thoughts from you uh nope I think I think you covered it well Sam and we'll talk a little bit more about the Upgrade Assistant in our webinar next week on September 13th um but uh you know Maui looks super interesting and it's got a lot of a lot of inroads to uh check it out and migrate apps to it yep absolutely so um in the chat room John was asking for the GitHub repo which I'm guessing is my GitHub repo uh so I can I can post that as a comment to everybody yeah uh so that's just my GitHub repo so some of the code that I showed you should be up there so you can you know go check it out uh for the Upgrade Assistant they also have you know sample projects that you can try to upgrade on your own uh like a sample xamarin forms or WPF project and you can see how that's working out and then you try doing your own all right folks so it's been a few hours um for me it's been you know starting up early East Coast time uh and it's well past my lunch time now so I'm getting hungry I will go eat my lunch and hopefully wherever you are at you can go have lunch or a late supper if you're in Europe or other parts of the world uh yeah um thank you so much for hanging out with us chat room has been busy and Ed's been very good at answering things so Ed I want to thank you for spending four hours of your day with me uh something you completely didn't have to but I'll be lonely just just by myself it'll get lonely yeah some good comments here all the way through from Dennis and John and everybody else we appreciate your time a lot and again if you missed much of this all of this will be recorded we'll put this up so have fun take your time with migrations it's good to have choices until sometimes we have too much of choice and then we get confused but you know figuring out the right stack that works for you in terms of your UI hopefully you see that we are here to help you be more productive however you want to render generic UI for blazer for Maui for WPF or informs we have you covered and we are here for you so have fun um and good luck with your projects and I think that's about it for us for this Workshop we'll see you around on the next one thank you bye-bye all right thanks folks bye for now

Channel: Progress Telerik

Views: 737

Keywords: Telerik, dotnet, workshop, dotnetmaui, .net maui, dotnet maui, dotnet maui tutorial, dotnet maui blazor, .net blazor, blazor ui, blazorwebview, webview, blazor native apps, blazor hybrid, blazor maui tutorial, blazor maui app, dotnet maui workshop, blazor for beginners, blazor tutorial, dotnet maui ios

Id: Tt2hk2fZtqU

Length: 227min 31sec (13651 seconds)

Published: Tue Sep 12 2023