Flyoutを別XAMLにしたときのメモ

Flyoutをストアアプリで使用する場合、多くは、使用するXAMLページに直接描くと思うのですが、これを別XAMLにしてアタッチすることもできます。

別XAMLとして作成する場合、とりあえず「追加>新しい項目>ポップアップの設定」で「SettingsFlyout」を継承したXAMLを作成して

「SettingsFlyout」を「Flyout」にCSもXAMLも書き換えます。

XAML上では「Flyout」で使用できない「IconSource」「Title」「d:DesignWidth」を削除します。

問題点として「Flyout」では「FindName」が使用できないため、「Binding」などに制限がかかります。
「DataContext」でデータバインドはできるので、これを利用してデータのやり取りをすることになります。

作成したXAMLは「FlyoutBase.AttachedFlyout」にアタッチしておきます。
外部とのやり取りは、「Flyout」にイベントを作成公開してやり取りします。

オープン、クローズはベースのイベントとして使用できるので、クローズ時にデータを初期化します。
名前を追うことはできないので、FrameworkElementを追いかけるか、下記のようにバインドしたプロパティデータをリセットして初期化します。

        private void Flyout_Closed(object sender, object e)
        {
            var con = this.Content;

            ((StackPanel)con).DataContext = new NewProp();
        }

手間がかかるので、使用するXAMLページにFlyoutを書き込んだほうが名前の仕様もできるので分離するのでなければそのほうがいいでしょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください