Xamarin.FormsのShellの項目の見た目を変更する

Shellを使うと最近のモバイルアプリケーションでよく使われている,ドロワーメニューというのでしょうか,画面端からにゅっと出てくるメニューを簡単に用意できます.

f:id:shuhelohelo:20200930121012p:plain

Xamarin.FormsではこれをFlyoutと呼びますが,これについて詳しくは以下の公式ドキュメントを御覧ください.

docs.microsoft.com

さて,これから書く内容はもちろん上記の公式ドキュメントにも書いてあることですが,自分なりのメモとして自分でも書きます.

このFlyoutに表示される項目は,例えば以下のようにFlyoutItem要素で記述します.

    <FlyoutItem Title="About" Icon="icon_about.png">
        <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    </FlyoutItem>
    <FlyoutItem Title="Browse" Icon="icon_feed.png">
        <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
    </FlyoutItem>

この記述が冒頭のスクリーンショットのように,

[アイコン] [タイトル]

の並びで表示されます.

さて,この各項目の見た目を変更したいときがあります.

その場合は,項目の見た目を定義するテンプレートを用意します.

それがShell.ItemTemplateです.以下のようにDataTemplateの中にどのように表示させるかを記述するだけですが,FlyoutItem要素のTitleとIconプロパティをバインディングして使うことができます. (IconはFlyoutIconと指定しても良い)

    <Shell.ItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal">
                <Label Text="{Binding Title}"/>
                <Image Source="{Binding Icon}"/>
            </StackLayout>
        </DataTemplate>
    </Shell.ItemTemplate>