ToolbarItems 图标未显示

Question

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>

Answer 1

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 Type=RelativeToParent, Property=Width, Factor=1, 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)
        {

        }

Answer 2

The Images aren't appearing because you have incorrectly added icon_share.png and icon_delete.png to your project.

Here is Microsoft's recommendations on how to add images to your Xamarin.Forms project :

Image files can be added to each application project and referenced from Xamarin.Forms shared code. This method of distributing images is required when images are platform-specific, such as when using different resolutions on different platforms, or slightly different designs.

To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (ie only lowercase letters, numerals, the underscore, and the period are allowed).

iOS - The preferred way to manage and support images since iOS 9 is to use Asset Catalog Image Sets, which should contain all of the versions of an image that are necessary to support various devices and scale factors for an application. For more information, see Adding Images to an Asset Catalog Image Set.

Android - Place images in the Resources/drawable directory with Build Action: AndroidResource. High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi, drawable-hdpi, and drawable-xhdpi).

Universal Windows Platform (UWP) - By default, images should be placed in the application's root directory with Build Action: Content. Alternatively, images can be placed in a different directory which is then specified with a platform-specific. For more information, see Default image directory on Windows.

Recommendations

1. Permanently Remove Icon ; Icon was deprecated in favor of IconImageSource
2. Temporarily remove IconImageSource , replacing it with Text="Share" and Text="Delete" :

• This will confirm that ContentPage.ToolbarItems is working properly and that you have incorrectly added your png images to the Xamarin.Forms project

<ContentPage.ToolbarItems>
    <ToolbarItem Name="Share" Order="Secondary" Text="Share" />
    <ToolbarItem Name="Delete" Order="Secondary" Text="Delete" />
</ContentPage.ToolbarItems>