XAMLのお勉強メモ ⑧

こんばんは。ざわです。

今回もXAMLについて、過去履歴はこちらです。

　・XAMLのお勉強メモ①

　・XAMLのお勉強メモ②

　・XAMLのお勉強メモ③

　・XAMLのお勉強メモ④

　・XAMLのお勉強メモ⑤

　・XAMLのお勉強メモ⑥

　・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"にすると「︙」のメニューアイコンの表示になります。

メニューアイコンをクリック　↓

今日はこれで終わりとします。

それではまたー。