ToolbarItemとは?
ToolbarItemとは,アイコンや文字をならべて表示できるコントロールです。保存ボタンやメールボタン等を設置することができます。右端の「・・・」のエリアを押すと,そこにも文字でツールが表示されます。どちらに表示するかを指定することができます。
準備
今回はToolbarItemPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,ToolbarItemPage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにToolbarItemPageの実装をして問題ありません。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XSample.Objects; namespace XSample.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class ControlsPage : ContentPage { public ControlsPage() { InitializeComponent(); var items = new List<MenuDto>(); items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png")); items.Add(new MenuDto("ToolbarItemPage", "ToolbarItemの使い方", "mail.png")); MyListView.ItemsSource = items; } private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e) { var item = e.Item as MenuDto; if (item.Title == "SwitchPage") { Navigation.PushAsync(new SwitchPage()); } else if (item.Title == "ToolbarItemPage") { Navigation.PushAsync(new ToolbarItemPage()); } } } }
ToolbarItemPageの追加
Pagesフォルダーに新規追加でToolbarItemPageという名前のコンテンツページを作成してください。作成されたら,次のように記述します。
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XSample.Pages.ToolbarItemPage"> <ContentPage.ToolbarItems> <ToolbarItem Icon="mail.png" Order="Primary" Clicked="AAAToolbarItem_Clicked"/> <ToolbarItem Icon="mail.png" Text="BBB" Order="Primary" Clicked="BBBToolbarItem_Clicked"/> <ToolbarItem Icon="mail.png" Text="CCC" Order="Secondary"/> <ToolbarItem Icon="mail.png" Text="DDD" Order="Secondary"/> </ContentPage.ToolbarItems> <ContentPage.Content> <StackLayout> <Label Text="Welcome to Xamarin.Forms!" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage>
ContentPage.ToolbarItems
ContentPage.Contentの前にContentPage.ToolbarItemsエリアを記述し,そこにToolbarItemを記述します。ToolbarItemは必要なだけ作成します。
Icon
画像表示のときのアイコンを設定します。
Text
文字表示のときに使われる文言を設定します。
Order
Primaryと Secondaryがあります。最初から表示されるエリアに出す場合はPrimaryを設定します。右側の「・・・」を押したときだけ表示させる場合は Secondaryを設定します。
Clicked
ツールをタップされたときのイベントです。それぞれのツールに設定することで,どのツールが押下されたのかが判断できます。
コードビハインド側の実装
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace XSample.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class ToolbarItemPage : ContentPage { public ToolbarItemPage () { InitializeComponent (); } private void AAAToolbarItem_Clicked(object sender, EventArgs e) { } private void BBBToolbarItem_Clicked(object sender, EventArgs e) { } } }
コードビハインド側にClickedイベントを実装します。ブレークポイントを設置して,それぞれのツールごとにイベントが通知されていることが確認できます。
実行
実行するとOrderにPrimaryで設定しているItemのみが表示され,SecondaryのItemは「・・・」を押下したときに表示されます。またItemをタップするとそれぞれのClickedイベントに通知されます。