Windows Phone アプリで Popup を使ってみる

昨日までの Flyout の続きで Popup を使ってみます。

Windows のストアアプリは 8 の頃の Popup から 8.1 の Flyout のような感じで進んできたらしいのですが、8.1 から WinRT に対応した Phone にとっては~~どちらも同様に新機能みたいなものですね~~。
(追記) すみません、普通に Phone 7 からありました。

Popup コントロールを配置する

Blend を開いてアセットの中から Popup を適当な場所にドラッグ & ドロップします。

f:id:kazuakix:20140903225611j:plain

<Popup> ～ </Popup> の間に普通にコントロールを置いていきます。
Popup を開くためのボタンとあわせてこんな感じで作ってみました。

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

コードから Popup を開くために MyPopup という名前をつけている事と、HorizontalOffset, VerticalOffset で位置を調整している程度でしょうか。

<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
    <Button Content="Popup を開く"   HorizontalAlignment="Left" Margin="10,0,0,0"  VerticalAlignment="Top" Click="OnOpenPopupButtonClicked"  Width="160"/>
    <Button Content="Popup を閉じる" HorizontalAlignment="Left" Margin="10,60,0,0" VerticalAlignment="Top" Click="OnClosePopupButtonClicked" Width="160"/>
    <Popup x:Name="MyPopup" HorizontalOffset="12" VerticalOffset="130">
        <Border BorderBrush="{ThemeResource AppBarItemForegroundThemeBrush}" BorderThickness="1" Background="{ThemeResource AppBarItemForegroundThemeBrush}">
            <TextBlock x:Name="textBlock" Style="{StaticResource TitleTextBlockStyle}" Margin="12" FontFamily="Global User Interface" Foreground="{ThemeResource AppBarBackgroundThemeBrush}" Text="こんにちは、Popup" />
         </Border>
    </Popup>
</Grid>

Popup を開く

Popup は IsOpened プロパティをセットすることで開いたり閉じたりすることができます。コードで書くとたったこれだけ。

private void OnOpenPopupButtonClicked(object sender, RoutedEventArgs e)
{
    this.MyPopup.IsOpen = true;
}

private void OnClosePopupButtonClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    this.MyPopup.IsOpen = false;
}

　
実行してみるとこんな感じになります。

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