How to add both "Hamburger" and "Popup" menus to the Navigation Rail.
I assume you read my post on MD's Navigation Rails. You should understand it before going through the stuff on this post.
I had a problem with the navigation rail control as it lets you add more content only to the right side of the tab's headers (or to the top if the rails are on the left or right side of the window). What if I want to add content on the center or right side of the rail? No can do.
My solution to this problem was creating an overlaying transparent layer that will hold all of the new stuff I want to add. Here is an illustration for what I did:
As you can see, the new layer just "sits" on top of the basic navigation rail grid and everything happens there. It looks like everything is put together so the composition is neat. The navigation rail did not change its behavior after the overlay layer was added. That's how it looks:
You can download Example7.ps1 and Example7.xaml from my GitHub.
If you look at the Xaml file - the only section that was added to the file used for example 6 is the grid with Name="OverlayLayer". This is the transparent layer that contains the Toggle button, the Drawer control and the PopupBox control. I will cover those controls on my coming posts, but they are pretty much straight forward so you can play with them and gain some experience.
Few thing I have to explain though:
The so-called "Hamburger menu" is actually a drawer control with a Hamburger Toggle button. When the drawer opens, it covers the button. The button that you see inside the opened drawer is not the same button. It is an illusion, it looks as if the Hamburger button transported into the drawer while morphing to an arrow. Now, if you make the drawer a bit transparent (like in my example), you have to hide the button that is underneath the drawer. In the PS script I made sure I'm hiding it in the toggle "checked" event of opening the drawer. Also, the drawer button will be set to checked on the same event, so it will look like there is a morph being done to the opening button. Magic in code haha.
There is a neat feature to the drawer opening in a modal mode. The attribute responsible for that is OpenMode="Standard" or "Modal".
On Modal mode we also need to synchronize the drawer size with the window size because if the window size gets bigger than the modal, you will see the modal's shadow only partly covering the window and that doesn't look good at all. We use events DrawerOpened and SizeChanged.
You will have to add an event for every item you put in any of the menus.
Keep in mind that both the drawer and popup can contain many sorts of controls, not just buttons or list items. You can put almost any standard control you with. Just use your imagination.
You can put more information on the bar's real-estate. It can be your company's logo, user information etc. Just add it to the transparent layer.
Happy navigation :-)
Comments