The Best MAUI Library You Don't Know: Nalu - VirtualScroll, Custom Tabbar, and More!

Ajouté : 2026-05-18

[00:00:00]Easily one of the most underrated libraries right now for your Net Maui application is Nalu. But not anymore.

[00:00:06]We're going to change that right now because after this video, you're going to want to use everything that is in here. Let's have a look.

[00:00:18]There is a good chance that you have never heard of this library before, Nalu Nu, which is kind of insane because it is so so good and it has so much good stuff. So, we're going to change that right now. You're going to be a believer by the end of this video. You're going to want to post it on the socials.

[00:00:34]You're going to want it. Tell all your friends and co-workers. Send them this video on the next birthday. You're going to tell all your family and friends about this amazing package. It is created by LBrock 87. Um, that handle, you might know it from the Net Maui codebase if you're nosing around in there from time to time. Um, his real name is Alberto and we've been working with him for a long, long time. he is a longtime contributor with not the easiest fixes notably uh mostly in the performance area those are not always super easy to kind of like review so we reach out to him and he's been working closely together with us uh to make that all happen to merge that into the net maui codebase so if you're seeing performance increasements that's partly because of the amazing work of Alberto so his library is kind of like performant by default right and it has so much cool other stuff so without any further ado let's just jump in. Let's just see what it's all about. And you you're going to want to use this. Let's let let's go. Okay. Welcome to my screen. This is where the magic happens.

[00:01:33]The Nalu GitHub repository. Um even before we do anything else, I promise you it will be worth it. Just star this repository right here in the top right.

[00:01:41]Um and if you start using this and you're like, "Oh, this is actually pretty darn good." Consider sponsoring Alberto if you can. He is doing this all in his free time. It's been amazing.

[00:01:52]He's making your life easier by sacrificing his time. Consider donating a little bit back to him. Sponsor him.

[00:01:58]I'm already doing that. I think you should too if you have the ways to do so. Okay. Everything is here, right? You can scroll through it. It's all open source. It has tests. It has a little logo. It has all the important things.

[00:02:10]Provides a set of libraries designed to simplify and accelerate your net application development by addressing common challenges. Well, what's all in there? Key modules, core, navigation. It has layouts. It has controls virtual scroll. Does this mean this actually has a collection view that works? Oh my goodness, that would be something. Um, and there is a little bit of a commercial component in here, right? So, you have to have this um subscription right there or um whenever it's non-commercial, you can start using it this way. So, be mindful of that. There is a little bit going on here, but you know, very easy to kind of like fix that. Sponsor him a little bit. Easy fix. Um, you can see these packages right here. actually the numbers like 25k 21k it's not nothing but also these need to be much much more so we've got all this um this is I'll post a link down in the video description below um but we also have documentation though so that's under the link here on the right um nalud development.github.io/nalu io/nalu which I have opened right here.

[00:03:07]And this has some documentation to kind of like get you started. I'm here on the home. You can see the layouts, a toggle template. We'll see that in a little bit. A view box, a template box, navigation, virtual scroll. There it is.

[00:03:19]Um, so we've got all this stuff right here to get you started to see what it is, how to start working with it, etc., etc., etc. Of course, I wrapped all of this in a little sample application, which you can find here on my GitHub repository, on my GitHub account, I should say. Um, again, link down in the video description below. So, go find that and go play with it. Um, because this is how to get started. Actually, um, Alberto has been helping me with this a little bit as well. I sent it to him. I was like, "Hey, I want to make this video. Can you check out if this is, um, good, yes or no?" And actually, he found some bugs in his own library because of working with this. So, you know, community power at work here, which is really, really great stuff. Um, this is what we'll see in a little bit.

[00:03:58]There's a little bit of description of the features that we have demonstrated in this thing. I do not have time to go over this um in detail here for you in this video, but you know, everything is there for your own inspection. So, everything is right here. Very cool stuff. Now, let's switch over to the actual code right here. I'm here in Visual Studio Code because as you've already seen, I'm on Mac OS today. Of course, it's built in a Maui app, so everything works for Android and iOS. Uh maybe even Mac OS and Windows. I'm not entirely sure, but at least for these two, which are the most important ones anyway, right? Um, so we've got all of that. Now, before we go into the code, actually, while I'm here, Maui program.cs, I've got that opened. Uh, maybe let's see if I can zoom that in a little bit for you more. Um, you can see like bootstrapping this thing is super easy without even knowing what it is exactly. Use nalu navigation. Okay, we can wire up our page models with a dashboard page with so sorry, the page models with the pages, right? So, we have the pairs right here. Now the layouts, controls, virtual scroll, tab bar, custom tab bar. Is it is it going to be is it in there? Yes, it is. And it is amazing. So, we've got all this stuff. You can just hook that up. Mostly oneliners. And everything is right here for you to use. Now, what does that look like? Let me bring up the simulator here. Actually, let me go back to the first page. I was playing around with this. This is the dashboard. And without even like giving you all the details here, this already shows you kind of like the layout we have. Let me move it um from behind my head. Right here we have this custom crazy cool tap bar here. I'll save that to the end. So stick around to the end. But look at that. Look at that. It's amazing. It's amazing, right? And this works with plain shell. So plain Maui shell also the custom nalu shell implementation that's in here as well. But you can apply this to your shell application in net maui right now without anything else. Right? So that's super super cool.

