Xamarin.Forms の NavigationPage に ToolbarItem を追加するには

こんにちは。エクセルソフトの田淵です。

2015/07/23 追記：MasterDetailPage の使い方エントリー書きました。Xamarin.Forms で MasterDetailPage を使うには - Xamarin 日本語情報

Xamarin.Formsでツールバーアイテムによるメニューを設置するには？ - Build Insider

を参考に色々試しています。

2015/7/22 現在の Xamarin for Visual Studio 3.11.666 と Xamarin.Forms 1.4.3.6376 での情報です。

追加方法

BuildInsider にある通りで変わりありませんので、割愛しますｗ

page の ToolbarItems プロパティ (IList<ToolbarItem>) に ToolbarItem を追加していくだけです。

メニュー画面やログイン画面などを出したい時に使うと良いかと思いますが、現実的に 1個、2個が限度だと思います。それ以上増やす場合は、この後書く予定の MasterDetailPage をご利用頂くのが良いかと思います。

画像について

基本的には BuildInsider の通りですが、画像の利用については Android と WinPhone には改善が見られるようで、大きな画像でも大丈夫そうでした。大きめの画像を用意して勝手に縮小してもらう方が楽そうです。iOS はダメでしたｗ

f:id:ytabuchi:20150722142906p:plain:w150
デカ…ｗｗ

今回は iOS 用に 25px の setting.png と 50px の setting@2x.png を用意しました。余白が大きかったので 50px にしましたが、本来は BuildInsider にあるように 44px で 2x 画像を用意するのが良いかもしれません。

また、WinPhone には画像が必須ですが、iOS、Android に画像を表示したくない場合は、例えば次のように Device.OnPlatform を使うと良さそうです。

// 普通に追加
ToolbarItems.Add(new ToolbarItem
{
    Text = "設定 ≡",
    Icon = "setting.png",
    Command = new Command(xxx),
});

// WinPhone だけアイコン設定して追加
var tbi = new ToolbarItem
{
    Text = "設定 ≡",
    Command = new Command(xxx),
};
tbi.Icon = Device.OnPlatform(null, null, "setting.png");
ToolbarItems.Add(tbi);

Xaml

<ContentPage.ToolbarItems>
  <ToolbarItem Text="設定 ≡" Icon="setting.png" Clicked="xxx" />
  <ToolbarItem Text="設定 ≡" Clicked="xxx">
    <ToolbarItem.Icon>
      <OnPlatform x:TypeArguments="FileImageSource"
                  iOS=""
                  Android=""
                  WinPhone="setting.png" />
    </ToolbarItem.Icon>
  </ToolbarItem>
</ContentPage.ToolbarItems>