On .NET Live - Building great WinUI 3 apps with WinUIEx

[Music] the [Music] [Music] e d [Music] [Music] [Music] [Music] e [Music] [Music] n and welcome to 60 Minutes of unscripted.com community to achieve more I'm your host cam soer with co-host David Pine and we would like to welcome today's guest Morton neelson Morton can you please tell us a little bit about yourself sure thanks yeah um I can do that um yeah um I've been the net developer since gosh the very first beta of done net one one of my friends needed help and we shipped a website on on the beta 2 in production so that kind of got me hooked and I've been doing donet ever since um day today I I work at a software company called SRI where we build G software um I specifically work on a product for building um mapping components for you know WPF wiui Maui WP and so just providing various apis for doing routing and data calculation offline maps and of course map renderings and 2D and 3D and those kind of things um yeah that's kind of what I do day today cool so you you mentioned when UI and all that I think that is that has something to do with what you're going to be talking about today is that right that is right yes um yeah so um I have we we also support wiui and and and through that I've been working a lot with it um and kind of often found there are certain things that I needed to do and end up writing the same code over and over again and it's like no why would be easy just to put this in a library and maybe other people can use it and kind of grow from there now let me ask you a little bit real quick I'm mostly a web developer web and iot um so what what's the story with I I I am like very Loosely dialed in to to like Windows desktop like different programming models and I you know I hear Maui and I hear wi UI and I hear avalonia and I hear all these different names and and I'm just like okay that's just Windows desktop stuff I don't care what help me differentiate here what what is wheni as as opposed to the other right well great it's a great question Ian also in the name like it's Windows UI framework so it's for building your your your U but but you're right there's a lot of options there's Wind forms which is gosh over 20 years old now um still going strong there's WPF which was sort of like more where Sam got introduced um there is um WP that came around for building store apps and it was sort of a new Evolution of um of of sort of the SLE flavor there they they did a lot of Innovations um some things kind of disappeared but then other things we got that that s sort of fix some of the problems with LPF um but it also ran in the sandbox and I think for a lot of people the sandbox uh was little barrier um and the whole app model was was different um so at some point what they what Microsoft decided to do was take that WP UI framework and sort of like pull it out and make it just build with just pure. netp was kind of running its own version of net um and Bill is the standard win32 app outside of the sandbox and so it's sort of text all the best things of WP and pulls it out and and separates it from that sandbox and um that's sort of what win UI is um it was recently open sourced um so now we can debug the source code too um and so think of just like a new Evolution of WPF um and yeah sort of what that is um you mentioned Maui Maui actually is just a rapper that sits on top of wiui so when you build Maui apps you're actually building wiui apps if you run them on Windows interesting good to know good to know so I understand you have some things to show us uh what supposed to show something yeah sure yeah we can do that um yeah um so let's just talk about it so what I have is like I build this extension Library um I call it wiui ex or wii3 extensions um and it's especially just the things that sort of like tries to fill some sort of gaps in um in that that something you like WPF developer orp developer or Wind forms developer certain things you expect that might not be there today um that I then try to sort of price some of those apis um just switch side here we already went over with this I you already asked me that so let's skip over it so why did I build it right um when you're working with wiui sometimes think well why can't I do this why can't I do that where is the API for doing something that was might been simil and when 3 is still still sort of growing a lot of those gaps are still being filled in and what I kind of said I to do is what I need to do certain operations let me just write a little piece of code that does that and then put it in the library and that's sort of how it started growing um a lot of people found that useful so I just kind of kept going that way um and sort of like um as um whenu I3 is um as wii3 is sort of catching up um I remove those features from wiui so there's been a few examples of that where um I build some kind of functionality then a new release goes out when I3 and then I deprecate my feature and the next major version I I'll just remove that and I'll show you few examples of how that has happened so as wiu I3 is growing hopefully over time wiu ex will kind of shrink um that's sort of the goal um that we don't use it in the future so is it kind of like a poly fill essentially sort of yeah you could say okay okay um and so some of the main things and where it kind of a started was just window Windows management like how do I set the size of my window and place it in a certain place or maximize minimize it was sort of tricky to do before um so this makes it a lot easier ump had this web authentication broker that's not there and wiui or sorry P had but wi ui3 does not um and so um I provided some e apis for kind of make that whole process if you want to do authentication um there's a lot of custom backdrops like you're probably familiar with like acrylic and um mic backr it gives this kind of Ni Shri apps but you can actually do custom on so I provide some apis for making it easier we'll show that and just dealing with raw Windows when 32 messages you want to deal with that it makes it a little easier to do as well it's easier I guess it can um and a setad of code analyzers to just kind of make your your life a little easier and help you guide you than you're working with when you're at three um just as an example um at some point like for instance there was no immediate player element in when ui3 so I spent the time and fig how does this work and I pretty much copied API for API inp and figured out how to get um a media player control build um so you could play videos um and then in I believe it was one. two of Wii 3 they released media play element so I duplicated mine and removed it um there's other things like little helpers like getting access to what call an app window we'll cover that in a little bit um that property wasn't there it was kind of an O code to get at it um but but again I provided a helper for it now you don't need that helper anymore it's build in and there's various other things that like simple simplifying using of backdrops and various DPI handling that wasn't there in the early releases um I've since removed those so so it seems like I mean this is a great effort and we've got a question that's kind of related so I want to touch on this before we get much further um Jose's asking uh is the zaml language from wiui much different from WPF so like if WPF for example had a media player element um and you introduced one with your extension library and you said you matched it API for API but then when ui3 comes along or 1 point2 comes along and they add it like are there examl differences or what does that really look like right well so they're not identical um but they are probably 99% identical um there's a little bit difference in for instance how you declare the name spaces I actually like a lot better how they do it in wiui um where it's just by namespace kind of like you do in your header of your C code where in WPF um it's often by like ass simply name and Nam space a little more specific um and often um means you have to include much more name spaces in your XML or your sample um so that's been cleaned up a little bit um there are some features in WPF that are not there in wiui and vice versa there are some features in wiui that I really wish wpet had like being a be able to override a small part of a style but I have to restyle the entire controls they really improved so there's a lot of like sort of incremental improvements um but there also some differences and also a few features that us a WPF developer wish you had in in wiui but it really goes both ways they both have their strength and weaknesses so if you've done WPF working with in eyes is you're going to pick that up right away it's it's almost identical and things are called the same thing generally um I can't remember if the play element is exactly like that in WPF but sure yeah awesome we do have another question from YouTube Alex is asking uh you mentioned like the wi UI was open source is it MIT or is it just like Source available uh I can't remember what the exact license is um it's Source available you can't compile it um but it's good enough for you so that they have symbols that points to that source code so you can actually debu the source code too um okay unfortunately not yet at this point it's it's not it's just available it's not compilable okay yeah awesome this extension library though fully open source love that right um anyway so in wiui typically you have this thing called an app window it is not to be confused with the window itself the window has a property called app window and that is where you you stop u a lot of things um you stop a lot of the things like um controlling the size of the window maximizing minimizing um um you're laughing I don't know why this dialog keeps coming up anyway yeah so that that's sort of like the the API you have to work with but it's also a little complicated and and so what I'm trying to do is is sort of like make that a little simpler um but I don't want to show more slides i' rather do this in code um so let's just create a new project we'll just do from scratch here I do a blank app I have all the temp when you I installed here so so using visual studio this is just a naive question to help our viewers who are watching here that might not be too familiar with when UI or Windows development at all um so you're using visual studio is there any workloads specific that I would need for these uh templates to light up yes um to get the template there's actually a specific checkbox in in Visual Studio that you have to check I don't know why it's not on by default yet um I think there's an issue for that let me just pull this up we have time um so if you go in and modify your [Music] solution under desktop development here no optional let's be somewhere Windows app is the cas C templates is what you want this one okay um I don't know why it's not there by default when you have the desktop workload but you have to turn it on and then you get these three templates right here that you see okay um I'm just going to pick the first one I'm going to create my amazing app 41 41 that's a true sign of someone that does exemplary Cod oh no I cleaned up I was I was getting into the hundreds at some point like I should clean this up um yeah uh that that kind of when you when you build a lot of sample apps over time it it that grows a lot well and then I've started naming them things like temp but then they end up being temp one temp two temp three I just go the default names now I just get um that's sort of how I know it's not an important app when it's just called app number um right okay yeah yeah yeah anyway just to really quick here have your the default sample and for those who have done WPF you might see that it just has this new using syntax um which is a little different than WF um but other than that you probably F stack panels and buttons and you click that it does some code um and one thing that you probably might want to do is whatever I want to do do something like this maximize this seems like an obvious thing I want to maximize the window but it doesn't exist kind of weird oh right or maybe I want to withth 800 something like that height again there's no withd and height probes which is a little weird to not having it on a window um yeah I would have expected those to be there right um so the way we do that the equivalent is it's a little bit weird so I mentioned it's app window so say if this. app window is is an overla presenter and so windows can have different kinds of presenters there's a full screen spender full screen presenter there is a compact mode but typically overlap just means like a normal windows then we can say prenter okay I'm sure oh sorry hold on um so typically that's how you do it and similar thing you would do here this AB window. resize so if you want to set my size so you can all be done so and and when I started this project app window property wasn't even a property on the window itself it was something you had to write some kind of weird com import to get ated to be able to get these things they've improved that over time this is triggering me a little bit because I've always been like a a nit picker when it comes to this do like when it's redundant like it just bothers me yeah we'll fix it we'll fix it okay but there's actually a big problem here that you might not realize with this piece of code this is not going to work the way you think it's going to work on all the different devices um and the giveaway here is that we're actually dealing with an integer value and when we're dealing with sizes of something in integer we know we're talking about physical pixels like the actual physical pixels on your screen right but if I'm on my Surface laptop Studio 3 one what we normally call a pixel is actually I believe three pixels if you're scaling Factor set to three sure right so what you really want to do is you want to go to this content Sout there's like a rization scale so let's assign that and then we have to go on M Supply this and when you're sitting and deing on your big monitor at home this might be a normal scale effect you probably not even notice this isue so we have to go and do stuff like this so what we're actually doing now is we're saying the 800 and 600 what we call device independent pixels but we have to convert it to the physical pixels and that's basically how it's done again it's not really ideal um the app window doesn't really understand that's part of the underlying framework so you kind of have to deal with that and there some of the things that getting triggered by like can I make this easier and and so why don't we just pull in maybe another Library package reference we're going and include gu it ex and we're going to have 2 three4 it sounds made up but that is actually verion um and don't try that at home right the package reference by hand typically you'll want to use new get package manager yeah I guess if you're a zaml developer right you're used to editing XML type things by hand I would still be in the dialogue right now trying to find and add it that's a valid point that's a valid yeah no yeah you're right I could I could go in here and right click and let go in this slow way and just find it in here if you know exactly what it is right right but sometimes you need to search me I use the net CLI so or that yeah that works too um I mean you could just put star in here if you want the latest right so you can't remember the version number yeah yeah anyway I've took the shortcut so now I'm just go in here and add a using and what this does is that should give me access to any extension methods that might live in here so now we can just say this do maximize Bo that's nice and again this just an extension method so if you hover on it it will show extension um and again it has a little comment that that prenter I talked about that this really only implies if your overlap presenter if you're a maxim maximized prenter full screen prenter then makes sense to not maximize that um in this case this call just be ignored same thing precising um we don't really have extension properties um but what we didn't what I have introduced is something called a window manager um and so I can can say um manager. get those will give this manager for you manager has I think it's the side on here what's it doing I think intellic just messed me up oh here hi so I can set here and if you notice this oh thank you co-pilot um we have doubles values here and so again because we're not dealing with fractional values that tells you we're not dealing with Device independent and all this scaling Factor stuff that we have to write we don't have to worry about anymore um so that just kind of simplifies the and there's a bunch of other things on the manager I'll get back to um but we can also use a different Base Class so um when I first started this um I started with creating a new type a window um and it's going to be mad at me because while while while you're typing that up we actually do have a question that's kind of related to this so Alex from YouTube's asking attached properties for example should also be possible no yes you can do it attach property um the little funny thing is the window itself that I just highlighted here the window is not what's called dependency object so you cannot attach things to it you can attach things to this stack panel but not the window itself so that's a big difference between it's a WPF and and wiui is that the window itself is not dependance means you can't buy and you can't do attach propes and those kind of things so would it be possible to do would it be possible though to like bind uh I guess that wouldn't work because you don't have access to it I was going to say like to attach a property for your window manager to the window itself um no again because yeah because this is not a dependency optic that's the thing you can't do I'm not sure why that difference was made um but it is what it is and and so um kind of do it a different way anyway I just changed the base type here to match my window um so I really don't need the window manager anymore um I don't need this because now I can just go here and say with so now I get properties directly on my window I could have done this in COD behind of course as well um and maximizes doesn't have to um it's still there you can it's a bunch of other prods not I do this. minwidth for instance minwidth is the thing that's not there 400 that and so if I run this app now I should get my app at a certain size with a minimum height and width um again these are not properties that exists in um in wiui themselves but this extension class provides it so now if I I can't get it smaller than that 800 or that 400 by 400 and click me maximizes all works that's awesome yeah um and really this minwidth if you go and look at it it actually just has an its own manager so everything you can do with this window extension class you can do with the window manager as well um and when I first built this uh I just buil it as a Windows extension and people are like you know like I have my own window classes I don't want to change my base class to your base class or I'm using Maui and Maui has his own Maui window so how how do I how do I add this functionality to my Windows without using yours and that's sort of how that manager came about and so I generally now mainly use the window manager just to kind of set all those things up that makes sense so it's like your inter meded or like between the right so anyone else consuming or has their own custom window they can just use your manager and then you can add features to and from your manager I like that um another thing you notice every time I launch this app you guys probably done this like you're even if you're web developer you might want to move your browser over here move this over here so you can kind of see side by side what's happening right and you shut your app down and it's like oh let me do this again and oh I have to move it over here again every single time it kind of gets annoying yes but it's but it's also sort of a user feature if I open Dev home for instance um and I do that I move it over here close it it does remember so why can't I do that right that would be nice it's a nice user feature but it's also nice in my Dev Loop to not Conant have to do that and so we have this thing called a persistance ID and just give some kind of idea that relates to a specific window you want to you want to use and so now when I do it want to do it come on wait for it wait for it for it and I move this over here because this is where I wanted while I'm testing and I launch my app again even though I set my height to 800600 it's still like it sort of like remembers your your your last position um and it works across multiple windows if you monitor the layout or sudden to change like you unpluged the monitor then it wouldn't make sense to put it on that monitor then it just kind of resets so it it always checks that your monitor layer hasn't changed so make sure your window doesn't get off where you can't see it this is bringing back memories cuz I mean probably close to decade ago I was doing Wind forms development and I recall trying to do this sort of thing with like the settings and like you know the window location would change and then I'd have to update it and then if it was ever opening up again I'd have to do it so all you have to do is just literally set this persistence ID and it just does it for you right I'm I'm curious as a as a web person who doesn't really know a lot about uh you know desktop is Windows handling that based on that persistence ID or or is that something no this is all code in wiui or the extension Library the extension Library manages all the app it tracks that the window like it stores every time it changes it sort of stores that in the persistance area and then every time the window loads it checks well do I have any persistance location for it let me make sure the monor layout is right if it's the same as last time then I'll move the window to that size and location yeah so Paul's actually asking does it remember the window position when published or is that just for debugging no also when published yeah yeah um funny enough if you want to know how Dev home does it um they do it the same way and they actually use that Windows extension class so Dev home for inst is an example of using menu ex oh no way that's awesome yeah Power Tools the there's like a bunch of templates um um tools as well has this like sort of built in by default so you you you kind of see it us it in in a few places so a lot of people have picked it up which I'm of course happy about yeah um yeah and again just real quick and I go through the details it just uses the manager on the cover so you can do this without changing your classes so I could have done this with the window manager as well that's awesome so do you anticipate that when UI will ever pick up some of these features like this and then make make something as useful as that like kind of obsolete from your extension Library I hope so that's sort of the goal when I said out was like this is a temporary thing it will probably be dead a year from now when they catch up they they moved a little slower I've been focused on some other things sure than I expected so there's been plenty of things I've already had to remove and decate um but I think something like Min white Min Min width and height or Max that's also Max width and height those are pretty obvious things that I'm sure we'll see and they're they're feature request for them awesome the persistance ID part I don't know I haven't seen any other UI frame ases built in on Windows um I think it's pretty neat and maybe something to consider um it's just so common though like it's like I literally when you were doing that I was like I remember writing code to do this years ago like it should I shouldn't have to write code for something so so common and it was surprisingly tricky to get done the right way and get injected at the right point in time where window is is deciding to open the window and make sure that you in check and and then I unplucked the Monitor and suddenly I couldn't see my window because he was trying to put it on the monitor that wasn't even there anymore right I oh I got to deal with that too and so there a lot of things and and just having other people use this has given me a lot of good feedback and so I kind of been able to iterate on it and there's been other Windows systems that just acted slightly different and so I had to tweak for that that I couldn't even reproduce but the community has been really helpful and kind of help debuging understand why it's different on their machine and get these things like figured out that's awesome yeah which things I probably wouldn't never noticed if I just build it for myself right right right yeah I I definitely remember the display thing like like one monitor versus two monitors and how to that's interesting um we do have another question we got actually some more questions coming in this one's from Jose so could you talk about changing from x86 to arm development oh I'm not sure if that pertains directly to what we are covering specifically right now all I have to do is click this drop down and that's pretty much it no that's it that's it I'm sure that's the question but arm is fully supported um R 64 so I think one thing that's really different from for inst WPF and wiui is wiui is all the way through and through C++ it's WR C++ you have to run archit there's no such thing as an anycpu deployment um you have to pick an architecture when I'm writing this with net against it it's actually projection between these it's called winner T apis into c um and so I'm really accessing a purely native Library when I'm working with wiui and so you kind of have to pick an architecture where in WPF you going to pick npu for instance ah okay awesome but yeah it's just one click away any let me run this app again let me make a quick little change here um another thing that you can typically do and this was something when you I provided early on cuz it was a lot of weird code to right um it's like these backdrops um and they provide simplified a since so mine is been deprecated um so if I click this I get kind of like it's maybe hard to see but there's a little bit of like a different like gradient to it I saw that yeah yeah you can do acrylic um I love how reload sometimes right oh nice and now it's kind of like semi transparent a little bit kind of make it out um but there there's more um so vui provides some more um so there's a transparent T don't do this but it's kind of fun um a proper transparent window oh God I I don't sure why you would but there are specific cases where you just turn off the border and the title bar and you have like more of a splash screen effect like while the app is launching um um but we can of course also just kind of give it um tip color so something like red that that and so let we get more of a kind of reddish that's awesome I'm not I'm not sure why you would but it's kind of cool um well I mean that's something I I think that's just uh now we're showing off to some of the web developers that are limited by the browser underneath that cannot do this sort of thing I like that well let take a little further um so I also provide an API for just kind of simplifying custom brushes we're using windows's composition apis and they're a little more advanced apis and they have a few for instance a host backdrop takes samples from the background and kind of blurs it um and so if I use this instead there refresh that so that's it's a little bit like acrylic but it's much more blurred and a little more SE yeah it's a neat effect this one I kind of like that one is really cool right um let's so you said for so is that recalculating and painting every single time so like it's it's going over it's detecting where what's behind it and then you said sampling that and then yes and it it runs very high performant on uh windows's composition level um let's just take a little further I'll show you so here's a little more advanced brush um see what this does so it creates this on the compositor creates this color brush with an animation with some linear eing and then each key frame is red green blue back to red and we interpolate over few second seconds and just keep doing it so this sort of how you make composition brushes this a kind of a low-level way of animating um very very efficient way to do it um and so let's do that one and now we get this like weird animated oh yeah yeah that's cool maybe not doing this but I could see something you want to flash it to like attract attention but let's look at the CPU usage here it's it just sits there at zero um it's probably not actually zero but it's so close up you can't even measure it yeah yeah J asking speaking of web browsers my web browser is doing stuff right now right but this one's zero nice yeah well you you are pushing your stream over the web browser right that is true that's fair enough that's probably pretty good then um so Jose's asking do these effects work with GPU or direct X they they they are right the GPU yes GPU okay awesome yeah U but but even like look at the GPU here it's that Storm still says it's at zero so right it's it's a very efficient way of doing it that's awesome that's really cool well hold on oh I the GPU was burning at about 22% what was that was the stream Cycles that's the stream that's the streaming the exact the specific app that this process was not burning the GPU but you're right I I'm using my dpu so you can see [Laughter] me yeah anyway oh um that's cool what else let's see um another thing that you've ever written UI apps is often you get something back on a background thread and you have to go back to a UI thread and yes yeah and the the most common way is do the dispatcher oh my God this is bringing back so many memories so we all know that so I don't know dispatching back to the UI thread and oh right it's fun um let's do that and let's see what happens boom you're going to like this null reference exception like that's weird why is the null reference exception well it turns out and when you ey the dispatcher is null um there are some historical reasons for that the dispatcher is um from my understanding was it was there to support some new PE scenarios but then at some point as they were kind of working through wiui 3 they decided not to support WP because you could just use WP instead there was sort no point in supporting both and it was a very youp specific thing and for desktop apps they actually to do something else um and what I then did was like this is really AO prone I am so used to writing dispatcher and then run my code and if I hit that line of code then it probably breaks um or if I'm porting yourp code or WPF code over I forget to change this and I won't realize it's wrong until I get to uh run that line of code and it goes boom and so I thought this is a great use for an analyzis so now whenu I will actually make a little notification here saying hey this will always be null and you should use the dispatcher C instead so they there's a different prity to use in whenu ey apps and if I click this it takes to the browser it talks a little bit more what to do um there is like what the code should be instead um some links to some issues that you can go and vote for if you think this is silly um and so I'll just copy that and then we should be good to go um I would like to have a code fixer at some point so if someone is good at writing code fixers I would love to take PR for that so I can just do it for you um I kind of struggle a little on that part but at least I got the analysis working and there's a few other things um have window. current is another thing um you get the same warning here saying hey this will always be null um so in the wi I3 app the current window like you had in your P might not actually make sense because there can be many windows what what what does current mean um and so again here's another thing and this talks about um maybe you want to just create a static reference to your main window so typically what I would do to get the current window what I probably really mean is my current main window or something um and I'll toally go in somewhere like here make this access this public um something like that change this around and that way I can always just go to my app maybe I want to activate it or whatever it might want to do um so that's sort of the equivalent but again um it's sort of an aor prone thing especially when you're porting code over or um you just see oh I can use this property and then you you you waste your time so it's nice to get these analyz the warnings it just gives you a saves you a little time um and I have some more down the line I what I add yeah there's some questions here then so like Alex from YouTube saying why aren't these marked as obsolete by the win UI team that is an excellent excellent question um that is really good question I'm want to go bother them now like that's well well there there you go like there's there's issues with this um some of it I think was just when this was brought up like when you keep was Dro very late close to the One release I don't think they had time to get them removed and I I am not sure when T has the concept of obsolete that you can then um get exposed to those those that c-p mapping around the winner T apis so it might be a limitation in that platform but hey you can fix it in an analyzer so I think a real question is why is the analyze not built into Wii and maybe that's something to propose um I'm more than happy for them to take this code over awesome yeah we got lots of questions continuing to come in so keep asking those our live viewers we really value this um we got another one here from Jose I'll ask I'll let cam take the one after that uh so Jose is asking can we use visual studio for arm to develop win ui3 apps and are you using arm or x86 can you use yes so the first part can you use Vis studio for arm to build when your apps yes you absolutely can um that works I've done it I have one of those little arm Windows arm devices to to run on um there's no issue there um I'm using X6 right now I probably should have used x64 it really doesn't matter um the specific machine is 64bit machine so I can't run armor on this one of course but um you can yeah you can use all of them awesome cam you want this one or you want me to do it well I I I think this viewer is asking more of an implementation question than than just something that's related directly to win uix but sure uh we've got Morton uh on hand here who writes a lot of uh when uix apps maybe maybe he has some ideas so this user this viewer is asking about how to write a program that is locked by a password um that that you know the the user has to enter a password to to use the app you know I I would think that would be something better handled by a third party utility or or something like that but I I might have something I'll be com get to in a minute let me just finish up one more little demo and I'll talk a little about authentication too awesome because I do provide some helpers for that um yeah so maybe that's the we'll cover the question um just one little thing I want to cover too I was talking about this um Windows manag if you want to go really um a lot of fun um Windows messages here if you've done when you I code um you can get access at the raw Windows messages and these are interesting um and so we have this kind of message ID which just this onine integer which is some kind of ID of a message um that is fully described in the windows API NE like your mouse was clicked or the window was dragged or resized and he has these funny W pram which used to be a word those were mentioned before yeah these these are all the raw you get the eight SN that handle on like the the handle window handle yeah yeah oh god oh these are fun um they're a little tricky to get subscribed to so again I kind of have an API for that and yeah when your ex uses these heavily so for instance the you well you're laughing it's fun yeah people are saying they're leaving they're leaving they're leaving the stream right so if I look inside the window manager I just decompiled here it's you'll actually see this is where I handle min max sizing where these weird illam track size wow it it takes some time to read the win32 doc but it's all documented and so this is how min max size is actually done it's not really code you want to write very often so I'd like to put this in this library but if there's something the library doesn't do today like you get full access to these messages and do the same thing that when your ex does or if you want change the behavior or this is how like when the positionist that he restores it detects that the window has launched at a certain point and make sure that those things can restored at the right time I uh so this is sort of the raw stream of what has happening to your window as you can get it right here I can admit that I've interacted with those messages before and I've listened to them and having written lots of wind form stuff back in the day I'm very familiar with that so that's it's awesome yeah so there's the true power it's it's it comes with a lot of responsibility as usual with power but but yeah you can do a lot down there um and it is it's can be a little painful like for how things supposed to work when certain EV fire and like what they mean but it is document once you get through it it's kind of like a it feels good when you get it working yeah awesome anyway so um let's switch gears a little bit let's switch over to Maui um I have a little Maui app here uh it's very simple app um and it's very typical workflow you do in Mau as you want to authenticate uh some Olaf URL oh but wait real quick I know that we just contact switched and for our viewers I just want to play the naive host that doesn't know what what is Maui what is this thing we're looking at now all right Maui so uh Microsoft appication UI from no something I can't remember what it stands for um but it's it's a cross platform UI framework and so if you want to build an IOS app an Android app a Windows app or a ma Catalyst app uh Tyson on your Samsung TV or something like that um you can use Maui and really all it is is an abstraction on top of the underlying UI Frameworks so on Windows that means Maui is an abstraction up top of wi UI um and so really it's just if you write a Maui text box text box which I they call an entry but it's sort of the same thing it's under the coverage creates a when UI text box and so it sort of maps things around um and it provides a lot of cross plan apis so the way you authenticate on IOS and Android is very different but the Maui one sort of abstracts that away from you so you just kind of use the same code on all the platforms um but it has one big flaw this specific API and I'll show you what happens if I run this app and this code works just fine I was Android if I run it but going trust me because I'm not going to set that up um but but if I click this little sign in button kind of goes boom with an Comm exception a Comm exception of all things yeah yeah let's look at this awesome exception it has a message of empty string not that helpful um and then you go read the doc and you go see on Maui's website and say ah it's not supported on Windows it's like well that's annoying I kind of want to ride an oos app in Windows too or Maui app and so I figured how to do that and F that's the perfect place to put this in uh in in in when yet so that's why don't we write some if Windows code here else we'll do this um so we just go here and delete this part we just replace the Nam space and that would hopefully do it and of course you don't have to do if you want to do o in a non- Mai app this API still is for you and so when you do that what it really does is pop me over to my main browser um which is cool because I'm already signed in in my browser session so that makes it kind of easy um and I can I can store my passwords over here there's no way for my app to go and see what I'm entering as passwords over here so it's a very secure way to bump into the browser um another way you often would do it is you'll have a web view inside your app but you as a user then you have no guarantee that is the app monitoring what I'm entering into this form password you don't know um and in fact on IOS and Android they have a similar experience now where it doesn't bump you out of the app but it's actually a separate process that hosts that Olaf dialogue that ensures the app won't listen in and many of the third party providers like Facebook and Google and so on they will not allow you to use a web view on IOS and Android anymore they they will detect it and they will block sign in because they want to make sure that the user has confidence in sign um so the way we do that here is we just up up main browser um and I click allow and when I do that it says hey you want to open this application and click open um I'm going to click back over here and push just a little bit of the code here I want to give you my actual sign in code away but um we could improve this a little bit could say like if Windows just a piece of code here I could do is I could actually just UI to kind of bring my window back to the front when this is done so in Maui the Maui window um has this concept of a Handler and the Handler is what Hooks up the Maui's version of some kind of UI object to the underlying native object and it's underlying native object is this platform viu which says this object but I know this is supposed to be a Maui and a Microsoft UI S window which is where we have an extension method for wiu ex and so so if I now um repeat this process and click allow and open I did not press h reload did I let's do it again click here allow open and the window pops back up and brings you concept so we can still use wi ex even though if you're Mau app that's that's actually really cool um and so Conor s of addresses this little bit of a hole in when UI and again I'm hoping that when I would provide an outof the Box ofth indicator at some point um it's not currently on the road map um but this works pretty good too so I I mean in your code that you would then write would you end up with a bunch of pre-processor directives like you have here like if Windows else or could that be encapsulated perhaps inside the consuming Library like your extension Library it could I mean that if I were to do that then I would have to take a dependency on Maui's libraries which it didn't really feel like doing um or you could abstract this all out in your own classes for a simpi approach yeah yeah but it's pretty common in Maui to sometimes doing platform specific code like this and that's sort of the powering these projects are multi-targeted Maui so it's really easy to do so you can do similar things for IOS and Android and you will find yourself quite often doing that awesome but yes you could abstract it away too um sometimes it's just you spend more time writing that abstraction just writing a quick if um and the code reads nicely it's e to say well if I'm Windows I'm doing something different so it's it's very obvious what's happening so I don't really necessarily hate this um and there's more you can do so if I go into um this is where sort of Maui is configured you set it up um and you can go and do like specific things like and when Maui creates a window um get the window manager like Center it on the screen set a persistence ID and M with height so those things that I just did in my other wiui app I can do in a Maui app too um so we can get those functionality H Co and set the a system backdrop or something like that so it's it's fully possible to do that over here too so you can extend Maui with whenu ex um and so this will just done by again adding the pack reference um but the little thing is that you're going to want to do it on Windows only because you don't really want to use Wix on I know Android because it doesn't really apply there so that's the simple way to limit that package reference to a specific platform so um that's all fully documented so if you want to find you can just Google it actually shortcutting me there but um all the source code is here if you click the link detect you to the doc site um with all the documentation there's an overview all the stuff I just showed you in Maui for instance it's documented here how to add the reference how to use Authenticator um specific stuff I just showed my ad it's all this you can find on the documentation website the custom backdrops that I showed it's all document in here um there's a fullon API reference there's a splash screen I didn't cover the splash screen but there's a sort of a splash screen that can give you kind of a load experience um hwin extens you just want to work with pure integer pointer H wins there's extensions for that as well um the whb with indicator um everything's in there we did have a question that looks to have been answered already so I'll ask it anyways they're asking is there a what you see is what you get designer for wi ui3 someone said no is there yeah that's right there's no designer in uh in inui so if we go to Sam there is not like the the design uh the visual view of it um you have the the hot reload and that's I mean Mau is going the same way it seems like the the the designer inside which just Studio has been really deemphasized um lately so I I don't see that coming um there there pros and cons with that like sometimes I like it sometimes it's just kind of annoying sometimes it's really resource intensive too like it would I remember taking forever for like the controls to load and like yeah I mean I like it for just rough guidance roughing in your design to have that Designer ins side by side to kind of see what kind of where things are going and then switch to the hot reload where you kind of like do pixel perfection because that is limited by how much sudden you make too many changes then you have to restart the app anyway so I think they both have their pros and cons um but there's there's no yeah there's no design service today um I don't know if that'll ever happen but ask Microsoft for that they they've heard it many times but tell them more I think enough people ask for it it might happen um uh there's another question here so U Claus is asking uh any new methods that make it easier to customize the title bar like if I want to create a UI similar to like the store app with search and profile and more especially in Maui it seems tricky or broken that is excellent question excellent idea um go here on issues and just just just log a new issue and and I kind of say what you're talking about I actually I've played with this idea too I don't love the title bar apis I've done some experiments I haven't come up with like a really good API it's really simplified that covers all the scenarios but if you have some specific scenarios just log them in here and I'll I'll go over them um I try to keep kind of on top of these um uh so yeah that's a great suggestion and that's uh github.com sl. do m o r t nwu yeah or just do a quick search When U ex it comes up first um real quick before we run out time here um I have the whole project here I just opened up um there's a sample app it's more of a functional app probably than a sample app but it does show you a lot of the things that I showed there's a splash screen that opens up um so it has all those different things you can kind of do for instance minimize disables you rem maximize to that disappears you can turn resize off of course play with like minum Max width so it can make it smaller increase my mwidth it will actually increase the size got Max size changes there's a whole bunch of things Center on screen hide disappears from my taskar comes back up so on um all these funcy backdrops the animated one the blurry um and just if you want to look at window messages um kind of yes we all want to look at Windows messages there you go wind Mo there's all the raw messages uh so you want to understand what's going on have fun with looking at these and understand what you can use them for um but there's a lots going on um so that was those raw messages you can look at um there are some UI tests that are kind of fun if you want to look out to the UI testing um of live apps I'm G try to run these I don't know if this come across the stream but it'll create a bunch of Windows and it'll be a lot of flickering um I do see a window the first one there we go oh yeah that's coming through yeah so that's that's one way to do unite testing um but it's just testing all these different like sizing resizing Min sizing and verification but how do you load uis and stuff like a UI test that's awesome that's really cool I have a real quick question for you Morton that that may not be directly related to when uix and you may I may already know the answer to this question because you I think I'm probably asking biased uh resource but say that I am not much of a Windows developer and I'm watching the stream and I want to uh I want to dive in right I'm a web developer I'm like you know I'd like to play around with some some windows apps just to get a better understanding of how that works and expand my repertoire a little bit um is when UI the place to start or is there another framework I should start with or um I think that's a tough question I I think wind fors WPF wiui they're all they're all good options for each of their reasons and I think it all depends on the scenario um I I I like what I see with wind fors they're doing a lot of work to keep it up toate with the latest. net developments but it's also based on software rendering and um I was mentioning the map controls that that I'm working on and if we do 3D map rendering in there it the performance is so bad is almost unusable in 3D um just because of your forc to software rendering where in WPF and when you you get Hardware rendering um WPF is very mature it has had a long history um but it also doesn't see very much Innovation um they have made some nice announcement this year for what they're working on but um again it's based on Direct X9 it's kind of a little older but has a lot of functionality and that's been established and then there's wiui which is the the new one on the Block that it's the latest rendering Technologies and but still is sort of lacking some features here and there um the debugging exper experience is not always great um sometimes when you write a typo in your app and you run it and get a runtime exception you don't always get the best error message sometimes you just get a generic com exception in the app launch and not where the code happened so they have their pros and cons um and I use all of them all the time and every time there's something that I wish I had that feature over that other framework it happens all the time there's to something like they each have their strength and weaknesses I think depends on the scenario what you want to pick okay yeah so real quick I just want to just kind of cover what am I working on um currently working on trying to get webcam to work so there's something called a capture element you the P I'm getting close but that's one thing I'm working on I'm thinking about this concept of the web authenticated brog onp can we do it in a way that's out of proc safe um but mimics more of those apis are useful where you not necessarily have to jump all the way out to a new browser but more feels like you stay in the app and not have to like leave context of the app um work get some tray icon stuff I'd love to do more analyzes and code FES um I had done some stuff for libraries for testing um and it just costed a lot of problems so I sort of paed that for now but I kind of want to revisit some of those UI testing helpers to make it a little easier toide UI test within UI and then I just keep monitoring the forums for like what are people struggling with what we find it fun to try and make a rapper for um it's a lot of good learning experience I'm trying to write that awesome this has been great um I I learned a ton good so um I would like to close the show out but I am actually if I yeah maybe if I hold the microphone like that I have an app somewhere that is auto adjusting my mic volumes consistently which is killing my noise filter which has gives this really sharp drop off to my voice so I want to say thank you to all of our uh viewers who have pointed that out throughout the show I've been fighting it the whole so um starting with TB the viewer not the disease um thank you TB um so with that uh I want to thank you uh Morton for coming on and talking about uh when uix I want to thank all of our viewers for watching onnet live um please check out our othernet live TV streams at.net whack live tune in next week when our guest is atanas corev um I actually don't have in my notes what atonis will be talking about uh we had a little problem with our website uh a few months ago and that's that's why but uh I'm sure ananas will have uh we'll have a great topic for us so be sure to come back uh next Monday for ONN Night Live thank you bye thank you friends thanks for [Music] having [Music] y

Channel: dotnet

Views: 6,175

Keywords: dotnet, desktop, winui, livedemo, windows

Id: VQ0lP_0uboQ

Length: 61min 36sec (3696 seconds)

Published: Tue Feb 27 2024