是否可以动态更改 ToolbarItem 的图标？

Question

我想更改位于 TabbedPage 的 ToolbarItem 中的几个图标，我在这里查看了文档，我要么错过了重点，要么我希望实现的目标不可行？

我目前正在使用 FontAwesomeIcons 在我的应用程序中填充图标，从 static 的角度来看，它们效果很好。 但在某些情况下，我可能希望更改图标、颜色或图标包（例如 Light to Solid）。

App.xaml - 我用它来引用 my.otf 文件

<Application.Resources>
    <OnPlatform x:Key="FontAwesomeProLight" x:TypeArguments="x:String">
        <On Platform="iOS" Value="FontAwesome5Pro-Light" />
    </OnPlatform>
    <OnPlatform x:Key="FontAwesomeProSolid" x:TypeArguments="x:String">
        <On Platform="iOS" Value="FontAwesome5Pro-Solid" />
    </OnPlatform>
</Application.Resources>

ExamplePage.xaml - 这将是我当前（非动态）显示我的图标的页面

<TabbedPage.ToolbarItems>
    <ToolbarItem Clicked="OnFilterOrders">
        <ToolbarItem.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FontAwesomeProLight}" Glyph="{x:Static fonts:FontAwesomeIcons.Filter}" />
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</TabbedPage.ToolbarItems>

所以此时的代码完美地显示了一个 static 图标，下面是我失败的尝试 - 但没有抛出错误，我只是得到一个？ 反而

ExamplePage.xaml

<TabbedPage.ToolbarItems>
    <ToolbarItem Clicked="OnFilterOrders">
        <ToolbarItem.IconImageSource>
            <FontImageSource FontFamily="{DynamicResource FontAwesomeIconPack}" Glyph="{x:Static fonts:FontAwesomeIcons.Filter}" />
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</TabbedPage.ToolbarItems>

使用该页面的代码隐藏，我在构造函数中也有以下内容。

Resources["FontAwesomeIconPack"] = App.Current.Resources["FontAwesomeProLight"];

我是否正确假设 Resources["FontAwesomeIconPack"] 与页面资源字典链接，并且 App.Current.Resources["FontAwesomeProLight"] 链接到 app.xaml 页面？

我希望在这个例子中我能显示我现有的图标，但事实并非如此。 我的期望是和以前一样的图标（在我换包之前），但我只是得到一个？）。

Answer 1

如果您想在运行时更改选项卡图标的样式（例如图标，字体大小）。您应该使用自定义渲染器。

在 iOS

using System;

using UIKit;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using xxx;
using xxx.iOS;

[assembly:ExportRenderer(typeof(TabbedPage),typeof(MyTabbedPageRenderer))]
namespace xxx.iOS
{
    public class MyTabbedPageRenderer:TabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
        }

        public override void ViewDidAppear(bool animated)
        {
            base.ViewDidAppear(animated);

            MessagingCenter.Subscribe<Object, int>(this, "ChangeStyle", (args, position) => {

                UpdateItem(TabBar.Items[position], "xxx.png","xxx2.png");

            });

        }

        void UpdateItem(UITabBarItem item, string icon,string selectIcon)
         {
            if (item == null)
            {
                return;
            }
                                      
            // set default icon
            if (item?.Image?.AccessibilityIdentifier == icon)
              return;
            item.Image = UIImage.FromBundle(icon);
            item.Image.AccessibilityIdentifier = icon;

            //set select icon
            if (item?.SelectedImage?.AccessibilityIdentifier == selectIcon)
                return;
            item.SelectedImage = UIImage.FromBundle(selectIcon);
            item.SelectedImage.AccessibilityIdentifier = selectIcon;


            //set font
            item.SetTitleTextAttributes(new UITextAttributes() { Font=UIFont.SystemFontOfSize(10,UIFontWeight.Light)},UIControlState.Normal);
            item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.SystemFontOfSize(10, UIFontWeight.Light) }, UIControlState.Selected);
        }
    }
}

在 Android

您可以查看此博客，它使用自定义渲染器在 Android 中提供了解决方案。

在 Forms

使用MessagingCenter在需要时发送消息（例如单击按钮）

MessagingCenter.Send<Object, int>(this, "ChangeStyle", 0);

Answer 2

事情可能已经改变，但我只是将子 NavigationPage 的 IconImageSource 绑定到 viewmodel 字符串，并且动态图标选择工作正常。

这是在 Android 和 iOS 上测试的。