![](https://marunaka-blog.com/wp-content/uploads/2021/04/6a0f96fa975cc64c18fa90be906602e6.png)
TabBarを使うにはどうしたらいいの?
この記事では、.NET MAUI のアプリ開発において、画面の下部にタブを表示する方法を紹介します。
結論から言うと、名前空間 Microsoft.Maui.Controls にある TabBar を使うことで実現できます。TabBar に複数の Tab を設定することで、アプリ画面の下部にタブが表示されるようになります。
ぜひ参考にしてみて下さい。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/732f4c1bbc64fca859d0210c642e2a3f-300x200.jpg)
オススメの参考書
丁寧に解説された1冊。リリースされて間もない.NET MAUI の基礎が学べるので、これから Android や iOS などをターゲットとして開発するなら非常に参考になる書籍です。
そもそもTabBarて何?
![](https://marunaka-blog.com/wp-content/uploads/2022/03/e79f61a6baca46b24df8b1f92d141ae5-2.png)
TabBar とは、アプリ画面の下部または上部に配置される、複数のタブからなるナビゲーションバーのことです。各タブは、アプリケーション内の異なるセクションや機能に対応しており、ユーザーがタップまたはクリックすることで、そのセッションや機能にアクセスすることができます。
スマホアプリでは使われていることが多いので、一度は見たことがあると思います。
![](https://marunaka-blog.com/wp-content/uploads/2023/05/00cc9a83f8029bf57a8755a81ba7fc03.png)
TabBar は、Shell アプリのルート要素として定義することができます。プロジェクトの AppShell.xaml にある Shell タグの中に TabBar タグを追加して記述することになります。
TabBarの使い方
![](https://marunaka-blog.com/wp-content/uploads/2022/03/091184bcda645b76415dad025b422929.jpg)
TabBar を実装する前に、タブと連携して表示する Page やアイコンを準備しておきましょう。
ContentPageを追加する
Visual Studio のソリューションエクスプローラーを開き、プロジェクトに ContentPage (XAML) を追加します。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/ea7c7ea816e68a4c5087d2e7f1704a61.png)
ここでは3つの Page を追加し、名前を TabPage1、TabPage2、TabPage3 という名前にします。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/0c59e26a7f7a8501cd251eb6bb0eec85.png)
アイコンを追加する
タブに表示するアイコンをソリューションエクスプローラーの Resources フォルダの Images フォルダへ追加します。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/ff8898a3d6bc1272cd7c35d152daf93e.png)
ここで追加するアイコンは次の通りです。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/69b8b8e7f0c3dd430b323956997626ee.png)
![](https://marunaka-blog.com/wp-content/uploads/2023/04/4e9444555b5065b431005126dca23019.png)
![](https://marunaka-blog.com/wp-content/uploads/2023/04/1f88ff401293f6934d8e21565ed76a7c.png)
AppShellを設定する
次はプロジェクトにある AppShell.xaml を開きます。
Shell タグの中に ShellContent タグが追加されているので、コメントアウトもしくは削除します。ここでは削除しました。
<Shell
x:Class="Sample.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Sample"
Shell.FlyoutBehavior="Disabled">
<!-- ShellContentを削除 -->
</Shell>
Shell タグの中に TabBar タグを新たに追加します。この TabBar に複数の Tab を追加することで、アプリ画面の下部に追加されたタブの数だけ表示がされます。ただし、タブの数が多く画面に入らないタブは[その他]のタブとしてグループ化されます。
Tab の Title プロパティと Icon プロパティを設定します。更に、Tab と Page を紐づけるために Tab タグの中に ShellContent タブを追加し、ContentTemplate プロパティに Views フォルダにある Page を DataTemplate にて設定します。
<Shell
x:Class="Sample.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Sample.Views"
Shell.FlyoutBehavior="Disabled">
<TabBar>
<Tab Title="Home" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate views:TabPage1}" />
</Tab>
<Tab Title="Search" Icon="search.png">
<ShellContent ContentTemplate="{DataTemplate views:TabPage2}" />
</Tab>
<Tab Title="Account" Icon="account.png">
<ShellContent ContentTemplate="{DataTemplate views:TabPage3}" />
</Tab>
</TabBar>
</Shell>
Android エミュレーターでデバッグを実行すると次のような結果になります。アプリの画面下部に TabBar が表示されて、タップしたタブの Page に切り替わっていることが分かります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/95746a562768028b0fde7c55b59b3db7.gif)
次は Windows Machine でデバッグを実行します。
Android とは異なり、アプリの画面上部に TabBar が表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/00b0fc8b86c4d29fa1a891d16187f337.gif)
まとめ
![](https://marunaka-blog.com/wp-content/uploads/2023/04/c35f903f10ed2371757ca77d9f41dce9-1024x358.png)
この記事では、.NET MAUI でタブを表示する方法を紹介しました。
AppShell.xaml に TabBar を追加し、TabBar の要素として Tab を設定することで表示ができます。スマートフォンの場合はアプリ画面下部にタブが表示され、デスクトップの場合はアプリ画面上部にタブが表示されます。
画面遷移をさせたい機会があれば、ぜひ参考にしてみてください。
以上、最後まで読んで頂きありがとうございました。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/259c955856c5bdc619d88605c3a5c583-300x200.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2f5a8ba6b1682610f773da3b2f1516f9-300x169.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/09/1c0278efd52188a8154c18b8b21f1be2-300x169.jpg)