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

開発ツール

技術解説

連載 :

GPSや写真を応用したアプリ作りのためのサンプルプログラム集

2013年8月21日(水)

薬師寺国安

「空白のページ」の作成(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という

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

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

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

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

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

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

コントロールの配置

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

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

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

楽天の商品検索APIを使って、商品のジャンル別検索を行うアプリサンプル

4002_1.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストアアプリを多数公開中。

Microsoft MVP for Development Platforms - Client App Dev （Oct 2003-Sep 2012）。Microsoft MVP for Development Platforms - Windows Phone Development（Oct 2012-Sep 2013）。Microsoft MVP for Development Platforms - Client Development（Oct 2013-Sep 2014）。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015）。