Windows 8 Developer Previewなので正式版とは異なる場合があります。 また、Windows Updateが走るときもあるため、エントリ執筆現在の情報をもとにかいています。
今回はMetro Style Appsで一番シンプルな画面遷移とデータの受け渡しです。
かっこいいトランジションとかは掛けてません。
■画面
MainPage.xaml
BlankPage1.xaml
BlankPage2.xaml
■できたもの
赤い部分がFrameコントロールでできています。ページ1へクリック。
Frameコントロール内にページ2が読み込まれました。Frameよりページ2が小さいのでこんな表示になります。
適当にTextBoxの値をいじって、Buttonをクリック。
TextBoxのTextがButtonのContentになる。
■説明
Metro Style Appsでは基本的にMainPage.xamlにFrameコントロールを置いて、Frameの中を遷移させていく感じで作るみたいです。
HTMLのiFrameみたいですね。
基本的にMainPage.xamlに書いたコントロールはずっと表示されます。
ページ1へボタンがそれに当たりますね。
ツールバー的なコントロールは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になります。
□2枚目のページ2へボタンのクリックイベント
private void Button_Click(object sender, RoutedEventArgs e) { //Frameっていうオブジェクトがあるんだよ! //textはTextBoxコントロールのx:Name this.Frame.Navigate("Application16.BlankPage2",text); }
自身がホストされているFrameから別の画面に遷移するときは、こんな風にかきます。
this.FrameがホストされてるFrameです。
第2引数で遷移先にobjectを渡せます。今回はtextと名前を付けたTextBoxを渡してます。
□3ページ目でデータを受け取る
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が第2引数にあたるので、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="ページ2へ" 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で画面遷移できるね!