XAML tools in Visual Studio | .NET MAUI Minutes

[Music] [Applause] hi everybody welcome back to net Maui minutes a new series where we're going to Deep dive into some basic net Maui topics for just a few minutes I'm matd monila I'm on the Maui team and today we're going to look at some of my favorite tips and tricks for working with zaml in visual studio so I'm going to flip into my code I'm going to F5 or start to bugging or click the little play button um the file new Maui app here on my Windows machine and right off the bat you get this thing called the inapp toolbar and you get this when you deploy to Windows um you don't get it on Android and iOS and I'll show you what you can use instead and it gives you a bunch of different options here such as selecting elements and displaying layout adorners so if I click that layout adorner button and then I select an element it shows me where all of the lines in the bounding box basically for that element is um and you can highlight basically over anything in the app so any string or button or image whatever it is is now this is awesome and all but sometimes I want to see this in the IDE and not have to flip back and forth between the app and my um my visual studio so I'm going to click this little video button that says show in zaml live preview and what that does is it opens the zaml live preview window here so some tips here if you don't want to open it that way you can go to debug Windows ZL live preview right here and then you're going to want to make sure it's pinned so that when you type stays open with Zol live preview I can scroll in um and I can see actually just the the actual physical size in pixels that these things are rendered at so for example this image is 161.5 X 200 and if I click on the image it's not an interactable interactional version of the app it's just a preview so it takes me to where in the source code it's defined so you can see this is where that image is defined this is really helpful if you're working on um an app with like a lot of custom controls that may not be all defined in the same file and you're trying to figure out where you need to make edits another cool thing about live preview is you can add rulers and add them to like how far in the app you want it to go so if I wanted to try and align everything with let's say like my ruler at 306 um I can put it here and then start to actually edit my code and start for example let's change the hello world to be left Justified so start um and it moves it immediately using zaml hot reload so as I type I get live feedback as to what I'm doing um and I can try and line it up uh I could go ahead I could change like the font color for example make it purple per I can't type but I can make a purple um all these things are going to get changed as I'm running the app I can remove my rulers and then on top of this I can actually see how my app is laid out so if I click on this here and I open on the left side this live visual tree and I'm going to pin this again so my text will get really small but it's okay I can actually see a visual hierarchy of how my app is laid out to the rendering engine so Maui apppp 1. exe it's a Windows app um it's got an app it's defined in the app shell which is how we Define navigation I'm on the main page in that main page there's a view that Scrolls and in that scroll view is an image two labels and a button and the label that I'm editing is this one right here which is highlighted now let's say I wanted to find the label right under that label I could click on the two little arrows next to it and it would take me to that label defined in the zaml and just like the other one I can go ahead and start editing it um with saml hot reload and make the font bigger here too and super simple so those are my tools that I like to use when I am editing my zaml in Visual Studio it really helps me just find my way around a new code base or figure out why something doesn't look right when I think it should look right and then I can tweak it from there um so the live review the live visual tree and of course zaml hot reload all have great documentation that will link in the show notes and you can check those out hope to see you at another net Maui [Music] [Applause] minutes

Channel: dotnet

Views: 5,517

Keywords: .NET

Id: nQ34SsFVIp4

Length: 4min 18sec (258 seconds)

Published: Thu Dec 07 2023