MonoCross Example using “MXTouchViewGroup*” in a MonoCross.Touch application

Question

Does anyone have example code illustrating how one would use the "MXTouchViewGroup*" code in the framework to create/use a tab bar at the bottom. Looking at code for MXToughViewGroup*, it isn't 100% clear how I would setup/use the navigation framework with a tab bar. Unfortunately the MonoCross book also has no examples of this case.

Any help would be appreciated.

Thanks in Advance.

Answer 1

So after poking around in MonoCross source, I've figured out how one would use a MonoTouch/iOS tab bar while using the MonoCross pattern, and specifically while continuing to use MonoCross.Navigation to move around your app:

//------- MonoCross Shared Application

// Main Menu
NavigationMap.Add("Menu/Tab1", new Tab1Controller());
NavigationMap.Add("Menu/Tab2", new Tab2Controller());
NavigationMap.Ass("Other", new OtherController());

// Set default navigation URI
NavigateOnLoad = "Menu/Tab1";

//------- MonoCross.Touch Container

// init monocross application
MXTouchContainer.Initialize(new SharedApplication(), this, window)

// Add view to container as usual
MXTouchContainer.AddView<ModelTab1>(typeof(Tab1View),ViewPerspective.Default);
MXTouchContainer.AddView<ModelTab2>(typeof(Tab2View),ViewPerspective.Default);
MXTouchContainer.AddView<ModelOther>(typeof(OtherView),ViewPerspective.Default);

// Create a MXTouchViewGroup, with items representing tab items     
MXTouchViewGroupItem[] menuItems = new MXTouchViewGroupItem[] {
        new MXTouchViewGroupItem(typeof(Tab1View),"Tab 1!",""),
        new MXTouchViewGroupItem(typeof(Tab2View),"Tab 2!",""), 
            };
MXTouchViewGroup tvg = new MXTouchViewGroup(new MXTouchViewGroupTabController(),menuItems);

// Add the group to MXTouchContainer.ViewGroups 
List<MXTouchViewGroup> ltvg = ((MXTouchContainer)MXTouchContainer.Instance).ViewGroups;
ltvg.Add(tvg);

// navigate to to starting location now
MXTouchContainer.Navigate(null,MXTouchContainer.Instance.App.NavigateOnLoad);

In the shared app, create controllers derived from MXController as usual and add them to the NavigationMap. Absolutely nothing special to be done in the "Shared Application"

In The MonoCross Container, you add views derived from MXTouch*View as usual to the container as usual as well. What is done differently is to create a "MXTouchViewGroup" with one "MXTouchViewGroupItems" created for each tab; each "MXTouchViewGroupItem" has one of your views associated to it. You'll want to create an appropriate "MXTouchViewGroup" item for your tab bar, and then add the group to your "MXTouchContainer" as shown, and then let the framework navigate to the first view as usual.

The result of all this is that when navigating to a view that is in a "group" (ie "Tab1View" or "Tab2View"), the framework will automagically render a tab bar with the view, without any further intervention. If you navigate to a view that isn't in a "group" (ie "OtherView"), the tabbar will not render.

That's it.