こんばんは。ざわです。
今回もXAMLについて、過去履歴はこちらです。
動作環境
・Windows10
・Microsoft Visual Studio Community 2022 Preview 7.0
・Xamarin.Forms
今回試してみたこと
今回は「ToolbarItem」を使ってナビゲーションバーにボタンを表示する方法を試してみようと思います。
できあがりの画面イメージはこちら。（枠線のところがToolbarItem）
１．ContentPageのToolbarItemsコレクションにToolbarItemを追加し、
下記のプロパティを設定します。
・Text ： ToolbarItemに表示するテキスト文字
・IconImageSource ： ToolbarItemに表示するアイコン
・Order ： プライマリメニューとセカンダリメニューのどちらで表示するかの設定
・Priority ： ToolbarItemsコレクション内のアイテムの表示順序
今回は「ホーム」「検索」「設定」の３つのボタンを追加しています。
<?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="App8.MainPage"
Title="画面タイトル">
<ContentPage.ToolbarItems>
<ToolbarItem Text="ホーム"
IconImageSource="home.png"
Order="Primary"
Priority="0"
Clicked="ToolbarItem_Home_Clicked" />
<ToolbarItem Text="検索"
IconImageSource="search.png"
Order="Primary"
Priority="1"
Clicked="ToolbarItem_Search_Clicked"/>
<ToolbarItem Text="設定"
IconImageSource="setting.png"
Order="Primary"
Priority="2"
Clicked="ToolbarItem_Setting_Clicked"/>
</ContentPage.ToolbarItems>
</ContentPage>
２．実行する前に、ToolbarItemはナビゲーションバーにのみ表示されるため、
このページ（MainPage.xaml）をナビゲーションページにラップしておきます。
App.xaml.cs
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace App8
{
public partial class App : Application
{
public App()
{
InitializeComponent();
//MainPage = new MainPage();
MainPage = new NavigationPage(new MainPage());
}
protected override void OnStart()
{
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}
ここまでで実行すると、最初の画面イメージとなります。
簡単にできましたですね。あとはプロパティの設定を変えたときの表示がどうなるかちょこっと試してみます。
３．アイコン（「IconImageSource」プロパティ）を設定しなければ「Text」プロパティで設定した文字で表示されます。
４．「Order」プロパティ値を "Secondary" に変更してみます。
<ContentPage.ToolbarItems>
<ToolbarItem Text="ホーム"
IconImageSource="home.png"
Order="Primary"
Priority="0"
Clicked="ToolbarItem_Home_Clicked" />
<ToolbarItem Text="検索"
IconImageSource="search.png"
Order="Secondary"
Priority="1"
Clicked="ToolbarItem_Search_Clicked"/>
<ToolbarItem Text="設定"
IconImageSource="setting.png"
Order="Secondary"
Priority="2"
Clicked="ToolbarItem_Setting_Clicked"/>
</ContentPage.ToolbarItems>
"Secondary"にすると「︙」のメニューアイコンの表示になります。
メニューアイコンをクリック ↓
