緊急時に対応する救急指定病院の検索アプリを作る

連載 :

2013年8月15日(木)

コントロールの配置

ツールボックスからデザイン画面上にScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを配置します。
戻る(←)ボタンとなるButtonコントロールを1個配置します。
マウスの右クリックで表示されるバーのAppBarコントロールを1個配置し、その子要素としてStackPanelコントロールを1個配置します。Marginには5を指定して余白を設け、OrientationプロパティにはHorizontalを指定して、オブジェクトのスタック方向を水平方向とします。
StackPanelコントロールの子要素として、さらにStackPanelコントロールを配置し、Marginに5、OrientationにHorizontalと指定します。
子要素としてTextBlockコントロールを1個配置し、Textプロパティに「都道府県選択」と指定します。
次に、最初のStackPanel要素の子要素としてComboBoxコントロールを1個配置します。
さらに最初のStackPanel要素の子要素として、StackPanel要素を1個配置し、Marginに5、OrientationにHorizontalを指定し、その子要素として、WinRTXAMLToolKitのコントロールである、WatermarkTextBoxを1個配置します。
WatermarkTextに「市区町村を入力・・・・・」と指定します。WatermarkTextBoxがフォーカスをもって入力状態になった時は、WatermarkTextの内容は消えます。
最初のStackPanelの子要素として「Yes」ボタンとなるButtonコントロールを1個配置します。

次にAppbarコントロールの次に、WebBrowserコントロールを配置したプロジェクトに遷移するFrameコントロールを1個配置します。

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

リスト2　書き出されたXAMLコード(MainPage.xaml)

（1）WinRTXAMLToolkitのWatermatkTextBoxを使用しているため（後述）、要素内にControlsという名前空間が定義されています。

（2）プロパティ要素内に、Key名がGridViewTemplateという要素を配置しています。
子要素として要素を配置し、その子要素としてさらに要素を配置します。
背景色にDarkKhakiを指定し、子要素として要素を配置します。
TextプロパティにpubDateをバインドし、文字色にCrimsonを指定します。

さらに、要素を配置し、背景色にDarkGreenを指定します。
その子要素として、要素を配置し、Textプロパティにtitleをバインドします。文字色はGoldとしています。

さらに、StackPanel>要素を配置し、背景色にBeigeを指定します。
その子要素として、要素を配置し、Textプロパティにdescriptionをバインドします。
文字色はNavyとしています。ここでTextプロパティにバインドする名称は、VBコードのクラス内で定義するプロパティ名です。

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

（4）名前がbackButtonという

（5）名前がAppBar1という要素を配置します。このバーはマウスの右クリックで、表示、非表示を切り替えられます。

（6）要素の子要素として要素を配置します。OrientationプロパティにHorizontalを指定して、オブジェクトのスタック方向を水平とします。

（7）さらに、（6）の要素の子要素として要素を配置し、Marginに5、OrinetationにHorizontalを指定します。
この要素の子要素として、要素を配置し、Textプロパティに「都道府県選択」と指定します。最初の要素の子要素として、prefComboBoxという名前の要素を配置します。
次に、要素を配置し、OrientationにHorizontal、Marginに5を指定します。この子要素として、WinRTXAMLToolkitの名前がWaterTextBox1という要素を配置しています。接頭辞であるControlsは（1）で定義されています。
WatermarkTextプロパティに、「市区町村を入力・・・・・」と指定します。この文言はWatermarkTextBoxにフォーカスが移り、入力する場合には自動的に消えます。

（8）最初の要素の子要素として、名前がokButtonという

（9）「救急指定病院」の情報をWebBrowserに表示するプロジェクトに遷移する、名前がmyFrameという、要素を配置します。

