楽天の商品カテゴリから商品を検索できるプログラムを作る

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

情報をタイルで表示するページを作成します。

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

コントロールの配置

ツールボックスからScrollViewerコントロールを1個、その子要素としてGridViewコントロールを1個配置します。

書き出されるXAMLをリスト3のように編集します。レイアウトは図7のようになります。

リスト3　書き出され編集されたXAMLコード(SearchResultPage.xaml)

（1）プロパティ要素内に、Key名がGridViewTemplateという要素を配置しています。
子要素として要素を配置し、枠線の幅に3、枠線の色にCrimson、背景色にNavyを指定します。
子要素として要素を配置し、OrientationにHorizontal、Marginに5を指定して余白を設けます。この要素の子要素として要素を配置し、WidthとHeightに128を指定します。
Sourceプロパティに「画像」をバインドします。

さらに要素を配置し、子要素として2つの要素を配置します。
最初ののTextプロパティに「商品名」をバインドし、文字色をBeigeとします。
次のTextプロパティに「価格」をバインドし、文字色をCrimsonとします。ここでバインドする名称は、VBコード内のクラスで定義したプロパティ名です。

（2）要素の子要素として、名前がGridView1という要素を配置します。
ItemTemplateプロパティにStaticResourceで（1）で定義したGridViewTemplateを参照させて、指定します。

（3）名前がbackButtonという要素を配置します。
StyleプロパティにStaticResourceでBackButtonStyleを参照します。このBackButtonStyleは、Commonフォルダー内のStandardStyles.xaml内に定義されています。大部分がコメントアウトされて使用できないようになっていますので、VS2012のメニューの「編集(E)／検索と置換(F)」と選択して、「Back」という名前で検索して、BackButtonStyleが定義されているStyleを見つけてください。
コメントアウトされている場合はコメントを外します。←アイコンが表示されます。

（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コントロールを配置した（クリックで拡大）