LongListSelectorコントロールを使う
このプログラムで実装する機能の動作を、下記に解説しておきます。
実行すると、先頭の「読み」の1文字でグループ分けされたデータが表示されます。帯状のCyanの背景色上にあるグループ分けされた「読み」をクリック、またはタッチ(マルチスクリーンの場合)すると、「読み」だけがGold色のタイル上に横並びで複数行に表示されます。任意の「読み」を選択すると、その「読み」に該当する、「読み」とデータが先頭に表示されます（図5）。
|
|
| 図5：実行すると、先頭の「読み」の1文字でグループ分けされたデータが表示される（左図）。グループ分けされた「読み」をクリックすると、「読み」だけがタイル上に横並びで複数行に表示される（中央図）。任意の「読み」を選択すると、その「読み」に該当する、「読み」とデータが先頭に表示される（右図）（クリックで拡大） |
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
※サンプル実行でエラーが発生した場合は、「ソリューションのビルド」を実行後、再度、デバッグ開始を行ってください。
プロジェクトの作成
VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Windows Phone Application」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP7_LongListSelector」という名前を付けています。
ソリューションエクスプローラー内のWP7_LongListSelectorの直下に、リスト4のXML文書ファイル(sampleData_Group.xml)を追加しておきます。XML文書ファイルをLINQ to XMLで処理するため、VS2010メニューの「プロジェクト(P)／参照の追加(R)」と選択してSystem.Xml.Linqを追加しておいてください。
ダウンロードされたサンプルプログラムにはXML文書ファイルは追加済みです。
リスト4 XML文書ファイル(sampleData_Group.xml)
ツールボックスへのLongListSelectorコントロールの追加
ツールボックスへのLongListSelectorコントロールの追加方法については、前述の「■ツールボックスへのAutoCompleteBoxコントロールの追加」を参照してください。
MainPage.xamlの編集とコントロールの追加
x:NameがPageTitleというTextBlockのTextプロパティに「LongListSelector」と指定します。ツールボックスからLongListSelectorコントロールを1個配置します。
書き出されるXAMLコードをリスト5のように編集します。
リスト5 編集されたXAMLコード(MainPage.xaml)
01 | （１）ツールボックスからLongListSelectorコントロールを配置すると、自動的にtoolkitという名前空間が追加されます。 |
02 | （２）<phone:PhoneApplicationPage.Resources>プロパティ要素内に、myItemTemplateというキーの<DataTemplate>要素を配置し、子要素として<StackPanel>要素を配置して、その中に<TextBlock>要素を5つ配置します。Textプロパティに「氏名」、「年齢」、「住所」、「勤務先」、「区切り」をバインドします。これらの名称はVBコード内のクラスで定義するプロパティ名です。各TextBlockの文字サイズであるFontSize、文字色であるForegroundプロパティを設定しておきます。 |
03 | （３）次に、myGroupHeaderTemplateというキーの<DataTemplate>を配置し、子要素として<Border>要素を配置します。<Border>要素の背景色のBackgroundにCyan、余白に5を指定します。<Border>要素の中に、<TextBlock>要素を配置して、Textプロパティに「Yomi」をバインドしておきます。「Yomi」はVBコード内のmyGroupクラスで定義したプロパティ名です。文字サイズ、文字色を指定します。ここの定義は、グループ分けされたデータのヘッダ(読み)となります。図5の左図で背景色がCyanの帯状の上に、文字色がCrimsonの「読み」が表示されている箇所です。 |
04 | （４）次に、myGroupItemTemplateというキーの<DataTemplate>を配置し、子要素として<Border>要素を配置します。<Border>要素の背景色のBackgroundにGold、WidthとHeightに100、余白に5を指定します。<Border>要素の中に、<TextBlock>要素を配置して、Textプロパティに「Yomi」をバインドしておきます。「Yomi」はVBコード内のmyGroupクラスで定義したプロパティ名です。文字サイズ、文字色を指定します。ここの定義は、図5の中央図で背景色がGoldのタイル状の上に文字色がCrimsonの「読み」が表示されている箇所です。 |
05 | （５）<toolkit:LongListSelector>要素に（２）、（３）、（４）で定義したテンプレートを |
06 | ItemTemplate="{StaticResource myItemTemplate}" |
07 | GroupHeaderTemplate="{StaticResource myGroupHeaderTemplate}" |
08 | GroupItemTemplate="{StaticResource myGroupItemTemplate}" |
10 | （６）<toolkit:LongListSelector>要素内に、<toolkit:LongListSelector.GroupItemsPanel>プロパティ要素を配置します。GroupItemsPanelプロパティでは、使用されるパネルグループの表示モードを設定できます。<ItemsPanelTemplate>要素を配置し、その中に<toolkit:WrapPanel Orientation="Horizontal"/>と記述します。<toolkit:WrapPanel>要素のOrientationプロパティにHorizontalを指定し、水平方向にパネルが表示されるようにします。Orientaionの規定値はVerticalで垂直方向への並びです。ここの指定で、図5の中央図のように、Goldのタイル状のパネルが水平方向に複数列で表示されます。 |
11 | <phone:PhoneApplicationPage |
12 | x:Class="WP7_LongListSelector.MainPage" |
15 | xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" |
16 | xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" |
19 | xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" ■（１） |
20 | mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" |
21 | FontFamily="{StaticResource PhoneFontFamilyNormal}" |
22 | FontSize="{StaticResource PhoneFontSizeNormal}" |
23 | Foreground="{StaticResource PhoneForegroundBrush}" |
24 | SupportedOrientations="Portrait" Orientation="Portrait" |
25 | shell:SystemTray.IsVisible="True"> |
26 | <phone:PhoneApplicationPage.Resources> ■（２） |
27 | <DataTemplate x:Key="myItemTemplate"> ■（２） |
29 | <TextBlock Text="{Binding 氏名}" FontSize="26" Margin="5"/> ■（２） |
30 | <TextBlock Text="{Binding 年齢}" Foreground="Aqua"/> ■（２） |
31 | <TextBlock Text="{Binding 住所}" Foreground="GreenYellow"/> ■（２） |
32 | <TextBlock Text="{Binding 勤務先}" Foreground="Beige"/> ■（２） |
33 | <TextBlock Text="{Binding 区切り}" Foreground="Gold"/> ■（２） |
37 | <DataTemplate x:Key="myGroupHeaderTemplate"> ■（３） |
38 | <Border Background="Cyan" Margin="5"> |
39 | <TextBlock Text="{Binding Yomi}" FontSize="30" Foreground="Crimson"/> |
42 | <DataTemplate x:Key="myGroupItemTemplate"> ■（４） |
43 | <Border Background="Gold" Width="100" Height="100" Margin="5"> |
44 | <TextBlock Text="{Binding Yomi}" FontSize="30" Foreground="Crimson"/> |
48 | </phone:PhoneApplicationPage.Resources> |
49 | <!--LayoutRoot is the root grid where all page content is placed--> |
50 | <Grid x:Name="LayoutRoot" Background="Transparent"> |
52 | <RowDefinition Height="Auto"/> |
53 | <RowDefinition Height="*"/> |
54 | </Grid.RowDefinitions> |
56 | <!--TitlePanel contains the name of the application and page title--> |
57 | <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> |
58 | <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> |
59 | <TextBlock x:Name="PageTitle" Text="LongListSelector" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> |
62 | <!--ContentPanel - place additional content here--> |
63 | <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> |
64 | <toolkit:LongListSelector x:Name="LongListSelector1" Margin="10,10,6,10" |
65 | ItemTemplate="{StaticResource myItemTemplate}" |
66 | GroupHeaderTemplate="{StaticResource myGroupHeaderTemplate}" |
67 | GroupItemTemplate="{StaticResource myGroupItemTemplate}"> ■（５） |
68 | <toolkit:LongListSelector.GroupItemsPanel> ■（６） |
69 | <ItemsPanelTemplate> ■（６） |
70 | <toolkit:WrapPanel Orientation="Horizontal"/> ■（６） |
72 | </toolkit:LongListSelector.GroupItemsPanel> |
74 | </toolkit:LongListSelector> |
78 | </phone:PhoneApplicationPage> |
