Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#32 ToolbarItemの使い方を解説

ToolbarItemとは?

ToolbarItemとは,アイコンや文字をならべて表示できるコントロールです。保存ボタンやメールボタン等を設置することができます。右端の「・・・」のエリアを押すと,そこにも文字でツールが表示されます。どちらに表示するかを指定することができます。

準備

今回はToolbarItemPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,ToolbarItemPage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにToolbarItemPageの実装をして問題ありません。

ToolbarItemPageの追加

Pagesフォルダーに新規追加でToolbarItemPageという名前のコンテンツページを作成してください。作成されたら,次のように記述します。

ContentPage.ToolbarItems

ContentPage.Contentの前にContentPage.ToolbarItemsエリアを記述し,そこにToolbarItemを記述します。ToolbarItemは必要なだけ作成します。

Icon

画像表示のときのアイコンを設定します。

Text

文字表示のときに使われる文言を設定します。

Order

Primaryと Secondaryがあります。最初から表示されるエリアに出す場合はPrimaryを設定します。右側の「・・・」を押したときだけ表示させる場合は Secondaryを設定します。

Clicked

ツールをタップされたときのイベントです。それぞれのツールに設定することで,どのツールが押下されたのかが判断できます。

コードビハインド側の実装

コードビハインド側にClickedイベントを実装します。ブレークポイントを設置して,それぞれのツールごとにイベントが通知されていることが確認できます。

実行

実行するとOrderにPrimaryで設定しているItemのみが表示され,SecondaryのItemは「・・・」を押下したときに表示されます。またItemをタップするとそれぞれのClickedイベントに通知されます。

Xamarin.Formsでスマホアプリ開発

C#を正しい3層構造で造れてますか?

非売品コースを受け取る