ToolbarItem is not showing

Question

Im currently reading trough this book.

Already at the beginning of the book I have a problem. I have Primary ToolbarItems and Secondary ToolbarItems. But none of them are shown. What am I doing wrong?

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:BookCode" 
             x:Class="BookCode.MainPage"
             Title="Visuals">


    <StackLayout Padding="10,0">
        <Label Text="Hello, Xamarin.Forms!"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center"/>

        <Button Text="Click Me!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"/>

        <Switch VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"/>
    </StackLayout>

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="edit" Order="Primary">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="edit.png"
                            Android="ic_action_edit.png"
                            WinPhone="Images/edit.png"/>

            </ToolbarItem.Icon>
        </ToolbarItem>
        <ToolbarItem Text="search" Order="Primary">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="search.png"
                            Android="ic_action_search.png"
                            WinPhone="Images/feature.search.png"/>
            </ToolbarItem.Icon>
        </ToolbarItem>

        <ToolbarItem Text="refresh" Order="Primary">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="reload.png"
                            Android="ic_action_refresh.png"
                            WinPhone="Images/refresh.png"/>
            </ToolbarItem.Icon>
        </ToolbarItem>

        <ToolbarItem Text="explore" Order="Secondary"/>
        <ToolbarItem Text="discover" Order="Secondary"/>
        <ToolbarItem Text="evolve" Order="Secondary" />
    </ContentPage.ToolbarItems>


</ContentPage>

Where do you have the images for the icons stored? Are you seeing the same result when adding `ToolbarItem`s in C#? — Tom, Nov 23 '18 at 10:12
Ohh. I see. I just assumed the images were there by standard since they are not really mentioned to pasted somehwere. But one thing I still dont understand, the ToolbarItems with 'Order="Secondary"' are not shown. They don´t use any Images. Where are they? — axbeit, Nov 23 '18 at 10:18
No, `Secondary` items do not have icons. They are displayed as text-only. As an FYI, they'll work better on Android than iOS, as iOS doesn't typically allow secondary toolbar items. On Android, you'll have a toolbar item extension (three dots), but iOS will just accumulate them on the toolbar. You will have to add your won images to the respective resource directories for each platform. — Tom, Nov 23 '18 at 10:31
So I took a look in the "Resources" Folder of BookCode.iOS and found a few .png files. I replaced the images to Default.png (example: edit.png to Default.png). Images are still not shown. I thought maybe its width/height were too high so I downloaded a 25x25 image, pasted it in the "Resources" folder, changed Default.png to a.png (the 25x25 image) and tried it again. Still no ToolbarItem :( — axbeit, Nov 23 '18 at 11:02
Have you tried without icons? The text should still appear. Alternatively, move you `ContentPage.ToolbarItems` above you `StackLayout`. — Tom, Nov 23 '18 at 11:54
Yes I tried it without icons. Nothing changed. I tried to put ContentPage.ToolbarItems above the StackLayout. Also nothing changed. — axbeit, Nov 23 '18 at 12:45

score 4 · Accepted Answer · answered Nov 30 '18 at 08:06

4

The ToolbarItems needs a Navigation Page to show them up. So modify MainPage wrapped by a navigation page:

MainPage = new NavigationPage(new MainPage());

answered Nov 30 '18 at 08:06

axbeit

853
11
35

Hi mate, just a question, where do you add this line? I am in the same situation where I got the code for ContentPage.ToolbarItems but the Toolbar is not showing up. Thanks. – Long Dao May 28 '20 at 00:17

score 3 · Answer 2 · answered Nov 23 '18 at 14:03

3

Here you go.

<ContentPage.ToolbarItems>
    <ToolbarItem Text="edit" Order="Primary">
        <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"
                        Android="icon.png"/>

        </ToolbarItem.Icon>
    </ToolbarItem>
    <ToolbarItem Text="search" Order="Primary">
        <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"
                       Android="icon.png"/>
        </ToolbarItem.Icon>
    </ToolbarItem>

    <ToolbarItem Text="refresh" Order="Primary">
        <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"
                        Android="icon.png"/>
        </ToolbarItem.Icon>
    </ToolbarItem>

    <ToolbarItem Text="explore" Order="Secondary"/>
    <ToolbarItem Text="discover" Order="Secondary"/>
    <ToolbarItem Text="evolve" Order="Secondary" />
</ContentPage.ToolbarItems>


<ContentPage.Content>
    <StackLayout Padding="10,0">
        <Label Text="Hello, Xamarin.Forms!"
           FontSize="Large"
           VerticalOptions="CenterAndExpand"
           HorizontalOptions="Center"/>

        <Button Text="Click Me!"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"/>

        <Switch VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage.Content>

answered Nov 23 '18 at 14:03

Wasif Mahmood Mustafa

577
4
8

I copied your code and changed "Android="icon.png"" to "iOS="Default.png"". I just cant see those ToolbarItem s - https://imgur.com/a/9weMdxQ – axbeit Nov 23 '18 at 14:11
Don't change, just add iOS. And i just showed you the running code on Android. See if you have this picture in iOS project. – Wasif Mahmood Mustafa Nov 23 '18 at 14:59
This time I copied your code and added iOS. I still cant see the ToolbarItems :( – axbeit Nov 26 '18 at 08:25
Check whether the image is in the iOS project or not. – Wasif Mahmood Mustafa Nov 26 '18 at 12:41
@Wasif Mahmood Mustafa : If you could tell me in WHICH android folder I have to look for "icon.png", there are so many..... For me too, only text, no icon (is in drawable) – Martin Jan 29 '20 at 15:06
@Martin Drawable folder where you put all your icons. – Wasif Mahmood Mustafa Jan 29 '20 at 22:34

ToolbarItem is not showing

2 Answers2