Windows 8 Store Applicationプログラミング（基本編）第4回

別のページに遷移する際のパラメータの渡し方

では、つぎにもう1つのサンプルを紹介します。

別のページに遷移する際のパラメータの渡し方

「名前」「住所」「仕事」の3つのデータを別ページに渡すサンプルです。

「名前」「住所」「仕事」を入力して〔OK〕ボタンをタップすると、これら3つの情報が別ページに表示されます（図6）。Windows ストアアプリでは、どんな型のデータでも、別ページに渡すことが可能です。別ページで受け取ったデータは、オブジェクト型になりますので、任意の型にキャストして使用することになります。

図6：「名前」「住所」「仕事」のデータが別ページに表示されている（クリックで拡大）

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホでとった動画です。見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_NavigateParameter」という名前を付けています。

次に、ソリューションエクスプローラー内のWin8_NavigateParameterプロジェクトを選択した状態で、マウスの右クリックをし、表示されるメニューから「追加(D) ／新しいフォルダ(D)」と選択して、名前がImageというフォルダを作成します。作成したImageフォルダを選択し、マウスの右クリックで表示されるメニューから「追加(D)／既存の項目(G)」と選択して1個の画像ファイル（1920×1200）を追加しておきます。

画像ファイルはダウンロードされたサンプルファイルには追加済です。

コントロールの配置

ツールボックスからデザイン画面上にImageコントロールを1個、TextBlockコントロール（項目名を表示）を3個、TextBoxコントロール(入力用)を3個、Buttonコントロールを2個、Frameコントロールを1個配置します。

ImageコントロールのSourceプロパティにはImageフォルダ内の画像を読み込んでおきます。レイアウトは図7のようになります。書き出されるXAMLコードはリスト5です。

図7：各コントロールをレイアウトした（クリックで拡大）

リスト5　書き出されたXAMLコード(MainPage.xaml)

（１）要素のSourceにImageフォルダ内の画像を指定しています。
（２）「名前」「住所」「仕事」用の入力ボックスである3つの要素を配置しています。
（３）〔OK〕と〔戻る〕ボタンを配置しています。〔戻る〕ボタンは初期状態では、IsEnabledプロパティのチェックを外し（False）使用不可としています。
（４）要素を配置しています。

<Page
  x:Class="Win8_NavigateParameter.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Win8_NavigateParameter"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
 
  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image Source="Image/win8_10.jpg"/>■（１）
    <TextBlock HorizontalAlignment="Left" Height="67" Margin="148,57,0,0" TextWrapping="Wrap" Text="名前" VerticalAlignment="Top" Width="130" FontFamily="Meiryo UI" FontSize="48"/>
    <TextBlock HorizontalAlignment="Left" Height="67" Margin="148,155,0,0" TextWrapping="Wrap" Text="住所" VerticalAlignment="Top" Width="130" FontFamily="Meiryo UI" FontSize="48"/>
    <TextBlock HorizontalAlignment="Left" Height="67" Margin="148,250,0,0" TextWrapping="Wrap" Text="仕事" VerticalAlignment="Top" Width="130" FontFamily="Meiryo UI" FontSize="48"/>
    <TextBox x:Name="nameTextBox" HorizontalAlignment="Left" Height="67" Margin="313,57,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="408" FontFamily="Meiryo UI" FontSize="48"/>■（２）
    <TextBox x:Name="addressTextBox" HorizontalAlignment="Left" Height="67" Margin="313,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="853" FontFamily="Meiryo UI" FontSize="48"/>■（２）
    <TextBox x:Name="jobTextBox" HorizontalAlignment="Left" Height="67" Margin="313,250,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="408" FontFamily="Meiryo UI" FontSize="48"/>■（２）
    <Button x:Name="okButton" Content="OK" HorizontalAlignment="Left" Height="72" Margin="313,343,0,0" VerticalAlignment="Top" Width="363" FontFamily="Meiryo UI" FontSize="36"/>■（３）
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="774" Margin="0,-6,0,0" VerticalAlignment="Top" Width="1225"/>■（４）
    <Button x:Name="backButton" Content="戻る" HorizontalAlignment="Left" Height="54" Margin="1248,23,0,0" VerticalAlignment="Top" Width="108" IsEnabled="False"/>■（３）
  </Grid>
