takataka430’s blog

.NET系を中心に勉強したことのまとめを書きます

【Xamarin.Forms】TabbedPageクイックスタート

Xamarin.Formsでタブページの使い方を調べていたのですが、最初よくわからなくてつまづきました。簡単に使い始めるための方法を書きます。 ちなみに、プロジェクトを作成する際に「タブ付きフォームアプリ」をテンプレートとして選択すれば最初から使えるわけですが、今回は「空白のフォームアプリ」を選択した場合の方法を記載します。

環境

Visual Studio 2019 for Mac
Xamarin.Forms 4.1.0.555618

やり方

前提として、「空白のフォームアプリ」で新しいアプリを作成している状態を想定します。

まずは.NetStandardのプロジェクトを右クリックし、「追加」→「新しいファイルを作成」を選択します。

f:id:takataka430:20190907005526p:plain

左メニューからFormsを選択し、その中の「フォーム ContenPage XAML」を選択、名前をつけて右下の新規をクリックします。

f:id:takataka430:20190907005543p:plain

これでContentPageが2つできました(元からあったものと、新規追加したもの)。この2つをタブページによって表示の切り替えを行います。

先ほどと同様に.NetStandardのプロジェクトを右クリックし、「追加」→「新しいファイルを作成」を選択します。 左メニューからFormsを選択し、その中の「TabbedPage XAMLの追加」を選択、名前をつけて右下の新規をクリックします。

f:id:takataka430:20190907010017p:plain

作成したタブページにコードを追記して行きましょう。

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="XF_TabbedPage.MyTabbedPage"
            xmlns:local="clr-namespace:XF_TabbedPage;assembly=XF_TabbedPage">
    <local:MainPage Title="FirstPage"/>
    <local:SecondPage Title="SecondPage"/>
</TabbedPage>

xmlns:local="clr-namespace:XF_TabbedPage;assembly=XF_TabbedPage"名前空間アセンブリを指定しています。
local:MainPage local:SecondPageそれぞれでタブページで表示したいページを指定しています。Titleでタブページの表示名を設定します。
MainPage SecondPageは上で作成したContentPageの名前です。)

f:id:takataka430:20191012151655g:plain

このようにタブページによってページを切り替えることができます。モバイルアプリらしくなりましたね。
是非使ってみてください。

参考:

Xamarin.Forms のタブ付きページ - Xamarin | Microsoft Docs