Creating Animated Menu using .NET MAUI

hello everyone in this short tutorial we will learn how to create good looking side menu for our mavi applications using custom animations before i start let me show you a couple of examples from my own applications so here you can see on the screen i have couple of my applications open the one on the left vocabulary is already available on the app stores if i click on the hamburger menu on the top left it will move the main content out of the view towards the bottom right and reveal the menu for this application if i click on the close button it will bring the main content back the one on the right is still a wip application it's work in progress let me just play the video is mostly the same concept just the animation is slightly different so let me run this again here you go i can minimize this and this as well so how do we implement this in our applications actually it is fairly simple you basically need just two visual elements one containing your menu design and the other for your main content i prefer to use grades for this purpose but feel free to use whatever works best for you the main content grade overlays the menu container grid on click of a button for example a hamburger menu icon on the top left side as we saw in the examples you can animate the main content grid out of the view and reveal the menu the animation or the design of the animation can be as simple or as complex as you want it to be you saw in the couple of examples where i'm using different kind of animations for each of them so let's dive right into this for this purpose i will be using my already built mavi planets application rather than creating a new blank hello world application so let me show you this application first let me run this i'm not going to go into details of this application you can get the source code of this application from my github repo i will post the link to the repo in the video description below i also wrote a two-part blog series building this whole application feel free to check it out so let me run the application this is the main page the starting page if i click on the explorer now it is going to show me list of the planets if i click on any of the planets let us say jupiter in this case it is going to take me to the detailed page where i can read more about the jupiter planet and i can see some more images as well at the top right corner i have a profile picture if i click on this at the moment nothing happens this is where we are going to build our menu or clicking of this profile picture we will reveal our menu so with that let us drive into the visual studio project so this is the visual studio project the planets page the second page of the application that you saw with the profile picture it is basically a grid containing a profile picture and some other elements on the screen to start with we are going to create a container grid we are going to move this grid inside of this container grid this is our current main menu or sorry main content and then we are going to create another grid which will contain our menu i am just going to bring in ignore safe area so that i can extend into the bottom navigation bar of the ios application for our main content i'm just going to give it a name i'm going to call it mail content grid and then for my profile picture i am going to add an event handler or tab tab gesture recognizer if i go to the code behind this is where we are going to reveal our menu and move the main content out of the view then going back to the sample i do not need to do anything over here i can close this safely now going back to our other grid where we are going to define our menu so on this great i can again give it a name menu container and i can again extend it into the navigation area at the bottom on the iphones now the main application is fairly dark gray in color you can see over here so for this application or this menu i'm going to give it a different background so let me define a background i'm going to give it a linear gradient brush which is starting from medium gray going all the way to black and then additionally what i want to do on click off anywhere in this grid when the menu is open i want to close the menu as well so for that i'm also going to add a tab gesture recognizer inside of the grid if i go to the definition fairly simple concept i'm again going to say close the menu and bring back the main content going back to the saml there is one just last bit that we need to do and that all depends on your design and your requirements for the purpose of this demo i'm just going to implement my menu as a simple vertical layout vertical stack layout with some menu header and some menu of menu options i'm not going to define the icons or define any of the click handlers or what needs to be done when any of this menu option is clicked i'll leave that to you we are pretty much done with our xaml part so let's go back to our code behind so this is where the animation will kick in so whenever we click on the profile picture we want to first of all we want to translate the main content out of the view slightly towards the right and then we want to move it a little bit down and then at the same time we also want to scale it to 80 percent of its size plus we also want to fade it to around 80 percent opacity and i want to do it for a short duration of time let me define this animation duration as say 600 milliseconds i can define it as 800 milliseconds now let me run the application and we will see it in action so the application is running let me go to the explore button now if i click on my profile picture you notice that the main content moves towards the bottom left and also the size is reduced slightly and it is revealing our beautifully designed menu but right now if we click anywhere on this grid nothing happens that is because we have not implemented the method or the logic for closing our menu that is again fairly simple it is basically the same thing that we did but in reverse order so the first thing that we do we increase the opacity of the main content grade to 100 percent then we scale it up to 100 and then we move it to its original location which is starting at position 0 0 on the screen now if i run the same application we will be able to close the application or sorry close the menu as well let me bring in the simulator there you go click on the profile picture click anywhere on the grid and the menu closes so this is pretty much what you need to do ideally what i would do i would rather extract this method into a separate function which i can call from any other place so let me just call this close menu and i'll tell you where all we can use this if i look at any of my other applications take a look at this example here when i go to the menu i have also given a close icon you may decide to give a close button as well when we click on this button then the menu closes or alternatively you may want to do some action when clicking on any of the menu of menu options that you have given in this particular case when i click on the game rules i'm opening a model window but if i close this if you do not after you have opened or navigated to the model window if you do not close the menu it will still be visible in this shape so what you need to do when you click on any of the menu options after you have performed your action you also need to call the close menu method that we have created so that it will actually execute this piece of code and bring back the main menu of the main content back to the screen so here you go it is this simple to implement a custom and nice looking side menu with animations in your mavi applications if you like this video and you want to stay updated with new content coming on this topic and similar topics please consider subscribing to this channel so stay tuned for more thank you very much

Channel: Naweed Akram

Views: 16,630

Keywords: Maui, .Net Maui, #DotNetMaui, Dotnet Maui, Mobile Application Development, DotNet Maui Tutorial, .Net Maui Tutorial, .Net Maui App, Real-world Maui App, Mobile UI, Custom Side Menu

Id: qkfBGIypRLI

Length: 11min 56sec (716 seconds)

Published: Fri Aug 19 2022