「空白のページ」の作成(SearchResultPage.xaml)

（4）WebBrowserPageに遷移する名前がmyFrameという要素を配置します。

<Page
  x:Class="RakutenSearch.SearchResultPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:RakutenSearch"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Page.Resources>（1）
    <DataTemplatex:Key="GridViewTemplate">（1）
      <Border BorderThickness="3" BorderBrush="Crimson" Background="Navy">（1）
        <StackPanel Orientation="Horizontal" Margin="5" Height="Auto">（1）
        <Image Source="{Binding 画像}" Width="128" Height="128"/>（1）
        <StackPanel Width="370">（1）
          <TextBlock Text="{Binding 商品名}" FontSize="18" TextWrapping="Wrap"  Foreground="Beige" Height="Auto" Padding="5"/>（1）
          <TextBlock Text="{Binding 価格}" FontSize="16" Foreground="Crimson" Height="Auto" Padding="5"/>（1）
        </StackPanel>（1）
      </StackPanel>（1）
      </Border>（1）
    </DataTemplate>（1）
  </Page.Resources>
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <ScrollViewerHorizontalAlignment="Left" Height="748" Margin=Margin="31,10,0,0"VerticalAlignment="Top" Width="1293">（2）
      <GridViewx:Name="GridView1" Height="730" Width="1220" FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>（1）
    </ScrollViewer>
    <Button x:Name="backButton" HorizontalAlignment="Left" Height="53" Margin="-53,10,0,0" VerticalAlignment="Top" Width="47" Style="{StaticResourceBackButtonStyle}"/>（3）
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="768" Margin="3,0,0,0" VerticalAlignment="Top" Width="1309"/>（4）
  </Grid>
</Page>

図7：各コントロールを配置した（クリックで拡大）

「空白のページ」の作成(WebBrowserPage.xaml)

情報をブラウザで表示するページを作成します。

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

コントロールの配置

ツールボックスからWebBrowserコントロールをドラッグ＆ドロップします。このコントロールはWinRT XAML Tookitのコントロールで、今までにも何回か使用したコントロールです。ツールバーには既に、このコントロールが登録されていると思いますので、これを使用してください。ツールボックスに追加されていない方は、ダウンロードしたサンプル内のWinRTXAMLToolkitフォルダー内にあるWinRTXamlToolkit.dllを参照の追加から参照し、ツールボックスにも「アイテムの選択」から、このDLLを参照してコントロールを追加してください。

書き出されるXAMLは省略します。レイアウトは図8になります。

図8：WebBrowserコントロールを配置した（クリックで拡大）