shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.FormsのShellのFlyoutItem,Tabについてメモ

Xamarin.Forms UI

Shellを使う準備については以下の記事を参照.

shuhelohelo.hatenablog.com

上の記事とかぶる内容もある.

環境

  • Xamarin.Forms 4.5

アップデートによって使える機能,設定が異なるので注意.

例えばShellのPresentationMode属性はXamarin.Forms 4.3にはなかったり.

Shell要素の中における要素

ShellContent,FlyoutItem,Tabが代表的で,順に説明する.

Shellの直下にShellContent

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <ShellContent Title="ShellContent_MainPage">
        <views:MainPage />
    </ShellContent>
    <ShellContent Title="ShellContent_SecondPage">
        <views:SecondPage />
    </ShellContent>
</Shell>

ドロワーメニューのアイコンが表示され,

f:id:shuhelohelo:20200307153251p:plain

各ShellContentにつけた名前が項目として表示される.

f:id:shuhelohelo:20200307153334p:plain

メニューの項目をタップすると,各ページが表示される. ページ遷移時のアニメーションはなく,パッと切り替わる.

Shellの直下にFlyoutItem

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <FlyoutItem Title="FlyoutItem_MainPage">
        <ShellContent>
            <views:MainPage />
        </ShellContent>
    </FlyoutItem>
    <FlyoutItem Title="FlyoutItem_SecondPage">
        <ShellContent>
            <views:SecondPage />
        </ShellContent>
    </FlyoutItem>
    <FlyoutItem Title="FlyoutItem_ThirdPage">
        <ShellContent>
            <views:ThirdPage />
        </ShellContent>
    </FlyoutItem>
</Shell>

f:id:shuhelohelo:20200307103342p:plain

ページの切り替えはパッと切り替わる.

f:id:shuhelohelo:20200307103632g:plain

下タブを表示する

こんな感じで画面の下側にタブが表示される.

f:id:shuhelohelo:20200307104501p:plain

f:id:shuhelohelo:20200307104940g:plain

下タブは横スクロールしない.

下タブを表示するには2つの方法がある.

Shell > FlyoutItemの中に複数のTabを配置する

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <FlyoutItem Title="FlyoutItem_MainPage">
        <Tab Title="BottomTab_MainPage">
            <ShellContent>
                <views:MainPage />
            </ShellContent>
        </Tab>
        <Tab Title="BottomTab_SecondPage">
            <ShellContent>
                <views:SecondPage />
            </ShellContent>
        </Tab>
        <Tab Title="BottomTab_ThirdPage">
            <ShellContent>
                <views:ThirdPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
</Shell>

Shellの直下に複数のTabを配置する

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <Tab Title="BottomTab_MainPage">
        <ShellContent Title="TopTab_MainPage">
            <views:MainPage />
        </ShellContent>
    </Tab>
    <Tab Title="BottomTab_SecondPage">
        <ShellContent Title="TopTab_SecondPge">
            <views:SecondPage />
        </ShellContent>
    </Tab>
    <Tab Title="BottomTab_ThirdPage">
        <ShellContent Title="TopTab_ThirdPage">
            <views:ThirdPage />
        </ShellContent>
    </Tab>
</Shell>

上タブを表示する

上タブは各下タブの中でさらにタブを分けることができる.

表示するにはTab要素の中に複数のShellContentを配置する.

Tab要素はShell直下でもFlyoutItemの下でも良い.Tabの下に複数のShellContentを配置する.

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <FlyoutItem Title="FlyoutItem_MainPage">
        <Tab Title="BottomTab_MainPage">
            <ShellContent Title="TopTab_MainPage">
                <views:MainPage />
            </ShellContent>
            <ShellContent Title="TopTab_SecondPage">
                <views:SecondPage />
            </ShellContent>
            <ShellContent Title="TopTab_ThirdPage">
                <views:ThirdPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
</Shell>

上タブはスクロールできる.

各タブをタップしたときのページ遷移は左右にスライドするアニメーションがつく.

f:id:shuhelohelo:20200307110431g:plain

上タブのみを表示する

上タブも下タブも1つしか無いときは表示されない.

なので,下タブを1つつくり(Tab要素),その中に複数の上タブ(ShellContent)を用意すれば,上タブのみが表示される.

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <Tab Title="BottomTab_MainPage">
        <ShellContent Title="TopTab_MainPage">
            <views:MainPage />
        </ShellContent>
        <ShellContent Title="TopTab_SecondPage">
            <views:SecondPage />
        </ShellContent>
        <ShellContent Title="TopTab_ThirdPage">
            <views:ThirdPage />
        </ShellContent>
    </Tab>
</Shell>

f:id:shuhelohelo:20200307211001p:plain

複数の下タブと複数の上タブを表示する

上記の2つを組み合わせると下タブと上タブが表示される.

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <FlyoutItem Title="FlyoutItem_MainPage">
        <Tab Title="BottomTab_MainPage">
            <ShellContent Title="TopTab_MainPage">
                <views:MainPage />
            </ShellContent>
        </Tab>
        <Tab Title="BottomTab_SecondPage">
            <ShellContent Title="TopTab_MainPage">
                <views:MainPage />
            </ShellContent>
            <ShellContent Title="TopTab_SecondPge">
                <views:SecondPage />
            </ShellContent>
        </Tab>
        <Tab Title="BottomTab_ThirdPage">
            <ShellContent Title="TopTab_MainPage">
                <views:MainPage />
            </ShellContent>
            <ShellContent Title="TopTab_SecondPage">
                <views:SecondPage />
            </ShellContent>
            <ShellContent Title="TopTab_ThirdPage">
                <views:ThirdPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
