Add icons to menu items in Evolve FlyoutNavigationController in Monotouch - ios

Question

I have the Evolve Flyout Navigation Controller working on my iOS app but i'm not sure how to add icons to this code. I want an icon to display to the left of each menu item and be unique to the menu item. Here's my code:
// Subclass the component to keep the configuration in one place
using FlyoutNavigation;
namespace Mobile.iOS7
{
public class EvolveFlyoutNavigationController : FlyoutNavigationController
{
string[] MenuTasks = {
"Menu Item One",
"Menu Item Two",
"Menu Item Three",
"Menu Item Four",
};
UINavigationController notImplementedVC;
public EvolveFlyoutNavigationController () : base ()
{
// Create the navigation menu
var menuSection = new Section ();
foreach(var page in MenuTasks)
menuSection.Add(new StyledStringElement (page) { BackgroundColor = MyColors.DarkGray, TextColor = UIColor.White, Font = UIFont.FromName("Lato-Black", 16f) });
NavigationRoot = new RootElement ("Menu") {
menuSection
};
List <UINavigationController> vcList = new List<UINavigationController> ();
var mainSB = UIStoryboard.FromName ("MainStoryboard", null);
vcList.Add(new UINavigationController (mainSB.InstantiateViewController ("DashboardViewController") as DashboardViewController));
vcList.Add(new UINavigationController (mainSB.InstantiateViewController ("LocatorTabController") as LocatorTabController));
ViewControllers = vcList.ToArray ();
NavigationTableView.BackgroundView = new UIImageView (new UIImage ("bg-nav.png"));
NavigationTableView.SeparatorColor = UIColor.LightGray;
}
}
}
Any help is much appreciated!

Answer 1

The menu is being draw with MonoTouch.Dialog, using a StyledStringElement. This element supports an ImageUri property you can use to specify an image to display:
menuSection.Add(new StyledStringElement (page) {
BackgroundColor = MyColors.DarkGray,
TextColor = UIColor.White,
Font = UIFont.FromName("Lato-Black", 16f),
ImageUri = new Uri(__path_to_your_image__)
});