Xamarin.Formsでページテンプレートを利用する

概要

全画面で共通のヘッダ、フッタを表示したい場合に、ControlTemplateとしてページテンプレートを作成する方法を紹介する。
環境はこちらのページを参照してください。

テンプレートページの作成

共通プロジェクトのControlsフォルダーを右クリックして「追加」「新しい項目...」をクリックして表示されるダイアログで「コンテンツページ」を選択し、名前に「TemplatePage.xaml」を入力して「追加」をクリックする。

TemplatePage.xamlを次のように修正する。

TemplatePage.xaml

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="CustomeControlTest.Controls.TemplatePage">
    <ContentPage.Resources>
        <ControlTemplate x:Key="MyTemplate">
            <StackLayout>
                <Label Text="{TemplateBinding HeaderText}" BackgroundColor="Blue" TextColor="White" FontSize="14" HeightRequest="30"  Padding="20,5,0,0"></Label>
                <ContentPresenter />
                <StackLayout  VerticalOptions="EndAndExpand">
                    <Label Text="{TemplateBinding FooterText}" TextColor="Black" FontSize="20" Margin="20,0,0,0"></Label>
                </StackLayout>
            </StackLayout>
        </ControlTemplate>
    </ContentPage.Resources>
</ContentPage>

ポイントは次の通り
ヘッダやフッタに表示するテキストなど利用側から設定可能とする値のバインドは、TemplateBaindingを使用しコードビハインドでプロパティとし公開する。
テンプレートは、「ContentPage.Resources」内に定義する。
「x:Key」でテンプレートの名称を指定する。
同じ、テンプレートクラス内で複数のテンプレートを異なる「x:Key」の値で定義が可能。

コードビハインドの「TemplatePage.xaml.cs」は次のように「HeaderText」と「FooterText」をプロパティとして公開する。
HeaderText,FooterTextは、TemplatePage.xaml内からTemplateBindingによって紐づけられているため、プロパティの設定値の変更によって、画面のコントロールの値に反映される。

利用側

MainPage.xamlを上記のテンプレートを利用してページに書き換える。

MainPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<controls:TemplatePage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:CustomeControlTest.Controls"
             x:Class="CustomeControlTest.MainPage"
             Title="Access template element demo"
             NavigationPage.HasNavigationBar="False"
             HeaderText="Main"
             FooterText="My Footer"
             ControlTemplate="{StaticResource MyTemplate}"
             >

    <StackLayout Margin="20, 20, 20, 0" BackgroundColor="LightBlue">
        <StackLayout Orientation="Horizontal">
            <Label x:Name="Label1" Text="222" WidthRequest="200" />
            <Entry Text="入力"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label x:Name="Label2" Text="Test2" WidthRequest="200" />
            <Entry Text="入力"/>
        </StackLayout>

    </StackLayout>
</controls:TemplatePage>

ポイントは、ルート要素をTemlatePageを使用するように置き換えること。
TemplatePage要素の「ControlTemplate」属性でテンプレートクラス内で「x:Key」で指定したテンプレートの名称を「{StaticResource MyTemplate}」により指定する。
HeaderText,FooterText属性を設定することによりテンプレートページのヘッダ、フッタの表示値を設定する。
また、独自のヘッダを出力するため、「NavigationPage.HasNavigationBar="False"」により標準のヘッダは非表示に設定する。

実行結果

実行結果は次の通りとなる。

また、画面内のLabel,Entryコントロールのスタイルも今回使用したTemplatePageに記載することで全ページで共通のスタイルを設定することが可能となる。
Styleの全ページへの適用にすいては、Xamarin.Formsで各コントロールに共通のスタイルを適用する方法（１）を参照してください。