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

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イベントに通知されます。