locked
TabbedPage Icons RRS feed

  • Question

  • User37827 posted

    I have killed many, many hours now trying to make icons appear for Tabbed Pages on iOS. According to all of the forum and blog posts I've seen this is supposed to be super simple.

    In fact my page is exactly this simple:

    public class MainPage : TabbedPage
    {
        public MainPage ()
        {
            Page page = new Page {
                Title = "Title",
                Icon = "clock.png"
            };
    
            this.Children.Add (page);
        }
    }
    

    The tab shows up, the "title" shows up, the icon never does.

    The PNG is in the Resources folder of the iOS project and the build action is set to BundleResource.

    I've tried: - a wide variety of images for the icon - a txt.png that I got from a sample, varying sizes from 30x30 to 48x48. - using icons from 3rd parties specifically designed to be beautiful, awesome, iOS icons for my app.
    - ensuring that the filename is all lower case, no spaces, dashes, tildes, acronyms or puns. - using a FileImageSource instead. - cleaning the project, rebuilding the project, uninstalling the app, killing the emulator. - Throwing salt over my shoulder, buying a rabbit's foot and throwing pennies in a fountain.

    There is either some secret sauce to this or a bug ... would appreciate any suggestions.

    Thanks,

    Michael

    Friday, February 6, 2015 4:45 PM

All replies

  • User55329 posted

    Yeah, we had problems with this too. I ended up making a custom renderer for this.

    ``` using UIKit; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyProject.iOS.Renderers.IosMainMenuRenderer))]

    namespace MyProject.iOS.Renderers { public class IosMainMenuRenderer : TabbedRenderer { public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); var items = TabBar.Items; for (var i = 0; i < items.Length; i++) { var icon = i == 0 ? "apple" : i == 1 ? "bear" : i == 2 ? "chair" : i == 3 ? "door" : "elephant"; items[i].Image = UIImage.FromBundle("icmenu" + icon); items[i].SelectedImage = UIImage.FromBundle("icmenu" + icon + "_sel"); } } } } ```

    This also solved the problem of specifying a selected image for the tabs in the case where simple tinting didn't suffice.

    Friday, February 6, 2015 4:55 PM
  • User37827 posted

    Thank you so much Geoff, your code fixed the issue for me straight away. I really appreciate it.

    Friday, February 6, 2015 6:28 PM
  • User55329 posted

    No problem! We're all in this together. :smile:

    Friday, February 6, 2015 11:56 PM
  • User265270 posted

    @GeoffArmstrong said: Yeah, we had problems with this too. I ended up making a custom renderer for this.

    ``` using UIKit; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyProject.iOS.Renderers.IosMainMenuRenderer))]

    namespace MyProject.iOS.Renderers { public class IosMainMenuRenderer : TabbedRenderer { public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); var items = TabBar.Items; for (var i = 0; i < items.Length; i++) { var icon = i == 0 ? "apple" : i == 1 ? "bear" : i == 2 ? "chair" : i == 3 ? "door" : "elephant"; items[i].Image = UIImage.FromBundle("icmenu" + icon); items[i].SelectedImage = UIImage.FromBundle("icmenu" + icon + "_sel"); } } } } ```

    This also solved the problem of specifying a selected image for the tabs in the case where simple tinting didn't suffice.

    How about the Toolbar item? Is it the same as TabbedRenderer?

    Wednesday, September 19, 2018 4:40 AM