Is Your MAUI Application UI Responsive?

responsive UI design where your UI adjust based on the dimensions of your screen size shouldn't be difficult for a crossplatform framework like net Mal that runs on mobile and desktop devices but in some cases it is difficult so in this demo I have what is essentially a footer component so I have my logo over here and then some footer links over here so obviously on desktop this looks fine but as our screen size gets smaller or our width decreases as you can see we don't adjust and things start to clip so our logo clips and our footer links clip and we can't really click all of them so our UI is not responsive to this smaller screen WID so ideally I would want something like this let's throw in an example that I prepared where when our width gets small we start wrapping things our links start to stack our links and logos stack on top of each other and in fact our logo and links Center in the screen so for large screen widths I would want to show this top top footer component and for small screen widths I would want to show this bottom footer component because we want this to be responsive for desktop and mobile devices so in the web development world we would just use media queries which are built in to CSS and we would adjust some Styles based on the width of our screen but in net M there isn't some sort of built-in media query solution that we can tap into so we're going to have to roll something ourselves so let's start off by focusing on one part of our UI let's try and stack these two columns of links when our screen size gets small So currently our two columns are side by side via this horizontal stack layout so basically instead of a horizontal stack layout when our screen size gets small we want this to be basically a vertical stack layout and sometimes it's easier to think of things in terms of mobile first so it might help us to make this a vertical stack layout first and when our screen width gets large we make this go horizontal but but aha kind of tricky so we can't switch this component between different types so we can't have a vertical stack layout and a horizontal stack layout or at least it would be tricky to do that instead we can just have a regular stack layout with an orientation of vertical and now we've changed the problem a little bit to when our screen width gets large we want to change the orientation to horizontal so instead we're focusing on changing the style rather than the entire component so that's one Improvement that's going to simplify this so now how are we going to switch this orientation between vertical and horizontal depending on our screen width and I've already kind of hinted on this we're going to use a style and the style is going to have a trigger that binds to our window width and whenever our window width is above a certain amount then we're going to switch to different styles so let's try this out we're going to have a stack layout style we needed to expand this because we're going to have triggers in here so let's have a style targeting our stack layout of course let's add some triggers in here and this trigger is going to be based on a binding we're going to be binding to our window width so this needs to be a data trigger and of course this data trigger is going to Target our stack layout type and this is where we get into the good part so this is where we're going to have a binding to our window width so we're going to bind to some sort of width property but this binding needs to point to our window and to find our window we can set the source property and we can actually walk up our UI Tree by setting the relative Source ancestor type to a window so basically what this is doing is binding to the width property on the nearest window type in our UI element Tre so we get the width of our window that's great but what do we do with it because this data trigger we can't really do anything with the target value here we can't say something like 800 because then basically our data trigger is only going to apply any Setters in here whenever the width is 800 and that's not what we want we want to apply Setters whenever the width is greater than 800 which 800 being the ideal size for our desktop styles to come into play which I'm not actually sure about we might play around with this number so in this case we want to convert this width to a Boolean that'll tell us whether or not our width is greater than a certain value and that is going to be done via a converter so let's add a converter and this going to be called the greater than converter cuz what we're doing is we're converting our width to a Boolean if it's greater than a certain value so for zaml binding converters we inherit from or we Implement I value converter let's add that so I believe we only need to implement convert because this is going to be a one-way binding where we're getting our window WID and we're not going to be setting our window with so I don't think we need the set convert back for now unless we were using this converter somewhere else so the value that we get passed in is going to going to be our width right now it's an object so we're going to have to validate it is a double and then we're also going to take a parameter and that's going to be the number that we're comparing our withth against which is also going to be a double but right now these are objects so again we need to validate these so let's just do some parsing on this double so we'll check if the value which is going to be our width can be parsed to a double and we also want to try and parse our parameter to a double and if either of these can't be parsed then and we're just going to return false so at this point after this check we can just do our comparison so all we want to check is if our pars value which is our width is greater than our parameter that we're comparing against by the way I kind of went through this fast really just focusing on Concepts here I'll link all of this code in the description but now let's use this converter so back at our main page let's import the namespace that has our converter let's call this local and I believe it's just in our responsive design namespace there we go we now need to Define our converter so in our content page resources we're going to Define our greater than converter and add a key for it so that we can reference it down in our binding so let's add our converter here so pointing to our greater than converter resource so this is referencing the key that we gave our converter and then we also need the converter parameter so what are we comparing against and I think we'll try out a screen size of 800 so if our width is greater than 800 we want to go to horizontal and now as we've mentioned this is converting to a Boolean so we only want to apply these Styles when our converter returns true and our width is greater than 800 so what are we waiting for let's try this out again just doing one style at a time here let's verify that this works all right here we go this is already a good sign so we are on our screen size this is greater than 800 pixels as you can see these are aligned horizontally that's good so let's see if our screen size gets smaller we should undo these Setters and go from horizontal back to Vertical here we go there we go perfect so now it's just a matter of applying this data trigger to other styles in our layout and I'll do that off camera because it's going to be kind of repetitive but we'll come back and review it all right not so bad let's look at the results so our Flex layout in Mobile we have our logo and our links in a column we align them in the center of our screen but then in desktop if we make this bigger we change it into a row so our logo and links all in a row and we justify them with space between as we see and then the only other responsive style we needed was the second column of links so in Mobile we add margin to the top 10 top margin but then in desktop we add 50 margin to the left as we can kind of see pretty significant Gap there so this is what I have initially in mind for responsiveness in net M so binding to the window width and then using a converter to check if it's greater than our desktop breakpoint and then applying desktop Styles while by default will apply mobile Styles so again just an initial prototype here I don't really like how much code this takes so you have to expand the whole style add a data trigger which this binding is pretty long as well so feel free to experiment with this and find some other mechanism to slim it down I know I will be I think attached Properties or behaviors could be a viable option here for reducing some of the boiler plate here and making this way more reusable so I might have to try that out so just an experimental concept here we've accomplished responsiveness so hopefully you can apply this to your owni application to have a responsive UI between desktop and mobile [Music] devices [Music]

Channel: SingletonSean

Views: 1,392

Keywords: wpf, programming, visual, studio, xaml, custom, control, generic, system, line, display, timer, template, binding, c#, how, to, series, tutorial, easy, time, maintain, package, design, part, event, code, register, static, state, default, view, style, wrap, panel, stack, scroll, first, width, command, func, action, void, model, user, box, mvvm, data, error, icon, class, relay, clean, simple, sub, file, host, grid, scope, align, rule, logic, domain, list, app, tile, maui, shell, behind, type, safety, breakpoint, responsive, media, query, mobile, desktop, screen, device, size

Id: H6RZZlgyqMA

Length: 9min 9sec (549 seconds)

Published: Fri Mar 29 2024