[00:05:48]Okay. Total task. So it's a little kind of like task tracker to-do app. Right?

[00:05:53]That's always the sample apps. So, we've got that right here. This virtual scroll. Look at that. Look at that. How smooth it is with all the custom designed kind of like things in here.

[00:06:01]Um, so many items in here. And it still is very, very smooth. I promise you performance. Um, it is right here. Um, little expander things right here.

[00:06:11]Right. So, we've got that. Um, and then whenever we do an edit task, we can edit one. We've got these things right here.

[00:06:17]This is my design skills or co-pilot's design skills at work. So, it's not all great. Um, and then whenever I start typing things here, like I um now focus the end one there and added blah and I want to go back. You can see like, hey, do you have unsafe changes? Are you sure? Do you want to keep editing? Yes, I want to keep editing. Uh, do you want to go back? No, I want to discard. And you're actually going away. This kind of like little confirmation box is harder to set up. Like it's not impossible.

[00:06:44]Anything that this library can do or any library in the world can do, you can do in Maui as well. But this makes it super easy to implement, right? Um, so we have a little new here, which is the same thing. Uh, we can switch to other tabs right here. Uh, this control. How crazy cool is this, right? A little duration um um selector right here. So, we can do all of that. Um, we can log it. We can do things. Recent entries and um some settings right here. So, we have the little tags um whatever you want to call them. Chips is another way.

[00:07:14]Um theme. We can do this all in dark mode as well, right? Boom. Dark mode.

[00:07:18]Um, and there's a little nice feature in there that I want to show you in a little bit. Again, one of the little expander, right? The expander view box.

[00:07:25]Um, you can see that right here. So, lots and lots of stuff to unpack. And then I didn't even talk about all the um invisible stuff like the navigation and stuff that's in here, right? So, let's dive into the code. Let's go to my Visual Studio Code right here. And um the navigation is the first thing on here, right? So, add page dashboard page model um dashboard page. So we can already hook up these two things which enables crazy cool stuff. Now let me switch to that um what I mentioned a little bit earlier the the custom Nalu Maui shell u so that's kind of like a specialized shell for Nalu right to make some of these optimizations possible. So if we look here in the appshell.l L. Um, you can see this uses a Nalu shell, right? So, um, this has like some special things that we'll see in a little bit. Um, but you're going to have to use for some features this custom shell that Nalu provides, right? So, I I even step that maybe skip the step like if you go here to your CS project, um, you have to install a couple of packages, right? Depending on what you need to use, but you can see I only have two um, which is like the Nalu Maui and Nal Maui virtual scroll. And that basically is all there is that will give you all of this good stuff. Right? So that's right there. Um then you can start using it. And then I already mentioned you like the nal shell here in the appshell. Wire that up. Um and then we can see here that this takes AI navigation service right. So you can wire up the navigation service and then you're going to provide a um root page, right? So you're going to provide the first page that's going to be shown in this shell which in this case was the dashboard, right? That's where it default was. Um, that's what it's going to show by default. Now, if we go look at kind of like that dashboard page model, um, if you know a little bit about shell, then you know it works with like the, uh, magic string root navigation, which is pretty cool if you ask me. But of course, it's magic strings. It's not for everyone, right?

[00:09:17]So, what this implements with that little I navigation service is you can do navigation service go to async navigation relative push and you can push to a page model. So you can do page model to page model navigation which is awesome. I've missed that if you've been around since the examining forms days. I loved fresh MVVM which did page model to page model navigation because now you can just swap out your pages, do a crazy new design, but you're still navigating to the page model. So you don't have to update all kinds of reference to a new page if you maybe um named it a little bit different or whatever. Just update the Maui program with your new page and boom, you can do all of this. But of course what's also really cool is that we don't need any slashnavigation task list page whatever we can just go here and we can do it relative right and you also have absolute with which you kind of like can replace the whole thing. So for your login page scenario which is something that has been requested a lot with shell you can just say hey replace the whole thing go to this page and boom we're there doabsolute.relativepushpop relative.push.pop.

