[Xamarin][CrossPlatform][Control] TabbedPade

2016.09.25

今回はTabbedPageを見ていきましょう。

TabbedPageコントロールは、文字通りページにタブを追加してページ切り替えを行うことができるようにするコントロールです。

新規でプロジェクトを作成するとメインのXAMLは以下のようにContentPageが配置されています。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CarouselPageSample" x:Class="TabbedPageSample.TabbedPageSamplePage">
	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

TabbedPageを使用する場合は上記のContentPageをTabbedPageに変更し、その中に必要なタブの数だけContentPageを配置します。

これによりContentPageがタブページになります。ページに表示するデザインは、それぞれのContenPageの中で行います。ContentPageのTitleプロパティに設定した値はタブに表示される名称になります。

以下はTabbedPageの例です。

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:TabbedPageSample" 
    x:Class="TabbedPageSample.TabbedPageSamplePage">


    <TabbedPage.Children>
      <ContentPage Title="Test1">
        <Label Text="This is page1." />
      </ContentPage>
      <ContentPage Title="Test2">          
        <Label Text="This is page2." />
      </ContentPage>
      <ContentPage Title="Test3">
        <Label Text="This is page3." />
    </ContentPage>
    </TabbedPage.Children>

</TabbedPage>

また、XAMLのコードビハインドは以下のようにTabbedPageを継承するように変更をします。

namespace TabbedPageSample
{
  public partial class TabbedPageSamplePage : TabbedPage
  {
    public TabbedPageSamplePage()
    {
      InitializeComponent();
    }
  }
}

上記の実行例を以下に示します。

iOSはタブが画面の下に、Androidはタブが画面の上に表示されます。