Edited at

Xamarin.FormsのNavigationBarにカラーアイコンをつけて動的に変更も反映させたい

More than 1 year has passed since last update.


いきさつ

Xamarin.Formsでナビゲーションバーにアイコンを置くと、Androidは問題ないんだけどiOSだと単色表示になる

アイコン画像そのままの色を出したかったので下記サイトを参考に実装してみたところ、これだと初期表示はうまく表示されるんだけど、表示後にアイコンを差し替えると単色表示に戻ってしまう

あれこれ調べてなんとか動いたのでメモ

最低限動くだけのコードしかないので色々処理が(不足|過剰|無駄)かも


作ったカスタムレンダラ(iOS)

using System;

using System.Collections.Generic;
using System.Linq;
using System.Windows.Input;
using UIKit;
using CoreGraphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Sample.iOS.Renderer;

[assembly: ExportRenderer(typeof(ContentPage), typeof(SamplePageRenderer))]
namespace Sample.iOS.Renderer
{
public class SamplePageRenderer : PageRenderer
{
List<ToolbarItem> _primaryItems;

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
var page = e.NewElement as Page;
if (page != null)
{
_primaryItems = page.ToolbarItems.ToList();
}
base.OnElementChanged(e);
}

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

if (this.NavigationController == null) return;

var items = this.NavigationController.TopViewController.NavigationItem;

foreach (var item in items.RightBarButtonItems)
{
if (item.Image == null) continue;

foreach (var tool in _primaryItems)
{
tool.PropertyChanged += this.ToolPropertyChanged;
}

item.Image = item.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}
}

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

foreach (var tool in _primaryItems)
{
tool.PropertyChanged -= this.ToolPropertyChanged;
}
}

void ToolPropertyChanged(object sender, EventArgs args)
{
var navigationItem = this.NavigationController.TopViewController.NavigationItem;
if (navigationItem != null)
{
var item = sender as ToolbarItem;
if (navigationItem.RightBarButtonItems[item.Priority].Image != null)
{
navigationItem.RightBarButtonItems[item.Priority].Image = navigationItem.RightBarButtonItems[item.Priority].Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}
}
}

}
}


参考にさせて頂いたサイト

Xamarin.Forms で iOS のナビゲーションバーに色付きアイコンを置きたい(Microsoft 系のあれこれ)

http://shunsukekawai.hatenablog.com/entry/2017/09/01/220523

iOSのToolbarItemのスペースを調整してレイアウトを整える方法 | Xamarin.Forms(ITブログ時々なんでもブログ)

http://itblogdsi.blog.fc2.com/blog-entry-277.html