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

開発ツール

技術解説

連載 :

これから始めるWindows Phone プログラミング（基本編）

2011年7月25日(月)

PROJECT KySS

XAML(ImageComment.xaml)の編集

書き出されるImageComment.xamlをリスト3のように編集します。

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

01（１）図2のようにエミュレーターを横に倒した場合、画像もそれに伴って横向きに表示されるようにするには、PhoneApplicationPageを選択し、表示されるプロパティウィンドウの[その他]パネルにあるSupportedOrientationsプロパティに、PortraitOrLandscapeを指定します。
02（２）<phone:PhoneApplicationPage.Resources>プロパティ要素内に、ListBoxTemplateというキーのテンプレートを定義します。<StackPanel>要素内に、<Image>要素を配置し、WidthとHeightプロパティを指定します。Sourceプロパティに「画像名」をバインドします。Marginプロパティに10を指定し、余白を設定しています。次に<TextBloc>要素を配置し、Textプロパティに「説明」をバインドします。次に<Button>要素を配置し、Contentプロパティに「戻る」、ClickイベントにPageBackイベントハンドラを指定しています。<StackPanel>要素のスタックされる要素の向きを設定するOrientationプロパティの値は、デフォルトでVerticalですので、これらの要素は垂直方向に配置されます。ここで指定する名称はVBコード内のクラスで定義するプロパティ名です。
03（３）x:NameがPageTitleのTextBlockのTextプロパティを削除します。ここにはプログラムから選択された画像のタイトル名を表示させます。
04（４）<ListBox>要素のItemTemplateに（２）で定義したListBoxTemplateを参照させます。
05 
06<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
07x:Class="WP7_Pivot.ImageComment"
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  <phone:PhoneApplicationPage.Resources>
21    <DataTemplate x:Key="ListBoxTemplate">　■（２）
22      <StackPanel> 
23        <Image Width="640" Height="480" Source="{Binding 画像名}" Margin="10" />
24        <TextBlock Text="{Binding 説明}" />
25        <Button x:Name="backButton" Content="戻る" Click="PageBack"/>
26      </StackPanel>
27    </DataTemplate>
28   
29    </phone:PhoneApplicationPage.Resources>
30  <!--LayoutRoot is the root grid where all page content is placed-->
31  <Grid x:Name="LayoutRoot" Background="Transparent">
32    <Grid.RowDefinitions>
33      <RowDefinition Height="Auto"/>
34      <RowDefinition Height="*"/>
35    </Grid.RowDefinitions>
36 
37    <!--TitlePanel contains the name of the application and page title-->
38    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
39      <TextBlock x:Name="ApplicationTitle" Text="APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
40      <TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>　■（３）
41    </StackPanel>
42 
43    <!--ContentPanel - place additional content here-->
44    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
45      <ListBox Height="Auto" HorizontalAlignment="Left" Margin="27,25,0,0" Name="ListBox1" VerticalAlignment="Top" Width="Auto" ItemTemplate="{StaticResource ListBoxTemplate}"/>　■（４）
46    </Grid>
47  </Grid>
48  ～コード略～
49  </phone:PhoneApplicationPage.ApplicationBar>-->
50</phone:PhoneApplicationPage>

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

VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone Portrait Page」を追加します。「名前(N)」には、PersonalInfoDetails.xamlと指定します（図8参照）。個人情報の詳細データを表示するページです。

x:NameがPageTitleというTextBlockのTextプロパティに「詳細データ表示」と指定します。

エミュレーターデザイン画面上に、ツールボックスからTextBlockとButtonコントロールを１個ずつ配置します。ButtonコントロールのContentプロパティには「Topに戻る」と指定します。書き出されるXAMLコードはリスト4のようになります。

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

01（１）図2のようにエミュレーターを横に倒した場合、画像もそれに伴って横向きに表示されるようにするには、PhoneApplicationPageを選択し、表示されるプロパティウィンドウの[その他]にあるSupportedOrientationsプロパティに、PortraitOrLandscapeを指定します。
02 
03<phone:PhoneApplicationPage 
04  x:Class="WP7_Pivot.PersonalInfoDetails"
05  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
06  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
07  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
08  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
09  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
10  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
11  FontFamily="{StaticResource PhoneFontFamilyNormal}"
12  FontSize="{StaticResource PhoneFontSizeNormal}"
13  Foreground="{StaticResource PhoneForegroundBrush}"
14  SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"　■（１）
15  mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
16  shell:SystemTray.IsVisible="True">
17 
18  <!--LayoutRoot is the root grid where all page content is placed-->
19  <Grid x:Name="LayoutRoot" Background="Transparent">
20    <Grid.RowDefinitions>
21      <RowDefinition Height="Auto"/>
22      <RowDefinition Height="*"/>
23    </Grid.RowDefinitions>
24 
25    <!--TitlePanel contains the name of the application and page title-->
26    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
27      <TextBlock x:Name="ApplicationTitle" Text="APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
28      <TextBlock x:Name="PageTitle" Text="詳細データ表示" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
29    </StackPanel>
30 
31    <!--ContentPanel - place additional content here-->
32    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
33      <TextBlock Height="312" HorizontalAlignment="Left" Margin="9,129,0,0" Name="TextBlock1" Text="TextBlock" VerticalAlignment="Top" Width="441" FontFamily="Portable User Interface" FontSize="32" />
34      <Button Content="TOPに戻る" Height="81" HorizontalAlignment="Left" Margin="19,11,0,0" Name="Button1" VerticalAlignment="Top" Width="426" />
35    </Grid>
36  </Grid>
37   
38  <!--Sample code showing usage of ApplicationBar-->
39  ～コード略～
40</phone:PhoneApplicationPage>

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

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

＜後編に続く＞

「ピボットページを作成する（前編）」サンプルプログラム

2209_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/