NavigationPageを使用すると、ページを遷移したときに[戻る]ボタンが表示されるようになります。

はじめにApp.xaml.csのコンストラクタ内部を以下のように編集します。

変数MainPageは画面に表示されるメインページを表すのですが、このMainPageにNavigationPageのインスタンスを入れるようにします。NavigationPageの引数には、実際にメインページとして表示されるクラスのインスタンスを渡します。

public App()
{
  InitializeComponent();

  MainPage = new NavigationPage(new NavigationPageSamplePage());
}

続いて、メインページから他のページへの移動方法を見てみましょう。

はじめにメインページにボタンを1つ配置しましょう。ボタンがクリックされた場合にページを遷移させるには　this.Navigation.PushAsync()メソッドを実行します。このメソッドの引数には遷移先のページのインスタンスを渡します。

private void btnNextPage_Clicked(object sender, EventArgs e)
{
  this.Navigation.PushAsync(new SecondPage());
}

以上でNavigationPageの完成です。

実行結果は以下に示す通りで、遷移先のページには戻るボタンが表示されます。
戻るボタンはiOSの場合は[<Back]、Androidの場合は[←]が表示されます。

今回は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はタブが画面の上に表示されます。

関連記事

• StackLayout
• ContentPage
• AbsoluteLayout

前回のStackLayoutは、コントロールを積み上げて配置するため、任意の位置に配置することはできませんでした。

今回紹介するAbsoluteLayoutを使用すると、任意の位置に任意のサイズで配置することが可能です。

早速XAMLコードを見てみましょう。

<AbsoluteLayout>
  <Label Text="左10,上20,幅300,高さ60"
    BackgroundColor="Fuchsia"
    AbsoluteLayout.LayoutBounds="10,20,300,60" />
  <Label Text="左80,上60,幅250,高さ500"
    BackgroundColor="Yellow"
    AbsoluteLayout.LayoutBounds="80,60,250,500" />
  <Label Text="左60,上180,幅200,高さ350"
    BackgroundColor="Olive"
    AbsoluteLayout.LayoutBounds="60,180,200,350" />
</AbsoluteLayout>

Absoluteコントロールの内側に配置したコントロールは、添付プロパティAbsoluteLayout.LayoutBoundsを使用できるようになります。このプロパティには「左からの位置」「上からの位置」「幅」「高さ」の４つの値をカンマで区切って指定することができます。

上記のXAMLコードの実行例を以下に示します。この例を見てもわかるとおり、自由に配置できることがわかります。

 
関連記事

• StackLayout
• ContentPage

今回はStackLayoutコントロールについて見ていきましょう。

StackLayoutコントロールは、文字通りコントロールをスタック（積み上げ）表示するためのコントロールです。

■シンプルな使用例

もっともシンプルなStackLayoutのサンプルコードは以下の通りです。

このサンプルでは3つのLabelと1つのButtonコントロールを配置しています。コントロールは画面の上部から順に配置されていることがわかります。

上に詰まりすぎて、時刻表示部分と被っているのが残念です。

<StackLayout>
	<Label x:Name="lblMsg1" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg2" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg3" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Button Text="ABC" x:Name="btnOk"/>
</StackLayout>

■Padding設定する

時刻部分と重ならないようにするためにはいくつか設定方法があります。

はじめにPaddingプロパティを使用してみましょう。このプロパティはStackLayout内に配置したコントロールとStackLayoutまでの余白を表します。逆の言い方をするとStackLayoutの内側に指定した値の余白ができるということです。

Padding=”30″とした場合は、上下左右全て余白が30になります。個々に設定したい場合はカンマで区切ってPadding=”左,上,右,下”のように指定します。

<StackLayout Padding="30">
	<Label x:Name="lblMsg1" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg2" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg3" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Button Text="ABC" x:Name="btnOk"/>

	<StackLayout Padding="10" BackgroundColor="Silver">
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
	</StackLayout>
</StackLayout>

■Spacingプロパティ

Spacingプロパティを使用すると、StackLayout内に配置したコントロール間のスペースを指定することができます。

外側のStackLayoutはSpacingを30に、内包しているStackLayoutはSpacingを10に設定しています。コントロールの縦方向のスペースの違いを確認して下さい。

<StackLayout Padding="30" Spacing="30">
	<Label x:Name="lblMsg1" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg2" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg3" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Button Text="ABC" x:Name="btnOk"/>

	<StackLayout Padding="10" Spacing="10"
			BackgroundColor="Silver">
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
	</StackLayout>
</StackLayout>

■Orientationプロパティ

StackLayoutは既定で垂直方向にコントロールが配置されます。

横方向に配置したい場合はOrientationプロパティにHorizontalを指定します。既定値はVerticalです。

<StackLayout Padding="30" Spacing="5" Orientation="Horizontal">
    <Label Text="Hello" BackgroundColor="Lime" HeightRequest="30"/>
    <Label Text="Hello" BackgroundColor="Lime"/>
    <Label Text="Hello" BackgroundColor="Lime"/>
</StackLayout>