婚活に使えるお見合いパーティ検索アプリを作る

コントロールの配置

ツールボックスからScrollViewerコントロールを配置し、その子要素としてGridViewコントロールを配置します。
次にWebBrowserコントロールを配置し、最初の状態ではVisibilityにCollapsedを指定して非表示としておきます。
WinRTXamlToolkitのWebBrowserコントロールを配置すると、要素内にControlsという名前空間が自動的に追加されます。
戻る(←)ボタンとなるButtonコントロールを配置します。最初の状態ではVisibilityにCollapsedを指定して非表示としておきます。

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

リスト3　書き出され編集されたXAML(PartyDataShowPage.xaml)

（1）要素内にControlsという名前空間が追加されています。プロパティ要素内に、Key名がGridViewTemplateという要素を配置します。
その子要素として要素を配置します。背景色にGreen、枠線の幅に3、枠線の色にCrimsonを指定します。CornerRadiusに12を指定して四隅を丸めます。
この要素の子要素として要素を配置し、Marginに5を指定して余白を設けます。
この要素の子要素として、再び要素を配置し、背景色にPinkを指定します。この要素の子要素として、要素を配置し、TextプロパティにTitleをバインドします。
パディングに3、文字色をNavyに指定します。ここと、これ以降にバインドする項目名は、VBコードのクラス内で定義するプロパティ名です。
このプロパティ名はmyDate以外は、下記URLの「レスポンスフィールド」に対応しています。
→　お見合いパーティーAPI

同じく要素を配置します。背景色をGoldとします。
子要素として2つの要素を配置し、文字色はNavyで、Textプロパティに、上から順番にPlace(開催場所)、myDate(日時)をバインドします。

同じく要素を配置し、背景色をGainsboroとします。
子要素として、4つの要素を配置します。文字色はNavyとし、上から順に、Textプロパティに、ReserveMan(男性の予約状況)、ReserveWoman(女性の予約状況)、AgeMan(男性の対象年齢)、AgeWoman(女性の対象年齢)をバインドします。

同じく要素を配置し、背景色をSnowとします。
子要素として2つの要素を配置します。Textプロパティに、AreaName(エリア名)、Article(内容)をバインドします。

最後に要素を配置し、Contentプロパティに「Webで詳細を表示」と指定します。
Tagプロパティにnoをバインドします。このnoは、どのボタンがクリックされたかの判定に使用します。ClickイベントにDetailsDataShowイベントハンドラを指定します。

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

（3）名前がWebBrowser1という要素を配置し、最初の状態ではVisibilityにCollapsedを指定して非表示としておきます。

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

<Page xmlns:Controls="using:WinRTXamlToolkit.Controls"（1）
  x:Class="PartyEtc.PartyDataShowPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:PartyEtc"
  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 Background="Green" BorderThickness="3" BorderBrush="Crimson" CornerRadius="12">（1）
      <StackPanel Margin="5" Height="650">（1）
        <StackPanel Background="Pink">（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding Title}" FontFamily="Meiryo UI" FontSize="24" Foreground="Navy"/>（1）
        </StackPanel>（1）
          <StackPanel Background="Gold">（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding Place}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy" />（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding myDate}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy" />（1）
        </StackPanel>（1）
        <StackPanel Background="Gainsboro">（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding ReserveMan}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy"/>（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding ReserveWoman}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy"/>（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding AgeMan}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy"/>（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding AgeWoman}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy"/>（1）
        </StackPanel>（1）
        <StackPanel Background="Snow">（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding AreaName}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy"/>（1）
          <TextBlock Padding="3" Width="400" TextWrapping="Wrap" Text="{Binding Article}" FontFamily="Meiryo UI" FontSize="20" Foreground="Navy"/>（1）
        </StackPanel>（1）
          <Button Content="Webで詳細を表示" Click="DetailsDataShow" Tag="{Binding no}"/>（1）
        </StackPanel>（1）
      </Border>（1）
    </DataTemplate>（1）
  </Page.Resources>（1）
    <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <ScrollViewerHorizontalAlignment="Left" Height="768" Margin="82,0,0,0" VerticalAlignment="Top" Width="1274">（2）
      <GridViewx:Name="GridView1" Height="725" Width="1208" FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>（2）
    </ScrollViewer>（2）
    <Controls:WebBrowserx:Name="WebBrowser1" Margin="58,0,0,10" Visibility="Collapsed"/>（3）
    <Button x:Name="backButton2" Style="{StaticResourceBackButtonStyle}" Margin="10,0,0,680" Visibility="Collapsed"/>（4）
  </Grid>
</Page>

図5：各コントロールを配置した（クリックで拡大）WebBrowserとButtonは最初の状態では非表示だが、レイアウトを確認するために表示させている

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト4のコードを記述します。

ロジックコードを記述する

リスト4　(MainWindow.xaml.vb)

Option Strict On

Imports Windows.UI.Popups

最新のHTTPアプリケーション用のプログラミングインターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートします。

Imports System.Net.Http

prefInfoクラス内に文字列型のprefプロパティを定義しておきます。

Public Class prefInfo
  Public Property pref As String
End Class
Public NotInheritable Class MainPage
  Inherits Page

XMLの要素を表すメンバ変数xmldocを宣言します。

  Dim xmldoc As XElement
  Dim myUri As String

ページがアクティブになった時の処理

XElement.LoadメソッドでXML文書ファイル(pref.xml)を読み込みます。

prefInfoクラス型の新しいリストである、prefListオブジェクトを作成します。

Descendantsメソッドで、全ての子孫要素に対して、その内容を変数resultに格納しながら、以下の処理を行います。
prefInfoクラスのprefプロパティに要素の値を指定して、AddメソッドでprefListオブジェクトに追加していきます。
GridViewのItemsSourceプロパティにprefListオブジェクトを指定します。これで、都道府県の一覧が表示されます。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    xmldoc = XElement.Load("pref.xml")
    Dim prefList As New List(Of prefInfo)
    For Each result In From c In xmldoc.Descendants("都道府県") Select c
      prefList.Add(New prefInfo With {.pref = result.Value})
    Next
    GridView1.ItemsSource = prefList
  End Sub

都道府県の項目が選択された時の処理

myFrameを表示状態にします。PCの解像度を取得して1920×1080の解像度の場合は、myFrameのWidthを1700、Heightに1080と指定します。しかし、こういった場合は解像度を取得するよりも、XAML内の要素をで括るほうが一般的なやり方ですので、そちらをお勧めします。その場合は、解像度を取得するコードは不要です。

GridViewの選択されたインデックスに+1した値を変数partyIndexに格納します。+1しているのは、先ほどの「お見合いパーティーAPI」を見るとわかりますが、パラメータprefに指定する値が、1が北海道、47が沖縄となっています。GridViewで選択されたインデックス(SelelctedIndex)を、このパラメータprefに指定するため、0から始まるGridViewのSelectedIndexに+1をしています。この値を引数にPartyDataShowPageに遷移します。

  Private Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged
    Try
      myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible
        Dim myWidth = CInt(Window.Current.CoreWindow.Bounds.Width)
      Dim myHeight = CInt(Window.Current.CoreWindow.Bounds.Height)
      If myWidth = 1920 AndAlsomyHeight = 1080 Then
        myFrame.Width = 1700
        myFrame.Height = 1080
      End If
      Dim partyIndex = GridView1.SelectedIndex + 1
      myFrame.Navigate(GetType(PartyDataShowPage), partyIndex)
      
    Catch
      myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
      Exit Sub
    End Try
  End Sub