</Page>

「空白のページ」の作成

VS2012のメニューの「プロジェクト(P)／新しい項目の追加(W)」と選択します。「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。「名前(N)」にGetParametersPage.xamlと入力し、[追加(A)]ボタンをクリックします。

コントロールの配置

表示されるデザイン画面に、ツールボックスからTextBlockコントロールを1個配置します。TextWrappingプロパティにはWrapを指定し、文字の回り込みを可能にしておきます（図8）。

書き出されるXAMLコードは省略します。

図7：各コントロールをレイアウトした（クリックで拡大）

図8　TextBlockコントロールをレイアウトした(Parameter_08.png)

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト6のコードを記述します。

ロジックコードを記述する

リスト6　(MainWindow.xaml.vb)

Option Strict On

MessageDialogを表示するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。

Imports Windows.UI.Popups

PersonalInfo構造体で、文字列型の「Namae」、「Address」、「Work」を定義しておきます。

Public Structure PersonalInfo
  Public Namae As String
  Public Address As String
  Public Work As String
End Structure
Public NotInheritable Class MainPage
  Inherits Page

PersonalInfo構造体のメンバ変数myPersonalInfoオブジェクトを宣言します。

  Dim myPersonalInfo As PersonalInfo

〔OK〕ボタンがクリックされた時の処理

「名前」「住所」「仕事」のいずれかのデータが未入力の場合は、警告メッセージを表示して処理を抜けます。
それ以外の場合は、〔戻る〕ボタンの使用を可能にし、構造体のNameにnamaeTextBoxの値、AddressにaddressTextBoxの値、WorkにjobTextBoxの値を指定します。
FrameのNavigateメソッドでmyPersonalInfo構造体オブジェクトを引数に、GetParametersPageに遷移します。

  Private Async Sub okButton_Click(sender As Object, e As RoutedEventArgs) Handles okButton.Click
    If nameTextBox.Text = String.Empty OrElse addressTextBox.Text = String.Empty OrElse jobTextBox.Text = String.Empty Then
      Dim message As New MessageDialog("データが未入力です。")
      Await message.ShowAsync
      Exit Sub
    Else
      backButton.IsEnabled = True
      myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible
      myPersonalInfo.Namae = nameTextBox.Text
      myPersonalInfo.Address = addressTextBox.Text
      myPersonalInfo.Work = jobTextBox.Text
 
      myFrame.Navigate(GetType(GetParametersPage), myPersonalInfo)
    End If
  End Sub

〔戻る〕ボタンがクリックされた時の処理

Frameを非表示にします。

  Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
    myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
  End Sub
End Class

次に、ソリューションエクスプローラー内のGetParametersPage.xamlを展開して表示される、GetParametersPage.xaml.vbをダブルクリックしてリスト7のコードを記述します。

ロジックコードを記述する

リスト7　(GetParametersPage.xaml.vb)

Option Strict On
Public NotInheritable Class GetParametersPage
  Inherits Page

ページがアクティブになった時の処理

MainPage.xamlから渡された値（e.Parameter）をPersonalInfo構造体に変換して、PersonalInfo構造体型の変数myResultに格納します。

変数myNameに構造体のNamaeの値を、myAddressにAddressの値を、myJobにWorkの値を格納します。
TextBlock内に、各変数の値を文字列と連結して表示します。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    Dim myResult As PersonalInfo = DirectCast(e.Parameter, PersonalInfo)
    Dim myName = myResult.Namae
    Dim myAddress = myResult.Address
    Dim myJob = myResult.Work
    resultTextBlock.Text = "私の名前は" & myName & "で、住所は" & myAddress & "です。" & myJob & "の仕事をやっています。"
  End Sub
End Class

今回はここまでです。ありがとうございました。