01<Page xmlns:Controls="using:WinRTXamlToolkit.Controls" （1）
02x:Class="DesignatedHospitalEmergency.MainPage"
03xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05xmlns:local="using:DesignatedHospitalEmergency"
06xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08mc:Ignorable="d">
09<Page.Resources>（2）
10<DataTemplatex:Key="GridViewTemplate">（2）
11<StackPanel>（2）
12<StackPanel Background="DarkKhaki">（2）
13<TextBlock Text="{Binding pubDate}" Padding="5" FontFamily="Meiryo UI" FontSize="20" FontWeight="Bold" Foreground="Crimson" Width="400" HorizontalAlignment="Center"/>（2）
14</StackPanel>（2）
15<StackPanel Background="DarkGreen">（2）
16<TextBlock Text="{Binding title}" Padding="5" FontFamily="Meiryo UI" FontSize="24" FontWeight="Bold" Foreground="Gold" TextWrapping="Wrap" Width="400" />
17</StackPanel>（2）
18<StackPanel Background="Beige">（2）
19<TextBox Text="{Binding description}" Padding="5" FontFamily="Meiryo UI" FontSize="20" FontWeight="Bold" Foreground="Navy" TextWrapping="Wrap" Width="400" AcceptsReturn="True" Height="200"/>（2）
20</StackPanel>（2）
21</StackPanel>（2）
22</DataTemplate>（2）
23</Page.Resources>（2）
24<Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}" Margin="82,0,0,0">
25<ScrollViewer  Height="758" Margin="10,5,0,5" HorizontalAlignment="Left">（3）
26<GridView Height="738" Width="1313" x:Name="GridView1"  FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>（3）
27</ScrollViewer>（3）
28<Button x:Name="backButton" Style="{StaticResourceBackButtonStyle}" Margin="-77,0,0,720"/>（4）
29<AppBar Background="DarkGreen" Height="100" Margin="-10,668,10,0" x:Name="AppBar1">（5）
30<StackPanel Margin="5" Orientation="Horizontal">（6）
31<StackPanel Margin="5" Orientation="Horizontal">（7）
32<TextBlock Text="都道府県選択  " FontFamily="Meiryo UI" FontSize="16" FontWeight="Bold" VerticalAlignment="Center"/>（7）
33</StackPanel>（7）
34<ComboBoxx:Name="prefComboBox" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold" Width="254"/>（7）
35<StackPanel Orientation="Horizontal" Margin="5">（7）
36<Controls:WatermarkTextBoxx:Name="WaterTextBox1" WatermarkText="市区町村を入力・・・・・" Width="450" FontSize="36" FontWeight="Bold" Margin="0,10"/>（7）
37</StackPanel>（7）
38<Button x:Name="okButton" Style="{StaticResourceYesAppBarButtonStyle}" Margin="0,5,0,0" HorizontalAlignment="Left"/>（8）
39</StackPanel>（6）
40</AppBar>（5）
41<Frame x:Name="myFrame" HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1284" Margin="-10,0,0,0"/>（９）
42</Grid>
43</Page>

図4：各コントロールをレイアウトした（クリックで拡大）

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

次に、救急指定病院の詳細データをWebBrowserで表示するためのページを作成します。

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

コントロールの配置

ツールボックスからWebBrowserコントロールを1個配置します。名前はWebBrowser1としておきます。

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

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

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

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

リスト3　(MainWindow.xaml.vb)

`1`	`Option Strict On`

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

1Imports System.Net.Http
2 
3Imports Windows.UI.Popups

HospitalInfoクラス内に文字列のpubDate、title、description、linkプロパティを定義しておきます。

1Public Class HospitalInfo
2  Public Property pubDate As String
3  Public Property title As String
4  Public Property description As String
5  Public Property link As String
6End Class
7 
8Public NotInheritable Class MainPage
9  Inherits Page

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

`1`	`Dim xmldoc As XElement`

`2`	`Dim prefName As String`

開発 / Windowsストアアプリ / Windows 8 / サンプルアプリ / GPS / 位置情報

著者

薬師寺国安

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

薬師寺国安事務所

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