ボタン以外で Flyout を使ってみる

昨日調べた Flyout ですが、ボタン以外の場合は「Flyout の追加」というメニューが表示されません。

f:id:kazuakix:20140902230347j:plain,w360
　
でも、ボタン以外に追加できないという訳ではなく、FlyoutBase.AttachedFlyout 添付プロパティを使うことで非ボタンコントロールにも Flyout を追加できるようになります。

クイックスタート: ポップアップの追加 (XAML) (Windows)

解説を読むと何やら XAML やコードをゴリゴリと (と言うほどでもないですが...) 書いていますね。ボタンだとコーディングなしで使えるのに、非ボタンになったとたんにこれですか...

せっかくなのでコーディングなしで使う方法を調べてみました。

FlyoutBase.AttachedFlyout の追加

Flyout を追加したいコントロールのプロパティをよく見ると FlyoutBase.AttachedFlyout という項目があるので「新規追加」します。

f:id:kazuakix:20140902230352j:plain,w360

今回は MenuFlyout を追加することにしました。

f:id:kazuakix:20140902230359j:plain,w360

コントロールの下に空の MenuFlyout ができるので、右クリックして必要なだけ MenuFlyoutItem を追加してやります。

f:id:kazuakix:20140902230404j:plain,w360
　
こんな感じの XAML ができあがりました。

<Border BorderThickness="1" Height="100" Width="100" Margin="10,10,0,0" Background="{ThemeResource PhoneAccentBrush}" >
    <FlyoutBase.AttachedFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="MenuFlyoutItem"/>
            <MenuFlyoutItem Text="MenuFlyoutItem"/>
        </MenuFlyout>
    </FlyoutBase.AttachedFlyout>
</Border>

(「手で書いた方がはやい」とか聞こえてきそうですが...)

Flyout を開く

コントロールの任意のイベントで FlyoutBase.ShowAttachedFlyout メソッドを使って Flyout を開くことができます。

private void OnBorderTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    var border = sender as Border;
    if (null != border)
    {
        FlyoutBase.ShowAttachedFlyout(border);
    }
}

　
でも、最後になって結局コードを書くのも負けた気がするので先日おぼえたばかりのビヘイビアにしておきましょう。

using Microsoft.Xaml.Interactivity;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls.Primitives;

namespace App8
{
    public class ShowFlyoutBehavior : DependencyObject, IBehavior
    {
        public DependencyObject AssociatedObject { get; private set; }

        // 前準備
        public void Attach(DependencyObject associatedObject)
        {
            this.AssociatedObject = associatedObject;
            // Tapped イベントで Flyout を開くようにする
            ((FrameworkElement)this.AssociatedObject).Tapped += OnAssociatedObjectTapped;
        }

        // Flyout を開く
        private void OnAssociatedObjectTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)this.AssociatedObject);
            if (flyout != null)
            {
                FlyoutBase.ShowAttachedFlyout((FrameworkElement)this.AssociatedObject);
            }
        }

        // 後始末
        public void Detach()
        {
            ((FrameworkElement)this.AssociatedObject).Tapped -= OnAssociatedObjectTapped;
            this.AssociatedObject = null;
        }
    }
}