ピボットページを作成する（後編）

連載 :

2011年7月29日(金)

前回の前編では「Windows Phone Pivot Application」の作成方法と、ImageComment.xaml、PersonalInfoDetails.xamlのデザインとコードの追加修正をメインに解説しました。

後編では、myFavoriteSite.xaml（お気に入りのページをブラウザで表示するページ）の作成と、XAMLコードの追加修正、およびロジックコードを解説します。ロジックコードの解説がメインになりますので、嫌にならずに（苦笑）ついてきてください。予習の意味で前編を再読してから後編を読まれることをお勧めします。

サンプルは以下よりダウンロードできます（前編と同じファイル）。
→　「ピボットページを作成する」のサンプルファイル（4.6MB）
※サンプル実行でエラーが発生した場合は、「ソリューションのビルド」を実行後、再度、デバッグ開始を行ってください。

Windows Phone Portrait Page(myFavoriteSite.xaml)の追加

VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone Portrait Page」を追加します。「名前(N)」には、myFavoriteSite.xamlと指定します（図1）。ブラウザ内にお気に入りのサイトを表示するページです。

図1：「Windows Phone Portrait Page」を追加する（クリックで拡大）

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

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

01（１）前編の図2のようにエミュレーターを横に倒した場合、画像もそれに伴って横向きに表示されるようにするには、PhoneApplicationPageを選択し、表示されるプロパティウィンドウの[その他]パネルにあるSupportedOrientationsプロパティに、PortraitOrLandscapeを指定します。
02（２）x:NameがPageTitleというTextBlockのTextプロパティを削除します。プログラムから「サイト名」を表示させます。
03（３）2行目にツールボックスからButtonコントロールを配置し、Contentプロパティに「Topに戻る」と指定します。
04（４）3行目にツールボックスからWebBrowserコントロールを配置します。
05  このサンプルでは、直接関係はないのですが、WebBrowserコントロールでは、プロパティウィンドウの[共通]パネルにあるIsScriptEnabledにデフォルトでチェックが付いておらず(False)、JavaScriptが無効となっています。このままだと、JavaScriptを使用したページに入った場合、うまく表示できない不具合が発生します。IsScriptEnabledにチェックを付けてTrueにしておく必要があります。
06<phone:PhoneApplicationPage 
07  x:Class="WP7_Pivot.myFavoritSite"
08  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
09  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
10  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
11  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
12  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
13  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
14  FontFamily="{StaticResource PhoneFontFamilyNormal}"
15  FontSize="{StaticResource PhoneFontSizeNormal}"
16  Foreground="{StaticResource PhoneForegroundBrush}"
17  SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"　■（１）
18  mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
19  shell:SystemTray.IsVisible="True">
20  
21  <!--LayoutRoot is the root grid where all page content is placed-->
22  <Grid x:Name="LayoutRoot" Background="Transparent">
23    <Grid.RowDefinitions>
24      <RowDefinition Height="Auto"/>
25      <RowDefinition Height="Auto"/>
26      <RowDefinition Height="*"/>
27    </Grid.RowDefinitions>
28  
29    <!--TitlePanel contains the name of the application and page title-->
30    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
31          <TextBlock x:Name="ApplicationTitle" Text="APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
32        <TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>　■（２）
33    </StackPanel>
34   
35    <!--ContentPanel - place additional content here-->
36    <Grid Grid.Row="1">
37    <Button Content="Topに戻る" x:Name="Button1"/>　■（３）
38    </Grid>
39    <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0"> 
40      <phone:WebBrowser Height="597" HorizontalAlignment="Stretch" Margin="13,21,0,0" Name="WebBrowser1" VerticalAlignment="Top" Width="Auto" IsEnabled="True" IsScriptEnabled="True" />　■（４）
41    </Grid>
42  </Grid>
43～コード略～
44</phone:PhoneApplicationPage>

リスト1を設定して表示されるエミュレーターのデザイン画面は図2のようになります。

図2：リスト1を設定して表示されるmyFavoriteSite.xamlのデザイン画面（クリックで拡大）

クラスファイルの作成

XML文書ファイル(photo_etc.xmlとsampleData.xmlとmyFavoriteSite.xml)ファイルを読み込み、XElementを返すクラスを作成します。VS2010のメニューから「プロジェクト(P)／クラスの追加(C)」と選択しても、表示される「新しい項目の追加」テンプレート内には、クラスと名の付くテンプレートは見当たりません。ここでは「コードファイル」を選択します。「名前(N)」にはReadXmldoc.vbと指定し、[追加(A)]ボタンをクリックします。この現象は、Windows Phone Developer Tools 7.1 Betaで発生する現象です。

今回のサンプルは、Windows Phone Developer Tools 7.1 Betaで作成していますが、現在リリースされている、Windows Phone SDK 7.1 Beta2では、VS2010メニューから「クラスの追加(C)」を選択すると、クラスのテンプレートがきちんと表示されますので、最新バージョンのWindows Phone SDK 7.1 Beta2を下記URIよりダウンロードして、インストールしてください。
　→参照：Windows Phone SDK 7.1 Beta2
インストール方法はこの連載の第1回と同じですので、そちらを参考にしてください。

表示されるコード画面内に、リスト2のコードを記述します。

リスト2 (ReadXmldoc.vb)

01  Option Strict On
02 
03LINQ to XMLを利用するためSystem.Xml.Linq名前空間をインポートしておきます。
04  Imports System.Xml.Linq
05 
06ReadXmldocというクラスを定義します。ReadXmldocは「コードファイル」に付けた名称と同じです。
07このReadXmldocクラス内に、XElement型のphoto関数とpersonalInfo関数とfavoriteSite関数を作成します。
08XElement.LoadメソッドでXML文書ファイル(photo_etc.xmlまたはsampleData.xmlまたはmyFavoriteSite.xml)を読み込み、読み込んだXElement型のxmldocまたはpersonalInfoDocまたはsiteDocを戻り値とします。
09  Public Class ReadXmldoc
10    Function photo() As XElement
11      Dim xmldoc As XElement = XElement.Load("photo_etc.xml")
12      Return xmldoc
13    End Function
14   
15  Function personalInfo() As XElement
16    Dim personalInfoDoc As XElement = XElement.Load("sampleData.xml")
17    Return personalInfoDoc
18  End Function
19  
20  Function favoriteSite() As XElement
21    Dim siteDoc As XElement = XElement.Load("myFavoriteSite.xml")
22    Return siteDoc
23  End Function
24End Class

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

著者

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/