【MAUI】タブメニューを表示させる

とっても簡単。

1.以下のように、Mainpageをトップ表示に指定します。

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new MainPage();//←ここ
    }
    
}

2.Mainpageの"Contentpage"になっているところを、"Tabbedpage"に変更します

<?xml version="1.0" encoding="utf-8" ?>
<!--下の部分-->
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MCATSystem0515.MainPage">

 

3.MainPageの中身に、ContentPageをいくつか作ります。

※長くなり省略してるので画像で示します。

どこがどう繋がっているかというと、

こういうことですね。

それぞれ、以下のコンテンツにアクセスできるようになっていて、全てMainPageにUIを置いています。

上記が左のタブ。

上記が真ん中のアイコンのタブ。

上記が右側のタブ。

真ん中のタブのように、文字列でタイトルを指定せずに、iconだけでタブボタンとして設定することも可能です。そして、コンテンツページ毎に<ContentPage.Resources>を指定すれば、デザインを各タブコンテンツによって変えられます。

簡単なのにこなれ感があって便利。

ハンバーガーメニューの表示の仕方は下記記事で

matsrikagraphic.hatenablog.com