SourceChordスマートフォン用の表示で見るSourceChordC#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。C#UWPで何らかのポップアップのようなUI要素を表示するコントロールの使い方をまとめてみました。Tooltip/Popup系ToolTipPopupPopupMenuFlyout系Flyout/MenuFlyoutボタン押下時にFlyoutを表示する。別のXAMLファイル上に定義ContentDialogのプロパティTooltip/Popup系まずは、そんなに使用頻度高くないかもしれないけど、ちょっとしたコントロールから。ToolTipこれは、WPFなどでもあった要素ですね。カーソル乗ったときにポコっと表示してくれるもの。/>使い方も、WPFのものとほぼ同じ感じ。Buttonなどの各コントロールに直接ToolTipプロパティは用意されてないので、必ずToolTipServiceクラスの添付プロパティを使って設定するのが違いかな。Popupこの要素は積極的に使うようなコントロールではないです。ToolTipやFlyout、MessageDialogなど、ほかのコントロールで事足りるときにはそちらのコントロールを使うべきですね。PopupMenuこんな風に、右クリック時に出てくるメニューを作ったりするのに使ってたコントロール。メニューの表示などでも使ってたみたい。このコントロールはXAML上で定義できず、コードビハインドで表示内容を定義しなければいけないので、使い勝手は微妙。Win8.1でFlyoutMenuというコントロールが追加されたので、基本的にはFlyoutMenuを使うことになるかと思います。}Flyout系Win8.1からあるFlyout系のコントロール。表示する内容をXAML上で定義できるので、PopupMenuなどより使い勝手がいいです。任意のXAML要素をポップアップ表示したい場合はFlyoutコントロール。メニュー的な表示をしたい場合にはMenuFlyoutでだいたいの用途には事足りそうです。Flyout/MenuFlyoutまとめて使ってみます。ボタン押下時にFlyoutを表示する。ButtonなどのFlyoutプロパティを持つコントロールでは、このプロパティにFlyout系コントロールを設定するだけで表示することができます。ボタンを押したらメニューを出す、というような場合にはこの方法を使います。</StackPanel>任意のタイミングでFlyoutを表示する続いて、ボタン押下のタイミングではなく、その他任意のタイミングでフライアウトを表示したい場合の実装方法です。FlyoutBase.AttachedFlyoutという添付プロパティがあるので、フライアウトを出したいコントロールにこの添付プロパティを設定し、この中でFlyoutの定義をします。コードビハインドから以下のように呼び出します。}↓こんな使い方するメリットはないかと思いますが、ダブルタップするとフライアウトを表示します。Flyoutコントロールに名前を付けて直接制御Flyoutコントロールに名前を付けておけば、コードビハインドから直接操作することができます。以下のように、ShowAt/Hideメソッドで表示/非表示を切り替えられます。(Flyoutは、どこか別の要素をクリックしてフォーカス外れると自動で消えるので、この例ではわざわざHideメソッド用意する必要ないですが。最後はダイアログ系の表示について。MessageDialogまずはダイアログの基本のMessageDialogクラス。WPFでMessageBox使ってたような感覚で、こんな風にコードビハインドから呼び出したりできます。(MVVMとかを意識してコーディングするときには、こういうのを安易に仕込むとビューとロジックが入り乱れるきっかけになっちゃったりするんで注意は必要かと思いますが。)以下のように、インスタンスを作ってから、ShowAsyncメソッドで表示します。UIの応答を待つメソッドになるので、Asyncな呼び出し方だけ用意されてるあたりが今風ですね。}ボタンを追加するCommandsプロパティにUICommandのインスタンスを追加していくと、ダイアログに表示するボタンをカスタマイズすることができます。}デフォルト、キャンセル用のボタンを設定するDefaultCommandIndex/CancelCommandIndexというプロパティで、ダイアログのデフォルト/キャンセル用のボタン設定を行うことができます。ボタンは、Commandプロパティに追加した順に0から始まるインデックス値で指定します。DefaultCommandIndexに設定すると、下のキャプチャ画像のようにボタンの色が変わります。CancelCommandIndexを設定すると、ダイアログ表示時にESCキーを押したりしたときに、このボタンが選択されるようになります。}ShowAsyncメソッドの戻り値ダイアログ表示で使うShowAsyncメソッドは以下のような定義となっていて、戻り値として選択されたボタンのUIComamandのインスタンスが取得できるようになっています。ShowAsync();そこで、UICommandのコンストラクタの第3引数には、コマンドのIDとしての値をobject型で任意の値を設定することができます。ShowAsyncの戻り値でこのIDをチェックすれば、どちらのボタンが押されたかチェックできます。以下の例では、IDにそれぞれtrue/falseを入れてチェックしてます。}(↓のサンプルでは、デバッグ出力にログを吐いてるだけなので、実行時には特に変化ありませんが。)各ボタン押下時のイベント処理を定義するUICommandのコンストラクタでは、コマンドが選択されたときの処理を定義することもできます。}MessageDialogのプロパティまとめMessageDialogで使う主なプロパティは以下の通り。ダイアログのタイトルを設定。ダイアログの本文を設定。ダイアログボックスのオプションをMessageDialogOptions型で指定。ボタンを追加したい場合には、ここにUICommandのインスタンスをAddしていく。キャンセル用のボタンにする要素をインデックス値で指定これらを設定してからShowAsyncで表示、ということだけ覚えれば、なんとなく使えるかと思います。ContentDialogダイアログ系その2こちらはダイアログの描画内容をカスタマイズできるタイプのものです。ダイアログの表示内容をXAMLで定義できるので、複雑な情報を表示したり、いろんなUIコントロールを張り付けて置いたりと、いろいろ使えます。表示内容は、以下の二通りの方法で定義することができます。元のページ上に定義まずは、表示内容を呼び出し元のPage上に定義する方法から。以下のようにPage内に直接ContentDialog要素を定義します。このコントロールは普段は表示されておらず、ContentDialogクラスのShowAsyncメソッドを呼び出すことで表示されます。}また、このShowAsyncメソッドでは、ダイアログでどのボタンを押したか、という情報をContentDialogResult型で取得できます。以下のようにして、ダイアログでどのボタンが押されたかを判断することができます。}別のXAMLファイル上に定義ContentDialogの表示内容は別ファイルに定義することもできます。メニューの追加⇒新しい項目のダイアログで、「コンテンツダイアログ」を選びます。プロジェクトに追加されたXAMLファイルを編集します。</Grid></ContentDialog>表示方法は、ほぼ同じ感じですね。}ContentDialogのプロパティ最後に主なプロパティを一通りまとめておきます。ToolkitのV1.4.1がリリースされてました。アプリ開発Windows開発者はてなブログをはじめよう!minami_SCさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。