読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

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 にある通りで変わりありませんので、割愛しますw

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

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

画像について

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

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

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

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

C#

// 普通に追加
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>

こんな感じです。

f:id:ytabuchi:20150722143122p:plain:w150 f:id:ytabuchi:20150722143145p:plain:w150 f:id:ytabuchi:20150722143200p:plain:w150

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。