MAUI Xaml vs MAUI Blazor: The .NET Show with Carl Franklin Ep 12

hi i'm carl franklin so you want to write a maui app maui lets you write an application once and run it on windows on a mac desktop on iphones and ipads and on android devices great but now you have another choice do you want to write your ui markup using maui xaml which is based on xamarin forms xaml or do you want to write it using the blazer component model that's right you can write maui apps using blazer and everything that comes with it surely there are differences in the final product right surely there are things that one can do that the other can't right these are the questions i'll attempt to answer coming right up on the dot net show okay i've installed a brand new uh visual studio 2022 preview in a brand new azure vm and if you want to know how i did that go see episode 11 build maui apps in an azure vm i've passed through my phone so you can see my samsung is my local phone and through this usb for remote desktop application i'm able to pass that through so we're going to create two projects one is going to be a maui blazer application and the other is going to be a maui xaml application and we're just going to compare and contrast okay and i know you know i'm a blazer guy but i've done xamarin forms for years and years and years so so i'm going to try to be completely neutral and just give you the facts you decide for yourself what you want to do so the first one will be a blazer project so you can see here if i select maui over here i have three options a.net maui app which is using xaml a.net maui blazer app which is using blazer and then a.net maui class library which is just code so we're going to select netmaui blazer and i'm going to call this maui blazer demo so we're going to start off by using windows when ui in order to do that you have to go into the project file cs proj file and uncomment the second line here this second line gives you access to the windows platform okay now i'm going to go up to the top here and select windows as the framework and you can see ios is selected right now so we're going to select net 60 windows 10. see that right there now right out of the bat i can just run this and we'll get a little windows application up and running here we got the counter page we got fetch data you know it's the blazer template but in a windows app okay now i'm going to remove everything that i don't want let's start with maui program so if this was a blazer application in dot net 5 you'd see a startup or program if it's dot net 6 you'd see program but it's the same kind of deal you get the the builder and you can add services with the builder we don't need weather forecast service we're gonna take that out we're also gonna take out maui blazer demo data and in fact that whole data folder now i'll go to my pages i'm going to delete counter and fetch data because i don't want them in my project and i'm going to go to shared and get rid of survey prompt and the nav menu and in the main layout i'm going to just simply do this okay i've got a single div i put a padding of 50 pixels around it and we get the body everything is in there okay now let's go to index and take it over now you can probably see what i'm up to here by just looking at this for a minute i've got a button when i click it it calls do stuff and it's a time test and what i'm doing is i'm setting the start time from now going into a loop and incrementing a value all the way up to the maximum value of an integer so this should take a bit of time i want to see how much time it takes when we're done i'll get the current time and i'll subtract the start time from the end time get the total milliseconds to a string and then append ms and that goes into a message which as you can see it's defined here and is displayed in a div so let's see how long it takes a maui blazer application to iterate through this loop here we go now you'll notice that i'm trying to move things around i can't do anything because it's in a tight loop right but we have a result about 4 seconds 4.165 seconds i wonder if it's any faster the second time slightly but not enough to care still about 4.1 4.2 seconds all right let's leave this for the time being and let's go create a net maui xaml app all right so this is just going to be a.net maui app and i'm going to call this maui xaml demo all right we're going to give this the same treatment i want a windows application so i double click on the project i'm going to uncomment the second line and i'm going to select windows as my target framework and i'm going to run it all right so this is what the default uh xaml app looks like welcome to net multi-platform app ui maui and we got a little clicker and all that stuff so that's fine but i don't like all this purple let's get rid of it to do that we go to app xaml because this is where the colors are set in the resource dictionary now app xaml isn't like app in a blazer application this is uh in a xaml application or you know traditionally in a xamarin forms application this is where you put styles and other resources so we've got the primary and secondary color the primary is like a purple and i don't want any of that so i'm going to replace this whole thing now my primary color is black secondary is white and i've changed the background color of a button from that stupid purple to light gray now let's see what it looks like much better now the only thing that's purple is this dot net martian guy here i don't know what that is so let's go to main page and this is where all this stuff that we just saw is defined labels and buttons and an image and let's just replace that all right so you see here i've got a stack layout with a margin 50 that should give me the same margin as the maui blazer app if you remember in the main layout we've got a padding of 50 pixels so we're trying to keep it somewhat similar and i've got the label that says maui xaml demo the button that says time test and when i click it it's going to call a method called do stuff it's actually a button click handler and then i have the message down at the bottom so let's change the code behind to support this all right for some reason uh visual studio doesn't like initialize component but it does compile and it does run so i'm not worried about it it's probably just a preview thing then look at this this stop binding context equals this this is a little shortcut so that i can just use my code behind as the data context the binding context for the xaml so therefore i can have my message property just with a getter and a setter now here's my do stuff notice that i have to have this signature here object sender event args e because that's what a click handler is but it's the same code start time go through to max value end time subtract and then i also have to do this here base dot on property change message and later on once i refactor this i'm going to have an explicit getter and setter and in the setter i'll call on property change so anytime we just set message it will call on property changed and everybody be happy so let's run it okay so pretty close numbers right just for a real comparison let's run the other one so 4264 over here 4170 over here it's pretty close let's try them a second time 4296 and 4297 so i'm going to call that a draw so we don't really seem to have any pure code in a loop issues with speed but as long as i have both of these up here let's see what's really going on under the hood i'm going to pull up the task manager and we're going to look at these two maui xaml demo has just one executable and it's taking 53.7 megabytes maui blazer demo has an executable and has a whole bunch of microsoft edge web view controls right and it takes twice as much memory so why is that well it's because this one is a complete native application and this guy the blazer one is a hybrid application right so there's a native shell and then all the blazer stuff is done with web views just like a cordova application or any kind of hybrid application different than a pwa pwa is a pure browser implementation pure html so this has that shim which is about the same size as this one but then on top of that you've got all these web views so just be aware of that it's going to take more memory if you use blazer so the next thing i want to do is make this asynchronous in other words i want to be able to tell the user hey hold on while we do this calculation and then show the result so let's start with blazer so we have the same do stuff but now instead of void it's async task and i'll change the message to calculating and update that i have to do this little trick first of all i have to invoke status changed and then i actually have to wait about 10 milliseconds seems to do the trick so that the refresh can happen and then i start the timing and then i put my message out there all right let's flip over to the xaml version this is pretty close instead of state has changed i'm calling on property changed but i'm also doing that delay otherwise it's the same so let's run this and we'll run the other guy we'll run them both compare and contrast xaml demo let's run that notice i still can't move things around but at least my cursor works so wow that took uh twice as long let's see what happens on the blazer side so yeah twice as long on both of these so that's the overhead you get with async whether you're a native or hybrid all right now let's talk about doing real stuff this is a blog post by my friend james montemagno about xamarin essentials 1.7 and xamarin essentials is this huge library for xamarin forms it has been for xamarin forms and it's all sorts of things that are put together by the community to handle all these situations so he also introduces dot net maui essentials hmm what is that so if you look at the xamarin essentials documentation you can see what we have here check it out an accelerometer application actions app information the theme a barometer battery clipboard compass connectivity contacts detect shake device display information device information send email messages pick a file save files to app data a flashlight switch turn it on turn it off geocoding geolocation a gyroscope haptic feedback launcher magnetometer uh run code on the main thread open the maps application and let's continue on here there's more media picker open a browser orientation permissions a phone dialer platform extensions preferences take a screenshot securely store data send text and website links to other apps create an sms message for sending text to speech unit converters version tracking vibrate and there's a new stuff in the web authenticator which we will talk about in an upcoming show because security has been on the forefront of my mind lately and i want a good way to do this in a maui application and in the xamarin form space it wasn't all that clear and now that things are moving to maui and settling down a little bit there's stuff to talk about there wouldn't it be cool if you could do all this stuff well we're going to start with the clipboard and this allows you to read and write to the clipboard can we do it in blazer yeah you bet we can so i'm going to open my underscore imports razer and maui essentials which is essentially the xamarin essentials code base but for maui it's already there it's in the box so all i have to do is say using microsoft.maui essentials and now i can create a clipboard object and write to it so we're going to add a method here copy time to clipboard we've set the message the current time is blah blah blah and then we just await clipboard dot set text async passing the message and it sets it to the clipboard now we need a button for that and there you go let's watch it in action all right look at that the current time is blah blah blah 146.44 let's pull up notepad and paste all right let's do the same thing in the xaml side so again we need that routine copy time to clipboard it's pretty much the same except that we have to call the property changed and let's go over to the main page xaml and add the copy to clipboard button so i've got my copy time to clipboard which is that method i just pasted in there uh we've got our text and a margin some horizontal options yeah all right let's give it a shot all right how about that now you may have noticed in the code microsoft maui essentials the using statement is already there it's just there so use it for the next feature let's start on the blazer side because it's really easy what i want to do is i want a check box and a and the check box is going to toggle whether or not the clipboard button is blue or red so this button right here is going to be either blue background or red background in the case of blazer we can achieve that with a class just btn-primary or btn-danger so let's do that so at the top i've got a check box i'm binding the value to a boolean alert switch property right there now if we go down to the button the copy time to clipboard button i've got a class equals button class and this is a read-only property and if alert switch is true i'm going to return btn space btn-danger otherwise primary so this is right out of bootstrap bootstrap has these classes for buttons danger is red primary is blue so essentially when alert switch is true it's going to be red when alert switch is false it's going to be blue everything else is the same let's see what happens all right it's blue when i click toggle alert it's red blue red still works even though it's red or blue doesn't matter all we did was change the class that's pretty easy right i think so all right let's try the xaml side now how do you think we should do this let's try something just by using the button itself copy time to clipboard let's set the button's background color to red right in here it's already there we don't have to have another button let's go over here and i'm going to give it my button a name copy the clipboard button and so right in here you might expect i could just say copy to clipboard button dot background color equals colors red now of course we need to qualify that microsoft maui graphics is a brand new in preview 9 for maui namespace in which they've abstracted the colors away from the platforms and i'm just going to make this public i'll see what happens now nothing i mean the button click still works but it didn't set it well can i do like an on property changed copy to clipboard button background color let's see if that works no there doesn't seem to be a way to directly do this and there isn't now there's a couple of ways i can achieve this the first thing i saw was in preview 9 they've got this border control so check it out you can put a border around any layout or control to add borders and independent control of each corner and also you get background right so i wonder if i set the background of the border to red or blue and then the button itself i set the background color to transparent huh i wonder if that would work let's try it alright so a couple of big changes here one i've got my local namespace because i need to reach inside the application and so local is going to be my namespace for local stuff and i need a converter a bool to brush converter in xaml when you have something like a boolean and you want to return something like a brush based on the boolean value that's what the converter does and we'll make that but you can see that the border background is bound to alert switch which is the boolean and i'm passing it through this converter bool to brush converter now the background color of the button is transparent all right so let's add that bool to brush converter so in order to create a converter you just have to implement the i value converter interface which has a convert and a convert back i'm not interested in converting back just taking a boolean returning a brush so i've got my red brush and blue brush their solid color brushes and i convert the value that comes in to a boolean and if it's true i return the red brush and if it's false i return the blue brush all right now we have to change this as well so i've got my alert switch now as a boolean property because we didn't have that before and i've also expanded the message property to have the on property changed right there in the setter as the alert switch also has it so that means i can just set message up here and down here and i don't have to do the property change bit all right but this is the main deal right here i've added this alert switch boolean so let's give this a shot hey that seems to work that's pretty cool i like new and shiny stuff yeah but guess what let's see if it works on android so i'm going to switch this to android well what do we see i see white text on a white background and i still see all white and it's because that transparent color doesn't work on android the button still works and the clipboard works but that transparent color doesn't work so we got to try something else so i stumbled on this blog post customize controls with handlers from october 25th and it basically says that the new maui way to do native code is with a handler so a handler is think of it like an event handler right it's a handler anytime somebody sets the background color let's say of a control this handler gets control and then you can use native code with a if statement let me find a good one here you go so this is looking for a background color and if it's android we're going to use this code if it's ios we're going to use this code and windows use that code because they're a little bit different this one we're calling set background color this one we're actually setting the property and the border style and this one we're setting the background so i'm going to just take this code right here paste it into our app partial class and let's see what happens that would be right here okay well we have some errors here don't we first of all this isn't grayed out meaning that it doesn't understand what this is what i came up with we're going to use the button handler and for background color anytime that an element or a views background color is set this is going to fire and we get the h for the handler and v for the view and i'm checking to see if the view is a button and if it is i'm casting it to a button getting the background color and if it's android i'm using some reflection to get the method set background color and then invoking that with color.two native color i got from here and you have to get the native version of that and if it's windows i'm using reflection to get the background color property and if that's not null i'm calling set value on that native view to color native now that this is in place we just need to be able to change the background color of the button based on that checkbox so we're going to use you got it another converter this one's for real this is going to be rather than a bool to brush converter it's going to be a bool to color converter so this one is returning colors red if the boolean is true color is blue if it's false so here we have our button the name is clipboard button i guess we don't really need the name in the background color we've bound to alert switch using the bool to color converter so rather than the background of a border we're just go ahead and changing the background color based on alert switch and we still have our alert switch up here tell you what let's run it in windows first and that works and just to show you that we have to use this code right here i'm just going to go ahead and comment it out and run it again see not working that handler is absolutely essential oh we're changing the background color all right but it's not actually taking all right now let's go back to android all right well that looks better we have a blue button and yeah the button still works all right let's hit the toggle yeah all right see takes a little extra work because you have to write native code i wonder if our blazer app works on android let's try it alright well here it is let's toggle the color sure looks like it works to me so why did the blazer app work on android and we had all sorts of trouble with the xaml app well remember the xaml app is a native app whereas this is in a browser essentially you know a web page is a web page as a webpage the browser is essentially the cross-platform application they've already done the hard work to figure out how to show button colors on every platform and blazer is leveraging that whereas in the xaml application we have to write all that stuff for each platform differently because we're right down there on the metal i hope this was a good introduction to uh maui and the differences between writing in blazer and writing in xaml there are trade-offs they're pros and cons of each approach i'm not gonna tell you which one i like best but you can probably guess hey thanks for watching see you next time thanks for watching please visit blazertrain.com and the.netshow.com for more great content [Music] you

Channel: DevExpress

Views: 3,341

Keywords: Developer Express, DevExpress, Visual Studio, C#, VB.NET, Microsoft Development, Software Developer

Id: YG_Vc2oJdLM

Length: 31min 51sec (1911 seconds)

Published: Tue Nov 02 2021