kazuakix の日記

Windows Phone とか好きです

Windows Phone アプリで Popup を使ってみる (その 2)

Windows Phone

まずは訂正があります。

はい。よく見たら Windows Phone 7 の頃からあったみたいです。 Silverlight アプリで普通に使えます。単に僕が知らなかっただけでした。(なので、あのアプリやあのアプリの画面も StackPanel とかでゴリゴリ書いています)

という訳で Popup ネタをもう少し引っ張ってみます。

Popup をコードで生成する

XAML に定義を書かなくてもこんな感じで Popup を生成することができます。

var popup    = new Popup();
popup.Child  = new StackPanel();
popup.IsOpen = true;

Popup を生成して、Child プロパティに中身 (この例では空の StackPanel) をセットした後に IsOpen プロパティを true にしているだけですね。

コードで生成する利点としては複数の Popup を表示できることがあげられます。

例えば昨日の画面のイベントを次のように書き換えると ボタンを押す度に Popup が増えていきます。

private List<Popup> _popups;

// 「 Popup を開く」 ボタン
private void OnOpenPopupButtonClicked(object sender, RoutedEventArgs e)               
{
    var popup   = new Popup();
    popup.Child = new PopupPanel() { TitleText = "Popup " + (this._popups.Count + 1) };
    
    var v = 130.0;
    var h =  12.0;
    var prevPopup = this._popups.LastOrDefault();
    if (prevPopup != null)
    {
        v = prevPopup.VerticalOffset   + 20.0;
        h = prevPopup.HorizontalOffset + 20.0;
    }
    popup.VerticalOffset   = v;
    popup.HorizontalOffset = h;

    this.ContentRoot.Children.Add(popup); //(1)
    popup.IsOpen = true;
    this._popups.Add(popup);
}

// 「 Popup を閉じる」 ボタン
private void OnClosePopupButtonClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var popup = this._popups.LastOrDefault();
    if (popup != null)
    {
        popup.IsOpen = false;
        this._popups.Remove(popup);
    }
}

f:id:kazuakix:20140904234540j:plain,w360
　
Popup の中に表示する部分は面倒なのでタイトルだけを受け取るユーザーコントロールにしています。
また、 (1) の部分で Popup を ContentRoot (という名前の Grid) の子要素に追加しています。これが無くても表示する事はできますが、親フレームから受け取るはずの設定を受け取ることができないので注意外必要です。