kazuakix の日記

Windows Phone とか好きです

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

Windows Phone 8.1 では Flyout を使ってメッセージ等のちょっとしたポップアップ画面を出すことができます。

Flyout の追加

画面にボタン等の適当なコントロールを設置して右クリック、「Flyout の追加」を選びます。

f:id:kazuakix:20140901222308j:plain

適当な名前で Flyout リソースを作成して、ポップアップの中身を作っていきます。普通に画面を作る感じで自由度は高いですね。

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

<Flyout x:Key="FlyoutBase1">
    <Grid>
        <TextBlock TextWrapping="Wrap" Text="こんにちは、Flyout" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"/>
    </Grid>
</Flyout>

 
実行するとこんな感じ。Flyout の外側をタップすることで閉じることができます。

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

また、Flyout の Placement プロパティを Full にすることで全画面のポップアップを作る事もできます。この場合はポップアップは戻るボタンで閉じる必要があります。
Placement には他にも Top, Bottom, Left, Right といった値を設定できますが、Full 以外は変化ありませんでした。
 

MenuFlyout の追加

もうひとつ MenuFlyout というものを追加することができます。これは Windows Phone Toolkit の ContextMenu のようなものです。
Flyout と同様にコントロールを右クリック、「MenuFlyout の追加」を選びます。

f:id:kazuakix:20140901222329j:plain

メニューの枠だけが表示されるので、ふたたび右クリックで 「MenuFlyoutItem の追加」を選びます。

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

昨日のアプリバーと同様にトグルボタンが追加できますが、標準では見た目の変化はないようです。

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

<MenuFlyout x:Key="FlyoutBase2">
    <MenuFlyoutItem Text="MenuFlyoutItem"/>
    <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem"/>
</MenuFlyout>

 
実行してみると自動的に適切な位置にメニューが表示されます。 Flyout と同様に Placement プロパティもありますが、設定は無視されているみたいですね。

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

また、メニューが表示されるときのアニメーションも標準でついていたりして なかなかいい感じです。