Forum› Xamarin.Forms

How to customise the Toolbar so all icons/text fits on one line?

WReynolds7WReynolds7 Member ✭✭
in Xamarin.Forms

I have a tabbed page that uses a collection of ToolbarItems to be added to the navigation bar. These are added successfully but some are not being displayed due to the amount of ToolbarItems added and the length of text on some of them. I have been researching possible solutions for this problem and haven't had much luck, I was hoping it would be as straight forward as padding, margin or LineBreakModes. The only real solution I have been pondering on is a custom renderer (I have never had to do one and don't really know what they are and if I can even apply a custom renderer to a ToolbarItem/Navigation bar).

I have attached an image to this post to show you an example of what I'm referring to. It cannot fit "Assessment" on one line and the Secondary Toolbar (ellipsis menu) is not being shown.

I've googled this problem a lot and didn't come across any posts similar or any suggested solutions but I apologies if this becomes a duplicated post.

Any help will be massively appreciated :)

Tagged:

Best Answer

Answers

  • WReynolds7WReynolds7 Member ✭✭

    Thanks for your answer! We currently have some secondary items at the moment so if there is no code solution your suggestion could be the direction we take.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Ok, If the reply is helpful for you, please mark it as answer, it will help others who have similar issue.

  • WReynolds7WReynolds7 Member ✭✭

    It's helpful but not something I haven't already thought about and tried. I didn't want to mark as answered because someone else might be able to provide an alternative solution.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Ok, thanks for your update. You can share this solution and mark it here.

  • randerrander Member ✭

    Is possible customize this Secondary item with color, etc... ?

  • WReynolds7WReynolds7 Member ✭✭

    I'm not sure. I would play around with the platform-specific styling, like the primary and secondary colours for Android to see if it changes. I haven't had time to investigate it but in our code we have no colour property or styling on our ToolBarItems.

    Sorry for not helping much!

  • igorkr_10igorkr_10 Member ✭✭✭✭
    edited April 2020

    @LeonLu said:
    If you have many ToolbarItems, you can put the Primary items in the Toolbar directly, other items put it in the Secondary Order like following screenshot.

    Here is code.

       <ContentPage.ToolbarItems>
    <ToolbarItem Text ="Item 1"  
            Priority="0" Order="Primary" />
    <ToolbarItem Text ="Item 2"  
          Priority="1" Order="Primary" />
    <ToolbarItem Text ="Item 3"  
          Priority="1" Order="Primary" />
    <ToolbarItem Text ="Item 4"  
          Priority="1" Order="Primary" />
    <ToolbarItem Text ="Item 5"  
          Priority="1" Order="Primary" />
    <ToolbarItem Text ="Item 6" 
          Priority="1" Order="Secondary" />
    <ToolbarItem Text ="Item 6" 
          Priority="1" Order="Secondary" />
    <ToolbarItem Text ="Item 6" 
          Priority="1" Order="Secondary" />
</ContentPage.ToolbarItems>

    On your screenshot toolbar items fill all row. But in my application I have the next result:

    My xaml:

    <ContentPage.ToolbarItems>
        <ToolbarItem Clicked="OnFilterClicked" Order="Primary">
            <ToolbarItem.IconImageSource>
                <FontImageSource Glyph="{x:Static icons:MaterialDesignIcons.FilterOutline}" Size="26" FontFamily="{x:StaticResource MaterialFontFamily}" Color="{DynamicResource PrimaryColor}"/>
            </ToolbarItem.IconImageSource>
        </ToolbarItem>
        <ToolbarItem Clicked="OnSortClicked" Order="Primary">
            <ToolbarItem.IconImageSource>
                <FontImageSource Glyph="{x:Static icons:MaterialDesignIcons.Sort}" Size="26" FontFamily="{x:StaticResource MaterialFontFamily}" Color="{DynamicResource PrimaryColor}"/>
            </ToolbarItem.IconImageSource>
        </ToolbarItem>
        <ToolbarItem Command="{Binding ChangeViewTypeCommand, Mode=OneWay}" Order="Primary">
            <ToolbarItem.IconImageSource>
                <FontImageSource Glyph="{x:Static icons:MaterialDesignIcons.ViewAgendaOutline}" Size="26" FontFamily="{x:StaticResource MaterialFontFamily}" Color="{DynamicResource PrimaryColor}"/>
            </ToolbarItem.IconImageSource>
        </ToolbarItem>
    </ContentPage.ToolbarItems>

    Note: the item in three-dot-button is Shell search.
    Thanks.

Sign In or Register to comment.