The Right Way to Conditional Render in .NET MAUI

let's learn how to conditional render in a Mai application the right way so here in this Maui application we're taking a pretty traditional approach to conditional rendering but we're going to find out that binding to is visible for conditional rendering is not great so let's run our application and see why this isn't the greatest solution so as we can see it works fine we're toggling the visibility and we hide and show the correct elements but if we come over to something like the live visual tree and we look at our vertical back layout which contains both of the labels we want a conditional render we'll see that even though we're hiding one of these labels we're always rendering both of them so we're wasting resources on rendering an element that we don't even display on the UI now of course we're just dealing with labels here so not really going to be any performance impact at all but imagine the element you want to hide is like a list view that contains a thousand elements it would be a waste of resources to still render that in your visual tree and then hide it like it's not even displayed on the screen just a waste of resources to render it so that said binding to is visible not the greatest solution from a performance perspective and even from like a usability perspective it's not that great binding to is visible and doing these quirky bindings doing like an inverted bull converter it's not that great so we have two problems here we want to address the performance issues and make sure that we're not rendering an element that we're hiding anyways and would like the interface or the mechanism we use for conditional rendering to be a little bit better than just is visible bindings which again are kind of quirky so the first issue we're going to tackle is the performance side of it so rather than doing is visible checks let's switch this over to a Content view so this is basically just going to be a container for whatever element we want to display at a time so starting off let's just say by default we're going to show the disabled text so let's get rid of this is visible binding and we're just going to show this disabled label and then whenever our is checked checkbox becomes true or is checked on our checkbox is true we want to show this enabled label and we want to overwrite this disabled label with the enabled one so the way to do this is with a trigger so we're going to add a trigger on our content view specifically a data trigger and we're going to have a binding on that which is just going to be this binding and whenever our is enabled checkbox is checked is true so the value is true then we want to replace so we're going to we're going to use a Setter to replace the content on this content view with our is or with our enabled checkbox so we're going to open this up with a Setter value and paste in our enable checkbox and we don't need to set this is visible flag there we go and that should be our solution for performance I think one last thing for this data trigger we need to specify the target type and that's going to be our content view so the type that we're setting this data trigger on is the content view so this should give us what we want and when we start up the application actually let's just see it let's see what we're working with here this should be fun all right so let's go to the live visual tree as you can see we're showing our disabled label oh got to dig in here so our content View there we go only has one label for our disabled label but now if we come over and switch or check off this checkbox show the enabled text come back to the live visual tree again we only have one label this time for our enabled checkbox so now we're doing true conditional rendering where we're literally not rendering the element that we don't want to show but this is arguably more complex than the is visible Bindings that we had before or at least it seems like it takes up more code we have to dig into like data triggers and stuff and really the concept of conditional rendering is a pretty Universal thing so we should be able to come up with some kind of abstraction to simplify this and build something that's easy to apply everywhere that we want a conditional render and the way to do that is with a custom component so let's come over to our project and we're going to create a new item here just a regular class should do and we're going to call this if so basically what we're doing is building an if statement in zaml and ultimately we want to have something that's almost as easy to use as something like conditional rendering with a turn area operator in Frameworks like react which is dead simple but a lot harder in zaml but we're going to make it easier so we're going to have our if statement component and similar approach we're going to basically do the same thing but just abstract it in a component so we're going to inherit from content view actually so this is going to be a Content View and we're going to have to Define some properties on here for the different elements that we want our if statement to take in and actually rather than just building it maybe I should demonstrate the vision I have for this component so I want to have some sort of here we'll just import it and use it some sort of if statement component it should be able to take our margin which I think it can since this is a Content view we get that attribute or property inherited but I want to be able to do something like local like our if statement component and set some kind of true property and if some sort of condition is true then I want to render my enabled text and then if some or if this condition is false I want to render the disabled text and then I want to have some condition that we bind to so we want to have some sort of condition property that this is all dependent one and that's going to be our is checked checkbox so so here we go basically the if statement is going to check this condition so in this case if is checked is true on our checkbox it's going to render this true component and then if is checked is false we want to render this false component and as you can see this is much more easy to use in my opinion so let's get rid of the old solution and we're going to build this if component so first off we're going to need these attributes and what the heck are these they're bindable properties so let's add those to our if component so unfortunately I don't have a snippet for creating a bindable property so I'll link this documentation in the video description and we can just copy these Snippets out for building our own uh bindable properties so first we need to Define our bindable property so let's define that so let's copy that paste that in and this first one's going to be for the condition property which is going to be a Boolean by default we can make it false and this is going to be on our if component and this condition property needs to reference a property on our if object the actual instance that's going to contain the value of condition on our if component so let's copy that from this documentation too this is an accessor that's what I guess the correct name is well let's paste that it is going to be a Boolean except this time we want to name this condition not is expanded it's going to be getting the value of our condition bindable property and we need to reference this property we can do name of so that we get some type safety here and there we go we got our bindable property and we should see this eror go away so we got one property down now we need the true and false properties so let's start off by just copying these so we're going to copy this once and twice for our two new properties and this content that we pass to the true and false properties these are views so we're gonna have a true property the type of this again is going to be a view by default it can be null and it'll reference a true property on our if object instance make sure we update the type of this as well and update all of this lots of updating to do looks good and then same exact thing for the false component too let me just copy this and replace the one that we pasted previously so this will be for a false property let's make sure we paste that don't miss anything with copy and paste which I have done in the past when copying all this boiler plate but looks like we got it okay so we have three properties our condition Boolean and our true and false views and those are getting picked up in our zaml but now we need to add some Behavior to this if component to actually do something based on these properties so let's start off by just defining a method to capture the logic that we want so we're going to have some sort of update content method and whenever our condition is true we want to set the content property on our content view to be the true content and then otherwise we want to set the content to be the false content so that's the logic we want to execute but when do we execute this so most obvious we want to call this method whenever the condition property changes but honestly we should also call this method whenever the false or true come content changes for some reason if they did so whenever any of these properties change we should call it update content so the recommended way to tap in the property changes for a bindable property is actually up here on the bindable property create method so we can tap on a property changed Handler and let's call this on content dependent property changed so this will be a single call back that we use for all of our properties let's generate this so generate the method let's move this further down underneath all of our properties and we want to set this property change call back on all of our bindable properties so now whenever a Content dependent property changes so either the condition true or false components then we simply want to call update content but we can't do that and the reason we can't do that is because this is a static Handler so since it's static we're not within an instance of an if component so how do we get the if component that we want to update the content for well it's actually just this bindable object so this bindable parameter that gets passed to this callback is our if instance that we want to update so we can just do some casting here so we're going to get the current if component which is going to be our bindable casted to an if and now we just got to take this current if and call update content on it so let's summarize what we did so we have a bindable property for the condition that we want a conditional render elements based on we have a true View for the content we want to show when our condition is true and we have a false View for the content we want to show when our condition is false and we're correctly showing these different views based on the condition whenever one of the properties change so now let's run this this is going to be awesome here we go so we fire this property change call back on Startup actually and that's because we're initializing these different values which is good because we do need to initialize the content which by default is null so that was successful we show the disabled text but then we click is enabled here we go we hit our breakpoint looks like our condition property became true obviously so we call update content whoops I stepped over it but it did show the true content based on our new condition value we can see that in the UI we are rendering our enabled text now and just to make sure looking at the visual tree we are only showing that single label so we're again we're doing real conditional rendering and not rendering elements that we shouldn't be rendering that we're not showing on the screen so one more thing I wanted to show is this if component is pretty flexible so you don't need to pass in a false and a true element you can only pass in one so we could remove this false element and only have an element we want to display when our condition is true and if we run this should work as expected we show nothing when the checkbox is disabled and then we click it and we show our enable text so pretty cool we've taken care of some performance concerns with conditional render ing that would be an issue if we just did binding to is visible so we're correctly conditional rendering and not rendering components that we're not displaying on the screen and we've even created this custom if statement component that makes conditional rendering much more pleasant to work with and this solution it's only 50 lines of code one file source code is going to be in the description and feel free to apply this to your own Maui application in order to conditional render the right way [Music] [Music]

Channel: SingletonSean

Views: 2,896

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, framework, 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, notify, changed, list, app, tile, toolkit, refactor, maui, conditional, render, react, if, else, statement

Id: BOYySROGooM

Length: 13min 44sec (824 seconds)

Published: Wed Jan 31 2024