眠るシーラカンスと水底のプログラマー

(本記事はWindows8Consumer PreviewとVisualStudio11β環境で動作を確認しています)

　ページ内に別のページを一部として読み込むような処理がWindows8のサンプルでは良く見られます。

　今回はFrameを使ってページを読み込む方法を紹介します。

Pageクラスの作成

　ソシューションエクスプローラーを右クリックから、「追加」→「新しい項目」で「新しい項目の追加」ダイアログを表示します。

　「空白のページ」を選択し新規ページを作成します。

　ここではページ名を「SamplePage.xaml」とします。

　わかりやすいように背景色を変えておきます。

<Page
    x:Class="FrameSample.SamplePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FrameSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#FF9B3434">
        <Button Content="Button" HorizontalAlignment="Left" Margin="23,10,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>

    </Grid>
</Page>

おまけでボタンクリック時にダイアログを表示するイベントを設置。

        async private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            MessageDialog msg = new MessageDialog("Frame内からMessageDialog");
            IUICommand result = await msg.ShowAsync();
        }

Frameに読み込み

　Frameに読み込む元は非常にシンプルなコードで、

<Page
    x:Class="FrameSample.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FrameSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
        <Button Content="読み込み" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" Width="175" Margin="10,10,0,0" Click="Button_Click_1"/>
        <Frame x:Name="SampleFrame" MaxHeight="300" MaxWidth="300">
        </Frame>
    </Grid>
</Page>

ボタンとFrameだけを配置します。

ボタンをクリックされた際のイベントは以下、

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.SampleFrame.Navigate(Type.GetType("FrameSample.SamplePage"));
        }

Frame内にページを表示！！

　Frame内のボタンも動作します。

Tweet