コントロールの配置

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

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

（4）戻る(←)ボタンとなる、名前がbackButton2という

<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