Box2D + WinRTでゲームを作る (13) – Menuページを作る

ページ切り換えのアイデア

最初UIの切り換えをWindow::Current->ContentにFrameをセットしてページを遷移する方法、つまり普通のやり方でやろうかなと思ったけれど、ページの中にFrameを埋め込み、そこにページを埋め込むやり方もあることを知り試すことにした。後者のほうがコード変更が少なくてすみそうだからだ。

早速試してみる

さっそく試してみることにする。MainPageはSwapChainBackgroundPanelを使っているので、その中にFrameを配置するだけである。いろいろな状態を表示するためのGridとかもあったけれどいったん削除した。

<common:LayoutAwarePage
    x:Class="sfgame.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:sfgame"
    xmlns:common="using:sfgame.Common"
    mc:Ignorable="d"
    NavigationCacheMode="Enabled"
    d:DesignWidth="1366"
    d:DesignHeight="768">

    <SwapChainBackgroundPanel x:Name="DXSwapChainPanel">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Snapped"/>

            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Frame x:Name="m_MainFrame"  ></Frame>
    </SwapChainBackgroundPanel>

    <Page.BottomAppBar>
        <AppBar x:Name="GameAppBar"  Height="88" VerticalAlignment="Bottom" Opened="OnAppBarOpened">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Button x:Name="Reset" Tag="Reset" Style="{StaticResource ResetButtonStyle}" Click="OnResetButtonClicked"/>
                    <Button x:Name="ResetLicense" Tag="ResetLicense" Style="{StaticResource ResetButtonStyle}" Click="OnResetLicenseButtonClicked" Visibility="Collapsed"/>
                    <Button x:Name="Store" Tag="Store" Style="{StaticResource BuyButtonStyle}" Click="OnLoadStoreClicked" HorizontalAlignment="Left"/>
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top">
                    <Button x:Name="ChangeBackground" Tag="Change Background" Style="{StaticResource RotateButtonStyle}" Click="OnChangeBackgroundButtonClicked"/>

                    <Button x:Name="Play"  Tag="Play"  Style="{StaticResource PlayButtonStyle}"  Click="OnPlayButtonClicked"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
</common:LayoutAwarePage>

こうしておいて、このフレームにMenuPageをNavigateするようにすればよいのである。試してみるとMenuPageで画面が覆われ、SwapChainBackgroundPanelの内容が見えなくなってしまった。

これはMenuPageの背景が透明になっていなからだと気づいたので、Pageの背景をTransparentで塗りつぶしてみても状況は変わらない。試行錯誤の結果、MenuPage内にあるGridの背景色をTransparentで塗りつぶすことで透過されるようになった。具体的にはGridのBackgroundプロパティに「Transparent」をセットする。

   <Grid Style="{StaticResource LayoutRootStyle}" Background="Transparent">