PopupでFlyout風の設定画面を出す

色々あってここの所ずっと足回りやサーバーサイドなどXAMLから遠いところにいましたが、ようやくUIレイヤーに少し戻ってきました。
根本的にこのやり方がフォーマルかというと微妙ですが、Metro Style App(コードネーム)ことWindowsストア アプリでCharmのSettings風にモーダルなFlyout(この呼び方正しい?)を出す方法が探してもなかなかなかったのでメモ的に。
設定を出したいページにPopup要素を追加して...

<Popup x:Name="popFlyout" IsOpen="False" IsLightDismissEnabled="True">

    <Popup.ChildTransitions>

        <TransitionCollection>

            <PaneThemeTransition/>

        </TransitionCollection>

    </Popup.ChildTransitions>

    <Grid x:Name="FlyoutRoot">

        <Frame x:Name="frame1" />

    </Grid>

</Popup>

<Button Content="PopSettings" HorizontalAlignment="Left" Margin="68,73,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>

表示するときにサイズを適当に調整してIsOpen = trueするだけです。

private void Button_Click_1(object sender, RoutedEventArgs e)

{

    if (!popFlyout.IsOpen)

    {

        frame1.Navigate(typeof(SettingForm1));

        FlyoutRoot.Width = 646;

        FlyoutRoot.Height = this.ActualHeight;

        popFlyout.HorizontalOffset = Window.Current.Bounds.Width - 646;

        popFlyout.IsOpen = true;

    }

}

それっぽいアニメーションはでやってくれます。
SettingForm1はなんでもいいんですが、とりあえず「新しい項目」「空白のページ」で適当なPageクラスを作成しておけばいいでしょう。

<Page

    x:Class="PopFlyoutSample.SettingForm1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:PopFlyoutSample"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">
    <Grid Background="#66005474">

        <StackPanel>

            <TextBlock Text="Parameter:" FontSize="32"/>

            <TextBox FontSize="32" Text="This is dummy"/>

            <Button HorizontalAlignment="Right" Content="Submit" FontSize="32"/>

        </StackPanel>

    </Grid>

</Page>

イベントとか後処理は各自適当に。