user2244553
user2244553

Reputation: 23

FlyoutNavigation Controller

Using MonoDevelop, I have been looking at an IOS implementation of a side slide out menu using FlyoutNavigationController, but have hit a couple of stumbling blocks.

Firstly, how can you access the font elements of the generated list?
I can easily modify row heights etc, but am unsure of how to proceed with modifying the list items, can this be down with a tablesource and item styling?

Secondly, how to open a view from this list? Currently an empty view is used by default but new views are to be opened from the side menu list, I have tried using the push navigation controller but it fails to open.

Any ideas are more than welcome.

navigation = new FlyoutNavigationController();
navigation.View.Frame = UIScreen.MainScreen.Bounds;
View.AddSubview(navigation.View);

navigation.NavigationRoot = new RootElement ("Menu List") 
{
    new Section ("Menu List") 
    {
        from page in SlideList
        select new StringElement (page.title) as Element
    }
};

navigation.NavigationTableView.BackgroundColor = UIColor.DarkGray;
navigation.NavigationTableView.RowHeight = 30;
navigation.NavigationTableView.SeparatorStyle = UITableViewCellSeparatorStyle.SingleLine;
navigation.NavigationTableView.SeparatorColor = UIColor.LightGray;
navigation.NavigationTableView.SectionHeaderHeight = 60;
//navigation.NavigationTableView.DataSource = SlideList;


//navigation.ViewControllers = Array.ConvertAll (MenuItems, title => new UINavigationController (new TaskPageController (navigation, title)));

navigation.ViewControllers = Array.ConvertAll (MenuItems, title => new TaskPageController (navigation, title));

this.NavigationItem.LeftBarButtonItem = new UIBarButtonItem (UIBarButtonSystemItem.Action, delegate {
                navigation.ToggleMenu();
});

Upvotes: 2

Views: 1597

Answers (1)

Ben Bishop
Ben Bishop

Reputation: 1414

I haven't used the FlyOutNavigationController before, but I took a look at this example: https://github.com/xamarin/FlyOutNavigation

It looks like you're supposed to have the same number of StringElements as Controllers. For the ViewControllers array, it looks like you can supply your own custom controllers instead of just plain ViewControllers. After that, clicking a list item should automatically navigate to the appropriate controller.

In regards to styling, looking at the source for this NavigationController, I don't see much in terms of being able to stylize the cells. I did a quick search for how to go about styling MonoTouch Dialog lists and it looks like there isn't an easy way without subclassing elements:

Monotouch Dialog: Styling Elements

However, I can share with you how I've accomplished the two questions you asked without the Dialog framework.

You can create a custom class that extends UITableViewSource: http://docs.xamarin.com/guides/ios/user_interface/tables/part_2_-_populating_a_table_with_data

In the GetCell method override, you can grab an instance of the cell's label and set the font like so:

cell.TextLabel.Font = UIFont.FromName("TitlingGothicFB Cond", 20);

Another thing you can do with your custom UITableViewSource class is create a custom event:

public event EventHandler ListItemSelected;

Inside the RowSelected method you can dispatch this event:

public override void RowSelected (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{
     ListItemSelected(this, new MyCustomEventArgs(indexPath.Row));
}

In the controller class that was responsible for instantiating this TableSource, you can listen and handle this event like so:

var customTableSource = new CustomTableSource(myList);
MyTable.Source = customTableSource;
customTableSource.ListItemSelected += (object sender, EventArgs e) => {
     if((e as MyCustomEventArgs).rowSelected == 1){
          this.NavigationController.PushViewController(new MyNextViewController(), true));
     }
}

Upvotes: 2

Related Questions