[00:10:21]You can do all these things. And you can also have intents. So we can say relative push with intent new task list filter overdue only is true or priority task priority is high. And you can already start filtering this kind of like from um immediately. Right? So you can see here this all navigates to the same task list page model. Right? So that all navigates to the same thing.

[00:10:45]But there is filters already um as an intent provided from navigating there instead of navigating there first and then applying the filter. Right? So I can see hey overdue just go here and you can see only the overdue task. It's already filtered. I go back I go back to the full 200. See I can have all 200 right here. Or I can go to the high priority and I only get the high priority ones. That's how cool. That's how easy it is. Now we've got this. Then the other thing that I wanted to show you was a little edit view, right? So let's go there. If we go back to this one and then do the task editor page model and then you can see there are some cool um interfaces that you can use that are provided by NL. I entering aware or I entering aware whoops skips back here with an integer, right? So you can strongly type them as well. And I leaving guard. I think you already know a little bit about what that might be.

[00:11:39]So I entering aware I entering aware with an integer provide you with some methods that you can hook into. Let me scroll down to them. Um here I entering async right you can initialize your editing task right here. And whenever there's no int provided because we got that overload right here. Um then we are going to do a new task right. So we have a new one right here. So we're going to reset all the properties set them all to the default values and you can start editing again. If we get here with a integer, now we know that we're editing something. So now we can say, hey, we can update the page title, which is the very least you want to do. Um, get the task, right? Get it from the database.

[00:12:16]In this case, it's marked a little bit, but get it back from the database. If it's not null, we have to check if it's loaded. Get the title, get the description, get the priority. We do all this with data binding, right? These are all the properties. Data binding all nicely updated. Um, tax test is dirty, right? For the little thing if you want to leave the page, yes or no. notify priority callers and boom, we're done because it's value task. So, it's async.

[00:12:39]So, we need to do that. So, you can do this stuff kind of like navigating to it. No more on navigated to trying to figure it out, etc., etc. You just get this overload. You can initialize it from right here. Now, the I let's go back here. I leaving guard is kind of like the other way around. When we're trying to leave, right? So, that was a little box that we've seen earlier. So here we've have the can leave async and that gives back a boolean and whenever that's true can leave async it can leave and whenever it's false it's going to block the navigation it's going to cancel it and here we're going to say hey is not dirty is not say or is saving um then we can go and whenever we you know have this prompt and we get kind of like the results from the user with like hey do we want to um um go yes or no um we're going to do false and we're going to block the navigation that's it has return false, navigation will not happen. Whether that's navigating back from the little button there, whether you press back on the Android thing, you cannot leave async. That's sounds scary.

[00:13:39]That sounds heavier than it is. But this is all provided with one interface that you can now add to your page model. So again, nothing in your pages, nothing in your whatever, whatever. Just put it in your page model and we have all of that.

[00:13:52]Now the little virtual scroll, well little virtual scroll, right? Um that's like the main character in this whole thing. Um which is in our task list uh page actually. Uh this is our page the RCS and here we have it our task list page. So this is the list with all the tasks that we've seen right here. Very common kind of like API. Nothing scary here. U virtual scroll right comes from the separate nougat package. Image source with an adapter. Okay. That's interesting. Refresh command is refresh enabled. This looks pretty much the same as like the list view or the collection view that you're used to from done at Maui. Uh but now like super zoomed in on performance and this is like you know has a little uh different implementation that what you're used to from us but it is crazy crazy crazy cool and good especially the adapter is really cool.

[00:14:40]So um let's just show you in you know again while we're running it like it's go super fast. Um and you know it has some custom view going on here. Maybe you want to have some grouping, you want to have some things and you want to load data in a specific way. You can do that with adapters. This is all on the uh documentation page. It takes a little um mental model to kind of like get into it, but it is super super good. Um and I think this should be because it's data binding, right? So this is in the page model. So let's go to the page models right here. Task list page model. And you can actually see that we have this replaceable observable collection which uh inherits from observable collection and there is some stuff here right replace all and it's going to replace all um and notify the collection um changed etc etc right so this is a little helper class little helper method right here u but then if we scroll down we actually have this adapter I virtual scroll adapter so that's something that comes from the naloo package then you can hook up that adapter with new virtual scroll create observable collection adapter, right? So, we've got that. Um, and what that does, um, actually, if you go look into it, this is actually dives into the actual code.

