今回紹介するサンプルプログラムは、楽天で取り扱う商品から、自分のほしい商品カテゴリを表示して検索ができるようにする、オンラインショッピングに役立つ内容です。
画面が表示されると商品のカテゴリ一覧が表示されます（図1）。カテゴリを選択して、画面の上方でマウスの右クリックをすると、検索項目の入力欄が表示されます。検索項目を入力して「Yes」アイコンをタップします（図2）。検索項目に該当する情報がタイルで一覧表示されます（図3）。任意のタイルを選択すると、詳細情報がブラウザ内に表示されます（図4）。ブラウザの画面から、前の画面に戻るには、マウスカーソルを左隅上に移動し、表示される小さな画面をタップします。
図1：商品のカテゴリが表示されている。「本、雑誌、コミック」のカテゴリを選択し、画面情報でマウスの右クリックをする（クリックで拡大）
図2：検索項目にタッチと入力して「Yes」ボタンをタップした（クリックで拡大）
図3：「タッチ」に関するコミックの情報がタイルで一覧表示されている（クリックで拡大）
図4：「タッチ」に関するコミックの詳細情報がブラウザで表示されている（クリックで拡大）
実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成 VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。
リスト1 XML文書ファイル(RakutenGenreId.xml) <?xml version="1.0"?>
<Items>
<genreId title="CD,DVD,楽器">101240</genreId>
<genreId title="インテリア,寝具 ">100804</genreId>
<genreId title="おもちゃ,ホビー,ゲーム">101164</genreId>
<genreId title="キッズ,ベビー,マタニティ">100533</genreId>
<genreId title="キッチン,日用品雑貨,文具 ">215783</genreId>
<genreId title="ジュエリー,腕時計">216129</genreId>
<genreId title="スポーツ,アウトドア">101070</genreId>
～<genreId><genreId>繰り返し～
</Items>
楽天 APIの使用 今回は楽天のAPIを使用します。詳細については下記のURLを参照してください。楽天商品検索API
ApplicationIDが必要になりますので、下記のURLより「会員登録」をして、表示される画面の指示に従って、必要項目を入力し、ApplicationIDの取得を行ってください。既に会員になられている方はログインすると図5のような画面が表示され、アプリID/デベロッパーID（applicationId / developerId）が表示されていますので、これをメモしておいてください。このApplicationIdをプログラム内で使用します。
図5：筆者のApplicationIdが表示されている（クリックで拡大）
コントロールの配置 ツールボックスからデザイン画面上にScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを配置します。コントロールを1個配置します。次に「Yes」ボタンとなるButtonコントロールを1個配置します。
書き出されるXAMLコードをリスト2のように編集します。レイアウトは図6のようになります。
リスト2 書き出されたXAMLコード(MainPage.xaml) （1）プロパティ要素内に、Key名がGridViewTemplateという要素を配置しています。要素を配置し、枠線の幅に3、CornerRadiusに12を指定して四隅を丸め、背景色にGold、枠線の色にCrimsonを指定します。要素を配置します。Textプロパティにtitleをバインドし、文字色にNavyを指定します。ここでTextプロパティにバインドする名称は、VBコードのクラス内で定義するプロパティ名です。
（2）要素の子要素として、名前がGridView1という要素を配置します。
（3）情報がタイルで表示されるプロジェクトに遷移する、名前がmyFrameという要素を配置します。
（4）名前がbackButtonという要素を配置します。
（5）名前がAppBar1という要素を配置します。このバーはマウスの右クリックで、表示、非表示を切り替えられます。
（6）要素の子要素として要素を配置します、OrientationプロパティにHorizontalを指定して、オブジェクトのスタック方向を水平とします。
（7）さらに、要素の子要素として、Textプロパティに「検索項目」と指定した要素を配置します。要素を配置し、検索項目の入力欄とします。最初の状態ではReadOnlyにTrueを指定して編集不可としています。
要素を配置します。最初の状態では、IsEnabledにFalseを指定して、使用不可としておきます。StyleプロパティにStaticResourceでYesAppBarButtonStyleを参照します。このYesAppBarButtonStyleは、Commonフォルダー内のStandardStyles.xaml内に定義されています。大部分がコメントアウトされて使用できないようになっていますので、VS2012のメニューの「編集(E)／検索と置換(F)」と選択して、「Yes」という名前で検索して、YesAppBarButtonStyleが定義されているStyleを見つけてください。コメントアウトされている場合はコメントを外します。
<Page
x:Class="RakutenSearch.MainPage"
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" CornerRadius="12" Background="Gold" BorderBrush="Crimson">（1）
<TextBlock Text="{Binding title}" Foreground="Navy" Width="400" FontSize="30" Padding="5"/>（1）
</Border>（1）
</DataTemplate>（1）
</Page.Resources>（1）
<Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
<ScrollViewerHorizontalAlignment="Left" Height="667" Margin="10,91,0,0" VerticalAlignment="Top" Width="1346">（2）
<GridViewx:Name="GridView1" Height="630" Width="1290" FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>（2）
</ScrollViewer>（2）
<Frame x:Name="myFrame" HorizontalAlignment="Left" Height="677" Margin="13,81,0,0" VerticalAlignment="Top" Width="1343"/>（3）
<Button x:Name="backButton" HorizontalAlignment="Left" Height="53" Margin="13,10,0,0" VerticalAlignment="Top" Width="74" Style="{StaticResourceBackButtonStyle}"/>（4）
<AppBar Background="DarkGreen" Margin="10,0,10,668" Height="100" x:Name="AppBar1">（5）
<StackPanel Margin="5" Orientation="Horizontal">（6）
<TextBlockHorizontalAlignment="Left" Height="53" TextWrapping="Wrap" Text="検索項目" VerticalAlignment="Center" Width="158" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold"/>（7）
<TextBoxx:Name="searchTextBox" HorizontalAlignment="Left" Height="53" TextWrapping="Wrap" VerticalAlignment="Center" Width="399" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold" IsReadOnly="True"/>（7）
<Button x:Name="okButton" HorizontalAlignment="Left" Height="91" VerticalAlignment="Center" Width="98" Style="{StaticResourceYesAppBarButtonStyle}" IsEnabled="False"/>（7）
</StackPanel>（6）
</AppBar>（5）
</Grid>
</Page>
図6：各コントロールを配置した（クリックで拡大）
