Atelier：Mitsuba

その１２：画面遷移する

連載：Developer Previewでも強気で進めるMetroStyleApp超入門

Windows 8 Developer Previewなので正式版とは異なる場合があります。
また、Windows Updateが走るときもあるため、エントリ執筆現在の情報をもとにかいています。

今回はMetro Style Appsで一番シンプルな画面遷移とデータの受け渡しです。

かっこいいトランジションとかは掛けてません。

■画面

MainPage.xaml

BlankPage1.xaml

BlankPage2.xaml

■できたもの

赤い部分がFrameコントロールでできています。ページ１へクリック。

Frameコントロール内にページ２が読み込まれました。Frameよりページ２が小さいのでこんな表示になります。

適当にTextBoxの値をいじって、Buttonをクリック。

TextBoxのTextがButtonのContentになる。

■説明

Metro Style Appsでは基本的にMainPage.xamlにFrameコントロールを置いて、Frameの中を遷移させていく感じで作るみたいです。

HTMLのiFrameみたいですね。

基本的にMainPage.xamlに書いたコントロールはずっと表示されます。

ページ１へボタンがそれに当たりますね。

ツールバー的なコントロールはMainPage.xamlに書くべきだと思うのですが、基本的にはMainPage.xamlを全画面Frameコントロールにして、中のページを作り込む方がいい気がします。

読み込まれるxamlはサイズを指定しなければ、とりあえずFrameに全画面で表示されるみたいです。

■ソースみる

□ページ1へボタンのクリックイベント。

private void Button_Click(object sender, RoutedEventArgs e)
{
     //frameはx:Nameで付けた名前だよ！
     this.frame.Navigate("Application16.BlankPage1");
}

Frameコントロールにはframeとx:Nameをつけています。

MainPageに置いてあるFrameの画面を変えるのはこんな感じでかきます。

"Application16.BlankPage1"というのはBlankPage.xamlの冒頭に書かれてあるx:Classになります。

□２枚目のページ２へボタンのクリックイベント

 private void Button_Click(object sender, RoutedEventArgs e)
 {
      //Frameっていうオブジェクトがあるんだよ！
     //textはTextBoxコントロールのx:Name
      this.Frame.Navigate("Application16.BlankPage2",text);
 }

自身がホストされているFrameから別の画面に遷移するときは、こんな風にかきます。

this.FrameがホストされてるFrameです。

第２引数で遷移先にobjectを渡せます。今回はtextと名前を付けたTextBoxを渡してます。

□３ページ目でデータを受け取る

protected override void OnNavigatedTo(Windows.UI.Xaml.Navigation.NavigationEventArgs e)
 {
       var textbox = new TextBox();
       textbox = (TextBox)e.Parameter;
       button.Content = textbox.Text;
 }

遷移してきたときにはOnNavigatedToイベントが走ります。

e.Parameterが第２引数にあたるので、textboxに代入して、Textプロパティをbutton.Contentにあててます。

簡単ですね。

■XAML

MainPage.xamlだけはUserControlになります。

<UserControl x:Class="Application16.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"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    
    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="675*"/>
            <ColumnDefinition Width="691*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" Grid.ColumnSpan="2">
            <StackPanel Orientation="Horizontal" Margin="0,0,-684,0">
                <Button Height="159" Width="667" FontSize="100" Content="ページ1へ" Click="Button_Click"/>
            </StackPanel>
            
            <Frame x:Name="frame" Background="Red" Height="588" Margin="8,0"/>
        </StackPanel>
    </Grid>
    
</UserControl>

Frameに読み込むxamlはPageコントロールになります。

<Page x:Class="Application16.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
    <Grid Height="153" Width="243" Background="#FF1919F7">
        <Button Content="ページ２へ" HorizontalAlignment="Left" VerticalAlignment="Top" Width="152" Click="Button_Click"/>
        <TextBox x:Name="text" HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top" Margin="38,75,0,0" Width="158"/>
    </Grid>
</Page>

<Page x:Class="Application16.BlankPage2"
    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"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignWidth="1366" d:DesignHeight="768">

    <!--Common resources for default dark theme applications-->
    <UserControl.Resources>
        <SolidColorBrush x:Key="PageBackgroundBrush" Color="#FF1A1A1A"/>
        <SolidColorBrush x:Key="PageForegroundBrush" Color="White"/>
        <SolidColorBrush x:Key="HighlightBrush" Color="#FF26A0DA"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FF046809">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="Full"/>
                <VisualState x:Name="Fill"/>
                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Snapped"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="105" Margin="41,146,0,0" VerticalAlignment="Top" Width="396"/>
    </Grid>
</Page>

Visual StudioでNew Items...->新しいxaml作成をすると、xamlにはUserControlと書かれているので、

自分でPageコントロールに書き直します。

とりあえずこんなかんじで画面遷移できます。

SLとかWPみたいなNavigationServiceはありません。

ちょっと慣れが必要だけど、Frameコントロールの名前を"Frame"にしておけば、

いつでもthis.Frame.Navigateで画面遷移できるね！

Permalink | コメント(0) | トラックバック(0) | 12:58