8アプリでは実装が面倒だったポップアップ。8.1では新たに追加されたフライアウト表示用のコントロールを使うことでより手軽に実装できる。8アプリ)でフライアウト(=ポップアップ)を出すのは、結構面倒だった。8.1アプリ)では、新たに追加されたフライアウト表示用のコントロールを使えば、格段に簡単に実装できる。本稿では、それらの新しいコントロールを使う方法を解説する*1。8.1版)」からダウンロードできる。*1本稿はPreview版に基づいて記述しているため、製品版では異なる可能性がある。ご承知おきいただきたい。(3/4)」でも簡単に紹介している。併せてお読みいただければ幸いである。2013)が必要である。Windowsを使用している。8.1]」の記事をご参照いただきたい。8アプリでは「フライアウト」と呼んでいた。8.1アプリでは「フライアウト」に呼び方が統一されるようだ。フライアウトは一時的に表示されるUI(ユーザー・インターフェイス)で、画面のほかの場所をタップ/クリックすれば閉じるものだ。フライアウトの使用例としては、[設定]チャームから呼び出すオプション設定パネルや、画面のオブジェクト上に出すショートカット・メニュー(=コンテキスト・メニュー、ポップアップ・メニュー)などがある(次の画像)。筆者が出しているアプリの1つで、オプション設定パネルとショートカット・メニューが表示される(両方同時に出ているのは画像合成)。8アプリでフライアウトを出すのは面倒だった。ショートカット・メニューには、コードビハインドでPopupMenuクラスのインスタンスを作りメニュー項目をコードで追加していた。オプション設定パネルはUIをXAMLで作れるのはよいのだが、コードビハインドでPopupクラスのインスタンスを作り、それにUIやイベント・ハンドラを結び付けるという手間を掛けていた*2。ストアアプリテンプレート」などを参照してもらいたい。[多言語化対応]」で公開している。8.1アプリでのフライアウト便利なフライアウトのコントロールがWindows.UI.Xaml.Controls名前空間に3つ追加された(次の表)。コントロール説明Flyout汎用的なフライアウトを作るMenuFlyoutショートカット・メニューを作る。8.1アプリに追加された3つのフライアウト・コントロール本稿では、これらの使い方を説明していく。8.1でFlyoutプロパティが新設された。このプロパティにFlyoutコントロールかMenuFlyoutコントロールを設定するだけでフライアウトが実装できるのだ(前回掲載したコードを再掲)。/></MenuFlyout></AppBarButton.Flyout></AppBarButton>MenuFlyoutを持つAppBarButtonコントロールの例(XAML)このコードには、メニューを選択したときのイベント・ハンドラを追加する必要がある。8.1ストア・アプリ開発]」で紹介したので、そちらをご覧いただきたい。Flyoutプロパティがないコントロールでフライアウトを出すには?Flyoutプロパティがないコントロール、例えばGridコントロール(Windows.UI.Xaml.Controls名前空間)などでFlyoutコントロールやMenuFlyoutコントロールを出すには、どうしたらよいだろうか?それら2つのコントロールの共通の親クラスはFlyoutBaseクラス(Windows.UI.Xaml.Controls.Primitives名前空間)である。そのFlyoutBaseクラスにあるAttachedFlyout添付プロパティを使うことで任意のUIコントロールにFlyoutコントロール/MenuFlyoutコントロールを付けられるのだ。例として、Gridコントロールをダブル・タップ/ダブル・クリックしたときにFlyoutコントロールを表示してみよう。次のコードのように、Gridコントロールの定義の中にFlyoutBase.AttachedFlyout添付プロパティを追加する。Gridコントロールの開始タグには、DoubleTappedイベント・ハンドラも追加する。/></StackPanel></Grid></Flyout></FlyoutBase.AttachedFlyout>......省略......</Grid>GridコントロールにFlyoutBase.AttachedFlyout添付プロパティを追加した(XAML)フライアウトのコンテンツには、[OK]ボタン/[キャンセル]ボタンがある。後の説明のためにTextBoxコントロール(Windows.UI.Xaml.Controls名前空間)も入れてある。Placementプロパティは、フライアウトの表示位置の指定だ。上のように「Bottom」を指定すると、対象のコントロールの下側に出そうとする。下側に出すスペースが無いときは残り3方向のいずれかに、それもだめならコントロールに重なって出る。このフライアウトを表示するためのコードビハインドは、次のようになる。SubGridコントロールのDoubleTappedイベント・ハンドラで、添付されているフライアウトを出す(上:C#、下:VB)簡潔なサンプルとして書いてある。実際は、引数senderが想定しているコントロールに正しくキャストできるかどうかチェックした方がよい。上ではShowAttachedFlyout静的メソッドを使ったが、ShowAtインスタンス・メソッドも使える(次のコード)。引数は、フライアウトを付けるコントロールコードビハインドの任意の箇所でフライアウトを出す(上:C#、下:VB)フライアウトのインスタンスが利用できるなら、このように書ける。フライアウトの出る位置は、引数で与えたコントロールが基準になる。Flyoutコントロール/MenuFlyoutコントロールの寿命MenuFlyoutコントロールはメニューを選択すると自動的に閉じる。Flyoutコントロールでは、ボタンがタッチ/クリックされたときの処理の中で明示的に閉じるコードを書く(次のコード)。SubコードビハインドでFlyoutコントロールを閉じる(上:C#、下:VB)閉じるためのメソッド名が「Close」ではなく「Hide」であることに注目(実行結果のところで説明する)。実行して、Gridコントロールをダブル・タップ/ダブル・クリックしてみよう。次の画像のようにフライアウトが出てくる。表示位置を「Bottom」と指定してあるが、スクリーン・キーボードは避けてくれる。ここで、テキストボックスにスクロールするだけの文字列を入力してからフライアウトを閉じて、また開いてみよう。適当な文字列を入力してから、フライアウト以外の画面をタップ/クリックしてフライアウトを閉じる。その後、再びフライアウトを出してみると、文字列もスクロール位置も以前のまま保持されている。フライアウトを閉じるメソッドの名前が「Close」ではなく「Hide」になっているのは、そういうことなのだ。画面から隠されるだけで、フライアウトのオブジェクトは存在し続けている。ユーザーが入力中に間違ってフライアウトを閉じてしまっても、また開けば続きを入力できるわけだ。コードの側では、[OK]ボタンのイベント・ハンドラで正しく処理が完了したら、明示的にフライアウトを初期化しなければならない。Flyoutコントロール/MenuFlyoutコントロールをリソースとして定義するには?Flyoutコントロール/MenuFlyoutコントロールはページのリソースとしても定義できる(次のコード)。この場合、個々のフライアウトのインスタンスに変数名を付けられないので、コードビハインドからフライアウトを出すにはShowAttachedFlyoutメソッドしか使えない。/>MenuFlyoutコントロールをページのリソースとして定義して使用する例(XAML)このようにFlyout属性に指定した場合は、ボタンのタップ/クリックで自動的にフライアウトが出る。<Page.Resources>タグがないときは、<Page>要素の開始タグの直後に追加する。同じようにしてフライアウトをApp.xamlのリソースとして定義すれば、アプリのどこからでも使える。その場合はイベントが使えないため、ICommandオブジェクトをバインドして使う*3。実行する」で公開しているので参考にしてほしい。SettingsFlyoutコントロールでオプション設定パネルを作るには?オプション設定パネルは、SettingsFlyoutコントロールを使ってXAMLでUIを定義する。Flyout])を選んで追加する。SettingsFlyoutコントロールを使った画面定義を追加するこの画像のダイアログはC#のもので、[名前]はデフォルトの「SettingsFlyout1.xaml」のままにしておく。VBの場合は、[名前]を「SettingsFlyout1.xaml」に変更する。生成されたファイルは、XAMLエディタでUIを編集できる(次の画像)。ルート要素が<Page>や<UserControl>ではなく、<SettingsFlyout>になっていることに注目してほしい。SettingsFlyoutコントロールを使った画面定義を編集する(XAMLエディタ)上部のタイトルやその右の小アイコンなどは、開始タグの属性で定義する(次のコード)。<SettingsFlyoutx:Class=......省略......xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local=......省略......xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"IconSource="Assets/SmallLogo.png"HeaderBackground="MediumBlue"Title="オプション設定"Width="320">SettingsFlyoutコントロールのタイトル文字列/背景色/小アイコン/幅の定義(XAML)幅の指定は、省略すると346px(設定チャームと同じ幅)になる。ビューの最小幅を320pxにしたときは、そのままでははみ出してしまうので、このように320pxに設定する。SettingsFlyoutコントロールのコンテンツには、自由にUIを定義する。TextWrapping="Wrap">これはオプション設定パネルのサンプルです。/></StackPanel></StackPanel></SettingsFlyout>SettingsFlyoutコントロールのコンテンツの定義例(XAML)データ・バインディングは省略してある。実際には、ここでのユーザー操作を、データ・バインディングを介してリアルタイムに設定に反映させる。8]」を参照してほしい。次に、設定チャームからこのSettingsFlyoutコントロールを呼び出せるようにする。こればかりは、ちょっと面倒なコードを書かなければならない。全ての画面に同じオプション設定パネルを追加するには、App.xaml.cs/.vbファイルに次のようなコードを記述する。Subオプション設定パネルを開くためのイベント・ハンドラを追加する処理を、Appクラスに追加する(上:C#、下:VB)画面ごとに異なるオプション設定パネルを結び付ける場合は、それぞれのページのコンストラクタの最後あたりで上のAddOptionPanelメソッドを呼び出す(画面遷移時にハンドラを外すのを忘れないこと)。コードビハインドから直接表示するのは、簡単だ(次のコード)。SettingsFlyout1()optionsFlyout.Show()コードビハインドからオプション設定パネルを出す(その1)(上:C#、下:VB)Showメソッドで表示した場合は、ユーザーが戻るボタンをタップ/クリックすると設定チャームに切り替わる。SettingsFlyout1()optionsFlyout.ShowIndependent()コードビハインドからオプション設定パネルを出す(その2)(上:C#、下:VB)ShowIndependentメソッドで表示した場合は、ユーザーが戻るボタンをタップ/クリックすればそのまま閉じる。実行すると次の画像のようになる。出来上がったオプション設定パネルの動作(実行結果)画面を2分割して、左側に今回のアプリを表示した。設定チャームに[オプション設定]が追加されている(上)。設定チャームで[オプション設定]をタップ/クリックすると、オプション設定パネルが出る(中)。8.1アプリでは設定チャームが出せるので、オプション設定パネルも出る(下)。8.1で新設されたコントロールを使うと、フライアウトが簡単に実装できる。フライアウトについては、次のドキュメントも参照してほしい。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。