One feature in our staff app (built on Rock Mobile) is a Rock Web style sub-navigation. We wanted to segment the person's data so each profile sub-page loaded quicker and had relevant information. We solved this with a two-zone layout and a Content block. This was our first adventure into the mobile app world. I'm positive this is functional, hopeful it's helpful, and grateful to anyone who may have suggestions on improving the code :). One more note - we started building with the .NET MAUI feature-set and shell 7.x, so we did not have to retrofit any of the legacy Xamarin views or controls. With our disclaimers out of the way, let's move on to the code. I've included a GitHub gist at the bottom of this recipe with the full layout and block code.

The Layout

This is relatively simple and straightforward. I don't think it's required, but I do believe it helped me in development because it visually separated the nav (common among all profile pages) from content blocks that were unique to a single profile page.

The Nav Block

Building the page object collection

The main goal is to identify the page(s) that should be displayed dynamically while also respecting security. At this point we didn't need the security bit, but it's one less thing we have to think about retrofitting down the road. I opted to identify pages by the layout created above. If the page uses the two-zone mobile layout, show them. Feel free to modify this entity query to any criteria that makes sense for your organization.

I built a custom dictionary object to keep the upcoming loop lightweight and curate the data set. This made it easy for me to target specific properties of each page in bindings, visual state setters, etc.

Displaying the Navigation

I used a Grid view and loaded the page collection as a resource. That way i could use an item collection. I followed the recommendations in the official docs, and I see even now they've added additional commands on various actions that you may be able to take advantage of. Ultimately, this felt like the best control that would display things how we designed them now but would also let us expand if/when we needed to.

The last hurdle I encountered involved identifying the active page and maintaining a consistent styling. I wrestled quite a bit between the provided classes and some inconsistencies. Ultimately I landed on using `BackgroundColor` and `TextColor` properties on each button object. I also relied on DataTrigger and VisualStateManager properties (.NET MAUI features) to take care of changing my styles. It's a far cry from the safety of jQuery but it worked wonderfully and across both iOS and Android devices.

Summary/Source Code

Ultimately, we ended up with code we could copy/paste into a content block on each page. Once I let this soak for a while in production I plan to move this into a short code so I don't have to edit code in multiple places. Additionally, I'm hopeful Rock Mobile will eventually have blocks assigned to layouts - not just pages - like Rock Web.

You can view all of the xaml/lava used for the layout and subnav block at this GitHub Gist.

I'd love to hear your thoughts and hope this is helpful!