ToolbarItems icon not showing up

Issue

how to add an icon before the text “Share”?

below code only displays text and not icon. I have added icon into drawable folder

<ContentPage.ToolbarItems>
    <ToolbarItem Name"Share" Order"Secondary" IconImageSource"icon_share.png" Icon"icon_share.png" Priority"0" />
    <ToolbarItem Name"Delete" Order"Secondary" IconImageSource"icon_delete.png" Icon"icon_delete.png" Priority"1" />
</ContentPage.ToolbarItems>

Solution

The icon for Secondary Toolbar item is hidden by design .

Check the threads :

How to change icon of Secondary Toolbaritem Xamarin Forms. https://forums.xamarin.com/discussion/47989/icon-for-toolbaritem-with-order-secondary.

I create the workaround that mentioned in the links, it works fine .

Xaml

 <ContentPage.ToolbarItems>
        <ToolbarItem Order"Primary" Icon"dots.png" Priority"1" Clicked"ToolbarItem_Clicked" />
    </ContentPage.ToolbarItems>

    <RelativeLayout>
        <ListView x:Name"SecondaryToolbarListView" 
                  VerticalOptions"Start" 
                  HorizontalOptions"Start"
                  WidthRequest"150" IsVisible"False"
                  ItemTapped"SecondaryToolbarListView_ItemTapped"
                  RelativeLayout.XConstraint"{ConstraintExpression TypeRelativeToParent, PropertyWidth, Factor1, Constant-160}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout  Orientation"Horizontal" Spacing"10" Padding"5,5,5,5">
                            <Image HeightRequest"30" HorizontalOptions"Start" VerticalOptions"Center" Source"{Binding ImagePath}" />
                            <Label FontSize"15" VerticalOptions"Center" HorizontalOptions"Start" Text"{Binding MenuText}"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </RelativeLayout>

Code behind

    public class ToolbarItemModel
    {
        public string ImagePath { get; set; }
        public string MenuText { get; set; }
    }


  public Page2()
        {
            InitializeComponent();

            var items  new List<ToolbarItemModel>
            {
                new ToolbarItemModel {ImagePath  "dog.png", MenuText  "First Item"},
                new ToolbarItemModel {ImagePath  "dog.png", MenuText  "Second Item"}
            };
            SecondaryToolbarListView.ItemsSource  items;
        }

        private void ToolbarItem_Clicked(object sender, EventArgs e)
        {
            SecondaryToolbarListView.IsVisible  !SecondaryToolbarListView.IsVisible;
        }

        private void SecondaryToolbarListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {

        }

enter image description here

Answered By – ColeX – MSFT

Leave a Comment