</Shell>

TabをShellの直下に置いても良い.

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    mc:Ignorable="d">

    <Tab Title="BottomTab_MainPage">
        <ShellContent Title="TopTab_MainPage">
            <views:MainPage />
        </ShellContent>
    </Tab>
    <Tab Title="BottomTab_SecondPage">
        <ShellContent Title="TopTab_MainPage">
            <views:MainPage />
        </ShellContent>
        <ShellContent Title="TopTab_SecondPge">
            <views:SecondPage />
        </ShellContent>
    </Tab>
    <Tab Title="BottomTab_ThirdPage">
        <ShellContent Title="TopTab_MainPage">
            <views:MainPage />
        </ShellContent>
        <ShellContent Title="TopTab_SecondPage">
            <views:SecondPage />
        </ShellContent>
        <ShellContent Title="TopTab_ThirdPage">
            <views:ThirdPage />
        </ShellContent>
    </Tab>
</Shell>

f:id:shuhelohelo:20200307110956p:plain

Shellページのカスタマイズ

Navigation Barを非表示にする

ナビゲーションバーに加えて上タブも表示するとなると,画面の使いすぎになってしまうこともあります.

そんなときは一番上のNavigation Barを非表示にすると画面の節約になります.

ナビゲーションバーを非表示したいページのContentPageタグの開始タグの属性にShell.NavBarIsVisible="False"を追加します.

このような感じです.

    <ContentPage
    x:Class="XFNaviAnimation.Views.SecondPage"
    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"
    Title="SecondPage"
    Shell.NavBarIsVisible="False"
    mc:Ignorable="d">

</Shell>

ナビゲーションバーが非表示になります.

f:id:shuhelohelo:20200307212119p:plain

Shellの設定いろいろ

docs.microsoft.com

Shellは以下のプロパティを持っている.

  • BackButtonBehavior

  • BackgroundColor

ナビゲーションバー,上タブの背景色.下タブは対象外.

  • DisabledColor

下タブのIsEnableがFalseのときの文字色.

Flyoutメニューを有効,無効などできる

  • Disable

Flyoutを無効 f:id:shuhelohelo:20200630143413p:plain

  • Flyout

Flyoutを有効(デフォルト) f:id:shuhelohelo:20200630143511p:plain

  • Locked

Flyoutを開いたら,ユーザーはそれを閉じることができない.

また,Flyoutはページの上に重なるのではなく,ページの領域を押し縮めて表示される.

f:id:shuhelohelo:20200630143640p:plain

用途がわからない...

  • ForegroundColor

ナビゲーションバーのアイコン(ドロワーメニューのハンバーガーアイコン)や,上タブの選択中を表すバーなどの色. f:id:shuhelohelo:20200308111434p:plain

  • ItemTemplate

  • MenuItemTemplate

  • NavBarHasShadow

ナビゲーションバーに影をつける. デフォルトTrue.

  • NavBarIsVisible

ナビゲーションバーの表示,非表示.

  • PresentationMode

  • SearchHandler

  • TabBarBackgroundColor

下タブの背景色. BackgroundColorを上書きする.

  • TabBarDisabledColor

TabのIsEnableをFalseにしたときの文字色. DisabledColorを上書きする.

  • TabBarForegroundColor

  • TabBarIsVisible

下タブの表示,非表示.

  • TabBarTitleColor

下タブの文字色. TitleColorを上書きする.

  • TabBarUnselectedColor

下タブの｢非選択時｣の文字色. UnselectedColorを上書きする.

  • TitleColor

ナビゲーションバーの文字色. また,上タブ,下タブの文字色のデフォルト色.

  • TitleView

  • UnselectedColor

上タブ,下タブの｢非選択時｣の文字色のデフォルト色.

<Shell
    x:Class="XFNaviAnimation.Views.AppShell"
    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"
    xmlns:views="clr-namespace:XFNaviAnimation.Views"
    BackgroundColor="Salmon"
    DisabledColor="Gray"
    ForegroundColor="Pink"
    NavBarHasShadow="True"
    NavBarIsVisible="False"
    PresentationMode="ModalAnimated"
    TabBarBackgroundColor="Violet"
    TabBarForegroundColor="Black"
    TabBarIsVisible="True"
    TabBarTitleColor="Red"
    TabBarUnselectedColor="Maroon"
    TitleColor="Blue"
    UnselectedColor="Gold"
    mc:Ignorable="d">

Shellのナビゲーション,ルーティング

docs.microsoft.com

ルーティングの設定とその利用について詳しく書いてある.画面遷移時のURIベースの値の渡し方も.

あと,ナビゲーションバーの戻るボタンのアイコンの変更方法についても書いてある.

BackButtonBehaviorを使うとのこと.まだ試していない.

<ContentPage ...>    
    <Shell.BackButtonBehavior>
        <BackButtonBehavior Command="{Binding BackCommand}"
                            IconOverride="back.png" />   
    </Shell.BackButtonBehavior>
    ...
</ContentPage>

ソースコード

今回のソースコードはこちら

github.com

画面遷移のサンプルと一緒になっているけれど.