How to put images in tabbed page?

I wanna put some images in a xamarin forms tabbed page but i could not find any example of this, can anyone help me with that?

Posts

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    Are you referring to the icons for the tabs ?

    you can set the icon on your pages.

    http://iosapi.xamarin.com/index.aspx?link=P:Xamarin.Forms.Page.Icon

  • diazfrankelydiazfrankely USMember

    Yes im using that property but it is not rendering. And there's no documentacion avaliable yet :(

  • JasonAwbreyJasonAwbrey USInsider, University, Developer Group Leader mod

    are the images included as "bundled resources" in your iOS project? (not the shared/pcl project)

    tabs.Children.Add(new NavigationPage(new MapView()) { Icon = "103-map.png", Title = "Map" });

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    can you show your code, and tell us what platform you are trying?

  • diazfrankelydiazfrankely USMember

    I'm trying iOS and im doinng this.

    `
    public class HomePage : TabbedPage
    {
    public HomePage()
    {
    NavigationPage.SetHasNavigationBar(this, true);

            Title = "Mallen";
    
            var newsPage = new NewsPage{
                Icon = "noticias.png"
            };
            var messagesPage = new MessagesPage();
            var contactPage = new ContactPage();
    
    
            this.Children.Add(newsPage);
            this.Children.Add(messagesPage);
            this.Children.Add(contactPage);
    
    
        }
    }
    

    `

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    is noticias.png on your iOS Resources folder? and marked as resource ?

  • diazfrankelydiazfrankely USMember

    Yes it is actually im using in in an ImageView.

  • Toine_de_BoerToine_de_Boer NLUniversity ✭✭

    same problem here.

    Almost exact the same code as: tabs.Children.Add(new NavigationPage(new MapView()) { Icon = "103-map.png", Title = "Map" });

    But it won't show any image in any tab..... (iOS and Android)

    Loading the same image work fine when I load the image as: var image = new Image { Aspect = Aspect.AspectFit, Source =ImageSource.FromFile("newsicon.png")}; (also iOS and Android)

  • diazfrankelydiazfrankely USMember

    Same issue buddy.

  • Toine_de_BoerToine_de_Boer NLUniversity ✭✭

    :-)

    Same problem with BackgroundImage property (only works on Windows Phone)

    Page.BackgroundImage = "xbackground.png"; (does not work on Android and iPhone)

    Page.Icon = "xicon.png"; (doesn't show anything in Android and iPhone tabs)

  • AnthonyRamirezAnthonyRamirez USUniversity ✭✭✭

    I too am having an issue with this.

    Has anyone had any luck with this? :)

  • NamHoang.3859NamHoang.3859 CAMember ✭✭

    Hi, is there a way to stretch the image to fit 30x30 like Aspect=Fill? I think it is nice if we can use one image and have it fit to every platforms.

    Thanks.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Well, currently the images are only rendered on iOS so it isn't really a problem about fitting on the other platforms. However in future if tab images are supported on other platforms I would still strongly advise using custom images for each platform so that you can present Retina versions on iOS and multiple screen density options on Android.

  • DavidRossDavidRoss USUniversity

    One thing that should be noted is that if you use image sets in asset catalogs, the icon property will not work. I am unsure if this is the intended behavior, but I have not seen it mentioned elsewhere.

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    Thank you for confirming that, @DavidRoss. I was fighting with it for about an hour until I saw this and just moved the images out of the asset catalog.

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    Necro-ing this thread because it's got some useful information for posterity.

    Working on a new app, I got the tabbed page icons to work from an asset catalog. At the time, I was using the default Xamarin logo not-cataloged app icons and launch screen images, because I didn't have any yet. Now that I've replaced the app icon and launch screen with real resources in asset catalogs, the page icons being used in the tabbed page no longer work.

    Anyone have any ideas why the icons work this way on iOS?

Sign In or Register to comment.