[00:15:49]So, this is already built in, but you can al also build your custom ones. And looking at the documentation, um, whenever it kind of like loads a new section or whatever, you can provide the code to load a section. So, I think in the documentation, there is a section about like, hey, loading stuff from SQL light, right? Which is probably something that you will do. you can kind of like do these calls to SQL light from your adapter of course like you know it's very easy to fall into performance traps right there so make sure to do it right um but there's all stuff that you can do and look at all the stuff that is already built in for you uh to kind of like not to be worried about right so um observable collections is probably the typical use case but if you want to do something more specific you have these adapters to um plug into and that you can plug into your virtual scroll um and Now it all works. Now that Nalu tab bar, right, the fancy fancy super cool tab bar that we can see here at the bottom.

[00:16:45]I'm I'm totally in love with it. I can watch this thing all day uh with the little animations going on, etc., etc. How to hook that up? Well, it is super easy and you don't even need the Nalu custom shell for it. You can also do it with the shell that is built into Net Maui directly. So even if you don't want to use all the other stuff right here, I don't know why you would do that, but if you just want to use the tab bar, you can do that and you can customize it fully. Right? If I go back quickly to the documentation right here, um I think we have like where is it? Navigation custom tab bar. Um there is some other um examples here like this one maybe not you know needs needs Alberto needs a little bit more design. It's fine but you know but you can see that you can make it very very custom, right? And then if we scroll down here, you can even set kind of like the um blur glass effect. This already looks much much better, right? So you can achieve all of this with this cool little tab bar. Now let's go back how to hook that up here in this sample app. You can see the appshell tab bar, right? So let's scroll to the top. And this just uses like plain net maui elements, right? Grid uh put a style in there, put a border in there, image button, right? the usual stuff that you would use to create your layouts. And then a nal view box, right?

[00:18:01]So there's a little bit custom stuff going on here, but if you don't want to use that, that's totally fine, right? Um you can just use um um plain Maui elements if that's what you want. Now we've got this one and then you we have some supporting stuff here, right?

[00:18:16]Because it just it has this very very custom view. So we have this fancy tabar shape which is an inheritance of a shape. So we can, you know, have the little curves and the little waves and the little things in there. Um, so all of that is in there. So you can go crazy. You can write all this custom code to make the tab bar exactly as you would want. Now if we then go to the appshell.zaml, we've already seen that nalu nalu shell tabar view and then we um point to that appshell tabar right that I've just shown you. And this is an attached property what we call in net maui. You can also do this without this, right? Just if you just have shell here, oops, not shell shell. If you just have shell here, this will still work. It will still show up and it will still look and behave the same. That tab bar will be there. And now you have this amazing cool tab bar. I don't think you need to do anything else. Like you will get all the content in here that will be loaded automatically. That will be understood, hooked up, all these kinds of cool things. Now there is other stuff um hidden in this well it's not really hidden but uh for you to discover in this sample app. Um, one of the other cool things, uh, for instance is if we go to our pages and there's also a settings page that I already showed you.

[00:19:27]Um, one of the other cool things is like, hey, we have a, let me scroll down, toggle template, and depending on a boolean version, uh, sorry, boolean uh, value, you can toggle for when false or when true. And in this case, we're using it for the dark mode, yes or no.

[00:19:44]So whenever binding is dark mode, we're going to whenever it's false, we're going to style it a little bit this way.

[00:19:49]And whenever it's uh true. So whenever dark mode is on, we're going to do it this way. Now, this is just one example.

[00:19:54]You can do that for a whole variety of things. Just a little toggle template, right? Like whenever it's true, I want to do this. Whenever it's false, I want to do that. One of those little things that makes working with Maui apps so much more pleasant. I'm just going to have to stop here because I already talked longer than I wanted to. I was just going to show you a couple of the highlights, but I guess let's be honest, everything in this library is a highlight, right? This has the official seal of approval of Gerald. Go out and use this in your Maui applications. Um, let me know down in the comments below.

[00:20:24]What is your favorite feature? What is a feature that you want to learn more about in a follow-up video? At the very least, start that repository. Consider sponsoring Alberto for all the great work that he's been doing with this library on the Net Maui repository. Go out, post this on your socials, let everyone know because this amazing project needs more eyes on it and we need to use it more in our applications to make the lives of our users better as well. So do all of that and then I'll be seeing you for my next video.