<description>
<p>では、つぎにもう1つのサンプルを紹介します。</p>
<h2>別のページに遷移する際のパラメータの渡し方</h2>
<p>「名前」「住所」「仕事」の3つのデータを別ページに渡すサンプルです。</p>
<p>「名前」「住所」「仕事」を入力して〔OK〕ボタンをタップすると、これら3つの情報が別ページに表示されます（図6）。Windows ストアアプリでは、どんな型のデータでも、別ページに渡すことが可能です。別ページで受け取ったデータは、オブジェクト型になりますので、任意の型にキャストして使用することになります。</p>
<div class="imagebox"><a href="/sites/default/files/articles/376706.png" target="_blank"><img alt="" src="/sites/default/files/articles/376706.png" width="400" /></a>
<div class="caption">図6：「名前」「住所」「仕事」のデータが別ページに表示されている（クリックで拡大）</div>
</div>
<p>実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホでとった動画です。見難い点はご了承願います。</p>
<p><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/C7z3o-fUHIc?rel=0" width="560"></iframe></p>
<p>サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。</p>
<h3>プロジェクトの作成</h3>
<p>VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_NavigateParameter」という名前を付けています。</p>
<p>次に、ソリューションエクスプローラー内のWin8_NavigateParameterプロジェクトを選択した状態で、マウスの右クリックをし、表示されるメニューから「追加(D) ／新しいフォルダ(D)」と選択して、名前がImageというフォルダを作成します。作成したImageフォルダを選択し、マウスの右クリックで表示されるメニューから「追加(D)／既存の項目(G)」と選択して1個の画像ファイル（1920×1200）を追加しておきます。</p>
<p>画像ファイルはダウンロードされたサンプルファイルには追加済です。</p>
<h3>コントロールの配置</h3>
<p>ツールボックスからデザイン画面上にImageコントロールを1個、TextBlockコントロール（項目名を表示）を3個、TextBoxコントロール(入力用)を3個、Buttonコントロールを2個、Frameコントロールを1個配置します。</p>
<p>ImageコントロールのSourceプロパティにはImageフォルダ内の画像を読み込んでおきます。レイアウトは図7のようになります。書き出されるXAMLコードはリスト5です。</p>
<div class="imagebox"><a href="/sites/default/files/articles/376707.png" target="_blank"><img alt="" src="/sites/default/files/articles/376707.png" width="400" /></a>
<div class="caption">図7：各コントロールをレイアウトした（クリックで拡大）</div>
</div>
<h4>リスト5 書き出されたXAMLコード(MainPage.xaml)</h4>
<ul class="type-none">
<li>（１）<image>要素のSourceにImageフォルダ内の画像を指定しています。</image></li>
<li>（２）「名前」「住所」「仕事」用の入力ボックスである3つの<textbox>要素を配置しています。</textbox></li>
<li>（３）〔OK〕と〔戻る〕ボタンを配置しています。〔戻る〕ボタンは初期状態では、IsEnabledプロパティのチェックを外し（False）使用不可としています。</li>
<li>（４）<frame />要素を配置しています。</li>
</ul>
<pre class="brush: plain; " type="syntaxhighlighter"><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>
</pre>
<h3>「空白のページ」の作成</h3>
<p>VS2012のメニューの「プロジェクト(P)／新しい項目の追加(W)」と選択します。「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。「名前(N)」にGetParametersPage.xamlと入力し、[追加(A)]ボタンをクリックします。</p>
<h3>コントロールの配置</h3>
<p>表示されるデザイン画面に、ツールボックスからTextBlockコントロールを1個配置します。TextWrappingプロパティにはWrapを指定し、文字の回り込みを可能にしておきます（図8）。</p>
<p>書き出されるXAMLコードは省略します。</p>
<div class="imagebox"><a href="/sites/default/files/articles/376707.png" target="_blank"><img alt="" src="/sites/default/files/articles/376707.png" width="400" /></a>
<div class="caption">図7：各コントロールをレイアウトした（クリックで拡大）</div>
</div>
<p>図8 TextBlockコントロールをレイアウトした(Parameter_08.png)</p>
<p>次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト6のコードを記述します。</p>
<h3>ロジックコードを記述する</h3>
<h4>リスト6 (MainWindow.xaml.vb)</h4>
<pre class="brush: plain; " type="syntaxhighlighter">Option Strict On
</pre>
<p>MessageDialogを表示するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。</p>
<pre class="brush: plain; " type="syntaxhighlighter">Imports Windows.UI.Popups
</pre>
<p>PersonalInfo構造体で、文字列型の「Namae」、「Address」、「Work」を定義しておきます。</p>
<pre class="brush: plain; " type="syntaxhighlighter">Public Structure PersonalInfo
Public Namae As String
Public Address As String
Public Work As String
End Structure
Public NotInheritable Class MainPage
Inherits Page
</pre>
<p>PersonalInfo構造体のメンバ変数myPersonalInfoオブジェクトを宣言します。</p>
<pre class="brush: plain; " type="syntaxhighlighter"> Dim myPersonalInfo As PersonalInfo
</pre>
<h4>〔OK〕ボタンがクリックされた時の処理</h4>
<p>「名前」「住所」「仕事」のいずれかのデータが未入力の場合は、警告メッセージを表示して処理を抜けます。<br />
それ以外の場合は、〔戻る〕ボタンの使用を可能にし、構造体のNameにnamaeTextBoxの値、AddressにaddressTextBoxの値、WorkにjobTextBoxの値を指定します。<br />
FrameのNavigateメソッドでmyPersonalInfo構造体オブジェクトを引数に、GetParametersPageに遷移します。</p>
<pre class="brush: plain; " type="syntaxhighlighter"> 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
</pre>
<h4>〔戻る〕ボタンがクリックされた時の処理</h4>
<p>Frameを非表示にします。</p>
<pre class="brush: plain; " type="syntaxhighlighter"> Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
End Sub
End Class
</pre>
<p>次に、ソリューションエクスプローラー内のGetParametersPage.xamlを展開して表示される、GetParametersPage.xaml.vbをダブルクリックしてリスト7のコードを記述します。</p>
<h3>ロジックコードを記述する</h3>
<h4>リスト7 (GetParametersPage.xaml.vb)</h4>
<pre class="brush: plain; " type="syntaxhighlighter">Option Strict On
Public NotInheritable Class GetParametersPage
Inherits Page
</pre>
<h4>ページがアクティブになった時の処理</h4>
<p>MainPage.xamlから渡された値（e.Parameter）をPersonalInfo構造体に変換して、PersonalInfo構造体型の変数myResultに格納します。</p>
<p>変数myNameに構造体のNamaeの値を、myAddressにAddressの値を、myJobにWorkの値を格納します。<br />
TextBlock内に、各変数の値を文字列と連結して表示します。</p>
<pre class="brush: plain; " type="syntaxhighlighter"> 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
</pre>
<p>今回はここまでです。ありがとうございました。</p>
</description>
