Xamarin.Forms の FlyoutとTab

Xamarin.Forms の FlyoutとTab

ここに書いてある「ポップアップの表示オプション」をUWPで確認:

docs.microsoft.com


Flyout -> Tabbar(下部) -> Tab(上部)

Flyout(10000) -> Tabbar(下部)(100) -> Tab(上部)(100-10)

    <FlyoutItem Title="10000" FlyoutDisplayOptions="AsSingleItem">
        <Tab Title="100">
            <ShellContent Title="100-10" ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent Title="100-20" ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>

        <Tab Title="110">
            <ShellContent Title="110-30" ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>

    </FlyoutItem>

f:id:kawaishi2:20210224150641p:plain

f:id:kawaishi2:20210224150652p:plain


Flyout -> Tabbar(下部) -> Tab(上部)& AsMultipleItems

FlyoutDisplayOptions="AsMultipleItems" を指定すると、Flyout(メニューっぽいやつ)に、子供が直接表示される。

Flyout(120) -> Tabbar(下部)(120) -> Tab(上部)(100-10)

    <FlyoutItem Title="10000-表示されない" FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="120">
            <ShellContent Title="120-11" ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent Title="120-21" ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>

        <Tab Title="130">
            <ShellContent Title="130-31" ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>

    </FlyoutItem>

f:id:kawaishi2:20210224150705p:plain


Flyout -> Tabbar(下部) -> Tab(上部) 省略

<Tab>や<ShellContent> を省略してもかける。(↓は、↑と ほぼ同じ)

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="140">
            <local:ItemsPage Title="140-11" />
            <local:ItemsPage Title="140-21" />
        </Tab>

        <ShellContent Title="150" ContentTemplate="{DataTemplate local:ItemsPage}" />

    </FlyoutItem>

Flyout -> Tabbar(下部:非表示) -> Tab(上部:非表示)

  • Flyoutの子供が1個なので、下部のタブ が非表示
  • Tab の子供が1個なので、上部のタブ が非表示
  • (その分 高さに注意?)
    <FlyoutItem Title="300" FlyoutDisplayOptions="AsSingleItem">
        <Tab Title="301">
            <ShellContent Title="302" ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
    </FlyoutItem>

f:id:kawaishi2:20210224150716p:plain