がりらぼ

WindowsRuntimeの応援ブログ

FlyoutとAttachedFlyoutの違いについて考える

8.1からAttachedFlyoutとかいうのが出てきました。
ちょっと気になったのでまとめます。

Flyoutについて

ButtonなどのFlyoutプロパティに指定されたFlyoutは規定のClickイベントのみ反応し、Flyoutが出現します。

<Button Content="Button" HorizontalAlignment="Left" Margin="131,337,0,0" VerticalAlignment="Top" Height="132" Width="216">
            <Button.Flyout>
                <Flyout>
                    <MenuFlyoutItem Text="ああああ"></MenuFlyoutItem>
                </Flyout>
            </Button.Flyout>
        </Button>

Flyoutプロパティは規定のClickイベントなどにしか反応せず、XAMLコードのみでFlyoutを出現させることができますが、別のイベントなどに反応させたいときは向きません。

AttachedFlyoutについて

これに対し、さまざまなイベントに対応させるためにはAttachedFlyoutに指定する必要があります。
様々なイベントだけでなく、別のボタンをクリックしたときに別のButtonのFlyoutを表示するなどもできます。

<Button Content="Button" HorizontalAlignment="Left" Margin="431,337,0,0" VerticalAlignment="Top" Height="132" Width="216" DoubleTapped="Button_DoubleTapped">
            <FlyoutBase.AttachedFlyout>
                <Flyout>
                    <MenuFlyoutItem Text="ああああ"></MenuFlyoutItem>
                </Flyout>
            </FlyoutBase.AttachedFlyout>
        </Button>

ダブルタップイベント

private void Button_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
        {
            FlyoutBase.ShowAttachedFlyout(sender as Button);
        }

FlyoutBaseクラスのShowAttahedFlyoutメソッドを呼び出し、引数にFlyoutを呼び出したいコントロールをいれることによって、引数のコントロールのAttachedFlyoutに指定されているFlyoutを出現させることができます。
今回はダブルタップで出現のようにさまざまなイベントにたいおうさせることが出来て自由度は高いですがC#のコードが必要となります。

まとめ

FlyoutはClickイベントに反応する
AttachedFlyoutはFlyoutBase.ShowAttachedFlyoutに反応する