Container, Region and Stack Navigation in Exrin

Exrin provides some very advanced navigational features, and with the release of 1.3.0, it has been advanced, yet again. There are 3 fundamental navigational components to a Xamarin Forms application, and I will now go into how Exrin views each of them.

Containers & Regions

Containers are the root layout object of the Xamarin Forms application. A NavigationPage, MasterDetailPage or TabbedPage can be viewed as a container. A Region, is a section inside that Container. In a NavigationPage, the Container and Region are the same thing. In a MasterDetailPage, the Master and Detail sections are called Regions of that Container.

Stacks

Stacks are a core concept in Exrin, and have been around since the beginning. A Stack is an object that holds the different pages, and wraps a NavigationPage. As you may know the NavigationPage has a NavigationStack as a property. A Stack is similar to this, but provides additional functionality and tracking on top.

A Stack is then placed inside a Region. If you take an example of a SingleContainer, the Container and Region are the same thing, and it has no root layout object. Hence the NavigationPage is assigned directly to the MainPage property. If you look at a MasterDetailContainer. The Stack’s NavigationPage, is assigned directly to the Master or Detail part of the MasterDetailPage.

Stack Navigation

Now that you know what the Navigational components of Exrin are, here is how we use them. If you just have a single Stack, which means one NavigationPage, then you can move to a new page in the stack by returning this from an Operation.

return new NavigationResult(Main.About);

It detects which stack it is in, and moves as appropriate. If you want to change Stacks, you just need to specify the Stack, in your navigation as such.

return new NavigationResult(Stacks.Main, Main.About);

If you have a MasterDetailPage, and on the Master page you want to change the page in the Detail page, you can actually do the exact same command as the one above. It will see if this Stack is already existing in a Container, and change the page accordingly.

Region Navigation

Next, what if you wanted to change the actual Stack, in the Detail page of the MasterDetailPage. This is where the new functionality comes into play. In your Container, you need to add some Region Mappings, so that you name the Regions to an identifier you can call. You will also note that the Container has an Id tied to it as well.

// In this example, Regions is your own custom Enum, you create in your project.
// ContainerType is an Exrin Enum you must map your RegionId to.
// Place this in the Constructor of your Container, with the MasterDetailPage.
RegionMapping.Add(Regions.Menu, ContainerType.Master);
RegionMapping.Add(Regions.Main, ContainerType.Detail);

Now, when we do a NavigationResult, we can put in the ContainerId and RegionId.

return new NavigationResult(Containers.Main, Regions.Main, Stacks.Second, Second.Detail);

This will now go to that Region, and switch out the Stack to the one specified.


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer | Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

Leave A Comment?