TabbedPageとは?
TabbedPageとは,タブ付きのページのことです。タブというのは次の画像の「TAB1」「TAB2」「TAB3」のように,画面の上部にタブのタイトルを表示して,そのタブごとにページの表示を切り替えることができます。「TAB1」と書かれているところをタップしてもページが切り替えることができますし,ページの内容が表示されているエリアで右や左にスワイプすることで,ページを切り替えることができます。ちょうどスマホで表示されたKindle本のページをめくるような操作と同じです。TabbedPageの場合はボタンを押してページを変更するパターンとは違い,存在するページが全体的にわかるので,使いようによっては,こちらのほうが使いやすいというケース発生すると思います。
TabbedPageの作り方
MainPageの削除
それではTabbedPageを作っていきましょう。VisualStudioでXamarin.Formsのプロジェクトを作りましょう。プロジェクトはAndroidと共通のプロジェクトだけでOKです。共通のプロジェクトにはMainPage.xamlが自動で生成され,初期表示されるページになっているはずです。今回このページは使わないので削除します。MainPage.xamlを選択して右クリックメニューから「削除」を選びましょう。
TabbedPageの追加
MainPageを削除したため,現在このプロジェクトにページは一つもありません。今からTabbedPageを追加していきます。ページを追加するときは,ページがどの程度存在するかを簡単に把握するためにも,一つのフォルダーにPageを追加していったほうがわかりやすいので,「Pages」というフォルダーを作成します。フォルダーの作成の仕方は,共通プロジェクトを右クリックして「追加」「新しいフォルダー」の順で選択します。作成された新しいフォルダーに「Pages」という名前を付ければページ用のフォルダーの作成は完了です。
それではPagesフォルダーにTabbedPageを追加します。共通プロジェクトを右クリックして「追加」から「新しい項目」を選択します。「Tabbed Page」を選択し,名前を「HomePage」にして追加します。これでTabbedPageの作成は完了です。
起動ページをTabbedPageにする
App.xaml.csを見てください。そこにはデフォルトでMainPageの設定をしている箇所がありますが,MainPageには先ほど削除したMainPage.xamlを設定するコーディングのままになっています。このままでは当然コンパイルエラーが出ているので,この部分を今作成した「HomePage」を設定するように変更します。ネームスペースはプロジェクト名+Pagesになります。私のサンプルでは「X011.Pages.HomePage」という記述になります。
public App () { InitializeComponent(); MainPage = new X011.Pages.HomePage(); }
起動する
これで準備は完了です。この状態でプログラムを実行しましょう。
このような画面が起動すれば成功です。画面上部の「TAB1」「TAB2」「TAB3」の部分をタップしてもページが変わりますし,ページの内容が表示される白い部分をKindleのページをめくるようにスワイプしてもページが移動します。
サンプルコード全体
<?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="X011.Pages.HomePage"> <!--Pages can be added as references or inline--> <ContentPage Title="Tab 1" /> <ContentPage Title="Tab 2" /> <ContentPage Title="Tab 3" /> </TabbedPage>
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace X011.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class HomePage : TabbedPage { public HomePage () { InitializeComponent(); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Xamarin.Forms; namespace X011 { public partial class App : Application { public App () { InitializeComponent(); MainPage = new X011.Pages.HomePage(); } protected override void OnStart () { // Handle when your app starts } protected override void OnSleep () { // Handle when your app sleeps } protected override void OnResume () { // Handle when your app resumes } } }