地震の震源地を表示する

連載 :

2012年1月10日(火)

Windows Phone 縦向きのページ(DetailsPage.xaml)の追加

VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone 縦向きのページ」を選択し、「名前(N)」に「DetailsPage.xaml」と指定して、[追加(A)]ボタンをクリックします。このページには、地震に関する詳細データが表示されます。

表示されるエミュレーターデザイン画面上の、PageTitleというx:Nameを持つTextBlockを削除します。ツールボックスからTextBlockコントロールを8個配置します。項目名となるTextBlockコントロールのForeground（文字色）にはCrimsonを指定します。内容となるTextBlockの文字サイズは26でBoldに指定しておきます（図3）。

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

書き出されるXAMLコードをリスト2のように編集します。

リスト2　編集されたXAMLコード(DetailsPage.xaml)

01（１）ここでも、Page Transitionを使用していますので、toolkitという名前空間を定義します。
02（２）TurnstileTransitionm(画面が右から左に回転するトランジッション)のコードを追加しています。
03（３）5行を作成しています。
04（４）項目名となる<TextBlock>要素と、その内容を表示する<TextBlock>要素を配置しています。
05<phone:PhoneApplicationPage 
06  x:Class="WP71_EarthQuakeInfo.DetailsPage"
07  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
08  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
09  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
10  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
11  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
12  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
13  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"　■（１）
14  FontFamily="{StaticResource PhoneFontFamilyNormal}"
15  FontSize="{StaticResource PhoneFontSizeNormal}"
16  Foreground="{StaticResource PhoneForegroundBrush}"
17  SupportedOrientations="Portrait" Orientation="Portrait"
18  mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
19  shell:SystemTray.IsVisible="True" Language="ja-JP">
20  
21  <toolkit:TransitionService.NavigationInTransition>　■（２）
22    <toolkit:NavigationInTransition>
23      <toolkit:NavigationInTransition.Backward>
24        <toolkit:TurnstileTransition Mode="BackwardIn"/>
25      </toolkit:NavigationInTransition.Backward>
26      <toolkit:NavigationInTransition.Forward>
27        <toolkit:TurnstileTransition Mode="ForwardIn"/>
28      </toolkit:NavigationInTransition.Forward>
29    </toolkit:NavigationInTransition>
30  </toolkit:TransitionService.NavigationInTransition>
31  <toolkit:TransitionService.NavigationOutTransition>
32    <toolkit:NavigationOutTransition>
33      <toolkit:NavigationOutTransition.Backward>
34        <toolkit:TurnstileTransition Mode="BackwardOut"/>
35      </toolkit:NavigationOutTransition.Backward>
36      <toolkit:NavigationOutTransition.Forward>
37        <toolkit:TurnstileTransition Mode="ForwardOut"/>
38      </toolkit:NavigationOutTransition.Forward>
39    </toolkit:NavigationOutTransition>
40  </toolkit:TransitionService.NavigationOutTransition>　■（２）
41  
42  <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
43  <Grid x:Name="LayoutRoot" Background="Transparent" ShowGridLines="True">
44    <Grid.RowDefinitions>
45      <RowDefinition Height="Auto"/>
46      <RowDefinition Height="*"/>
47    </Grid.RowDefinitions>
48  
49    <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
50    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
51      <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
52      <TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
53    </StackPanel>
54  
55    <!--ContentPanel - 追加コンテンツをここに入力します-->
56    <Grid x:Name="ContentPanel" Margin="12,66,12,-66" ShowGridLines="True" Grid.Row="1">
57      <Grid.RowDefinitions>　■（３）
58        <RowDefinition Height="54*" />
59        <RowDefinition Height="47*" />
60        <RowDefinition Height="52*" />
61        <RowDefinition Height="46*" />
62        <RowDefinition Height="105*" />
63      </Grid.RowDefinitions>　■（３）
64      <TextBlock Height="36" HorizontalAlignment="Left" Margin="6,40,0,0" Name="TextBlock1" Text="発生日時" VerticalAlignment="Top" Width="127" FontSize="22" FontWeight="Bold" Foreground="Crimson" />　■（４）
65      <TextBlock Height="36" HorizontalAlignment="Right" Margin="0,40,6,0" Name="dateTextBlock" Text="TextBlock" VerticalAlignment="Top" Width="300" FontSize="26" FontWeight="Bold" />
66      <TextBlock FontSize="22" FontWeight="Bold" Height="36" HorizontalAlignment="Left" Margin="6,36,0,0" Name="TextBlock3" Text="震源地" VerticalAlignment="Top" Width="127" Grid.Row="1" Foreground="Crimson" />
67      <TextBlock FontSize="26" Height="36" HorizontalAlignment="Right" Margin="0,36,6,0" Name="locationTextBlock" Text="TextBlock" VerticalAlignment="Top" Width="300" Grid.Row="1" FontWeight="Bold" />
68  <TextBlock FontSize="18" FontWeight="Bold" Height="36" HorizontalAlignment="Left" Name="TextBlock2" Text="マグニチュード" VerticalAlignment="Top" Width="127" Grid.Row="2" Margin="0,36,0,0" Foreground="Crimson" />
69      <TextBlock FontSize="26" Height="36" HorizontalAlignment="Right" Margin="0,36,6,0" Name="magnitudeTextBlock" Text="TextBlock" VerticalAlignment="Top" Width="300" Grid.Row="2" FontWeight="Bold" />
70      <TextBlock FontSize="22" FontWeight="Bold" Height="36" HorizontalAlignment="Left" Name="TextBlock4" Text="震度" VerticalAlignment="Top" Width="127" Grid.Row="3" Margin="0,31,0,0" Foreground="Crimson" />
71      <TextBlock FontSize="26" Height="36" HorizontalAlignment="Right" Margin="0,31,12,0" Name="intensityTextBlock" Text="TextBlock" VerticalAlignment="Top" Width="294" Grid.Row="3" FontWeight="Bold" />　■（４）
72    </Grid>
73  </Grid>
74   
75  <!--ApplicationBar の使用法を示すサンプル コード-->
76 ～コード略～
77</phone:PhoneApplicationPage>

次に、MainPage.xamlを展開して表示される、MainPage.xaml.vbをダブルクリックしてリスト3のコードを記述します。

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

リスト3　(MainPage.xaml.vb)

01Option Strict On
02Imports System.Xml.Linq
03 
04位置情報に関するクラスの含まれる、System.Device.Location名前空間をインポートします。
05Imports System.Device.Location
06 
07Windows Phoneのための、Bing Maps Silverlight Controlのパブリッククラスを含む、Microsoft.Phone.Controls.Maps名前空間をインポートします。
08Imports Microsoft.Phone.Controls.Maps
09 
10Partial Public Class MainPage
11  Inherits PhoneApplicationPage
12  
13  ' コンストラクター
14  Public Sub New()
15    InitializeComponent()
16  End Sub
17  Dim no As Integer = 0
18 
19XML要素を表すXElementクラス型のメンバ変数xmldocを宣言します。
20  Dim xmldoc As XElement
21 
22新しいMenuItem型のリストであるmenuItemListメンバ変数を宣言します
23  Dim menuItemList As New List(Of MenuItem)
24 
25  Dim index As Integer = 0

「地震の震源地を表示する」サンプルプログラム

2820_1.zip

著者

PROJECT KySS

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

四国のSOHO。薬師寺国安（VBプログラマ）と、薬師寺聖（デザイナ、エンジニア）によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/