PR

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

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という要素を配置します。

<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コントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • 楽天の商品検索APIを使って、商品のジャンル別検索を行うアプリサンプル

薬師寺国安事務所

薬師寺国安事務所代表。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)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています