ToolbarItems 圖標未顯示

Question

如何在文本“分享”之前添加一個圖標？

下面的代碼只顯示文本而不是圖標。 我已將圖標添加到可繪制文件夾中

<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

Secondary Toolbar item的圖標被設計隱藏。

檢查線程：

如何更改輔助工具欄的圖標 Xamarin Forms 。 https://forums.xamarin.com/discussion/47989/icon-for-toolbaritem-with-order-secondary 。

我創建了鏈接中提到的解決方法，它工作正常。

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>

背后的代碼

    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

圖片沒有出現是因為您錯誤地將icon_share.png和icon_delete.png添加到您的項目中。

以下是Microsoft 關於如何將圖像添加到 Xamarin.Forms 項目的建議：

圖像文件可以添加到每個應用程序項目中，並從 Xamarin.Forms 共享代碼中引用。 當圖像是特定於平台的時，例如在不同平台上使用不同的分辨率或略有不同的設計時，需要這種分發圖像的方法。

要在所有應用程序中使用單個圖像，必須在每個平台上使用相同的文件名，並且它應該是有效的 Android 資源名稱（即只允許小寫字母、數字、下划線和句點）。

iOS - 自 iOS 9 以來管理和支持圖像的首選方法是使用資產目錄圖像集，其中應包含支持應用程序的各種設備和比例因子所需的所有圖像版本。 有關更多信息，請參閱將圖像添加到資產目錄圖像集。

Android - 使用 Build Action: AndroidResource 將圖像放置在 Resources/drawable 目錄中。 還可以提供圖像的高和低 DPI 版本（在適當命名的資源子目錄中，例如 drawable-ldpi、drawable-hdpi 和 drawable-xhdpi）。

通用 Windows 平台 (UWP) - 默認情況下，圖像應放置在應用程序的根目錄中，構建操作：內容。 或者，可以將圖像放置在不同的目錄中，然后使用特定於平台的方式指定該目錄。 有關詳細信息，請參閱 Windows 上的默認映像目錄。

建議

1. 永久刪除Icon ； Icon被棄用，取而代之的是IconImageSource
2. 暫時刪除IconImageSource ，將其替換為Text="Share"和Text="Delete" ：

• 這將確認ContentPage.ToolbarItems工作正常，並且您已錯誤地將png圖像添加到 Xamarin.Forms 項目

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