AutoCompleteBoxとLongListSelectorコントロールを使う

開発ツール

技術解説

連載 :

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

2011年8月22日(月)

PROJECT KySS

今回は2つのサンプルを紹介します。AutoCompleteBoxとLongListSelectorコントロールを使ったサンプルです。

AutoCompleteBoxコントロールは、ユーザー入力のテキストボックスに、入力に基づいた一致候補を含むドロップダウンテキストボックスを提供するコントロールです。

LongListSelectorコントロールは、インデックス付きリストをグループ化するコントロールです。

はじめに、AutoCompleteBoxコントロールを使ったサンプルを紹介します。

これらのコントロールは、Silverlight for Windows Phone Toolkit - Feb 2011.msiに含まれていますので、下記URLよりダウンロードしてインストールしてください。

→参照：Silverlight for Windows Phone Toolkit - Feb 2011.msi

AutoCompleteBoxを使う

このプログラムで実装する機能の動作を、下記に解説しておきます。

実行すると、まず、テキスト入力ボックスが表示されます。入力ボックスにフォーカスをあてると、入力パネルが表示されますので、「薬(くすり)」と入力します。すると「薬」で始まる人物の一覧が表示されます。任意の人物を選択すると、入力ボックスの下に詳細情報が表示されます（図1）。
※日本語入力の手順については第1回を参照してください。

人物名はリスト1のXML文書ファイル（sampleData.xml）内に記述しています。先頭の1文字を知りたい場合はこのXML文書を開いてご覧ください。

表示される詳細データが長いと、端が途切れて表示されています。この場合は、エミュレーターの右隅上にカーソルを持っていくと、コントロールパネルが表示されます。エミュレーターを横にするアイコンをクリックすると、エミュレーターが横表示になり、データが見やすくなります（図2）。

図1：実行すると、テキスト入力ボックスが表示される（左図）。「薬(くすり)」と入力すると、「薬」で始まる人物の一覧が表示される（中央図）。任意の人物を選択すると、入力ボックスの下に詳細情報が表示される（右図）（クリックで拡大）

図2：エミュレーターの右隅上にカーソルを持っていくと、コントロールパネルが表示される（左図）。エミュレーターを横にするアイコンをクリックする。エミュレーターが横表示になりデータ全体が見渡せる（右図）（クリックで拡大）

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
※サンプル実行でエラーが発生した場合は、「ソリューションのビルド」を実行後、再度、デバッグ開始を行ってください。

プロジェクトの作成

VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Windows Phone Application」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP7_AutoCompleteBox」という名前を付けています。Windows Phoneのバージョンは7.0を選択します。

ソリューションエクスプローラー内のWP7_AutoCompleteBoxの直下に、リスト1のXML文書ファイル(sampleData.xml)を追加しておきます。

XML文書ファイルをLINQ to XMLで処理するため、VS2010メニューの「プロジェクト(P)／参照の追加(R)」と選択してSystem.Xml.Linqを追加しておいてください。

ダウンロードされたサンプルプログラムにはXML文書ファイルは追加済みです。

リスト1 　XML文書ファイル(sampleData.xml)

01<氏名>要素内に先頭の1文字が、同じ文字で開始される氏名を複数記述しておきます。
02<?xml version="1.0"?>
03  <個人情報>
04    <情報>
05      <氏名>愛媛花子</氏名>
06      <年齢>30</年齢>
07      <住所>松山市道後1-1-1</住所>
08      <勤務先>道後IT株式会社</勤務先>
09    </情報>
10    <情報>
11      <氏名>夏目団吾</氏名>
12      <年齢>56</年齢>
13      <住所>松山市湯渡2-2-2</住所>
14      <勤務先>松山XMLセンター</勤務先>
15    </情報>
16    ～<情報></情報>繰り返し～
17  </個人情報>

ツールボックスへのAutoCompleteBoxコントロールの追加

詳細については、「第11回：ListPickerコントロールを使う」を参照してください。

Silverlight for Windows Phone Toolkit - Feb 2011.msiをインストールしても、VS2010のツールボックスには、AutoCompleteBoxコントロールは登録されていません。登録するには、まず、VS 2010のメニューから「プロジェクト(P)／参照の追加(R)」と選択し、[.NET]タブ内の「Microsoft.Phone.Controls.Toolkit」コンポーネントを選択し[OK]ボタンをクリックしてください。もし、「Microsoft.Phone.Controls.Toolkit」コンポーネントが見つからない場合は、[参照]タブをクリックして、

C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Feb11\Bin\ Microsoft.Phone.Controls.Toolkit.dll

を指定してください（Windows 7の場合）。

次に、ツールボックスの、「Windows Phone Controls」タブ上で、マウスの右クリックで表示されるメニューから、「アイテムの選択(I)」をクリックします。「ツールボックスアイテムの選択」画面が開きます。「Windows Phone Components」タブ内のAutoCompleteBoxにチェックを付け[OK]ボタンをクリックします。ツールボックスにAutoCompleteBoxコントロールが追加されます。

MainPage.xamlの編集とコントロールの追加

x:NameがPageTitleというTextBlockのTextプロパティに「AutoCompleteBox」と指定します。ツールボックスからAutoCompleteBoxとStackPanelコントロールを1個ずつ配置します。

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

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

01（１）PhoneApplicationPageのプロパティウィンドウ内の[その他]パネルにある、SupportedOrientationsプロパティからPortraitOrLandscapeを選択します（図3）。これで、エミュレーターが横向きになった時、表示される内容も横向きに表示されるようになります。
02（２）<toolkit:AutoCompleteBox>のValueMemberPathプロパティに「氏名」を指定します。これは、VBコード内のPersonalInfoクラスで定義するプロパティ名です。ValueMemberPathプロパティは、AutoCompleteBox コントロールの、テキスト部分に表示する値を取得するための、プロパティパスを取得します。
03（３）<toolkit:AutoCompleteBox.ItemTemplate>プロパティ要素内に<DataTemplate> 要素を配置し、子要素として<TextBlock>要素を配置します。Textプロパティに「氏名」をバインドします。AutoCompleteBox.ItemTemplateプロパティには、AutoCompleteBoxコントロールの、ドロップダウン部分の各項目の表示に使用される DataTemplate を設定できます。
04（４）<StackPanel>要素を配置しています。
05<phone:PhoneApplicationPage 
06  x:Class="WP7_AutoCompleteBox.MainPage"
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  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
15  FontFamily="{StaticResource PhoneFontFamilyNormal}"
16  FontSize="{StaticResource PhoneFontSizeNormal}"
17  Foreground="{StaticResource PhoneForegroundBrush}"
18  SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"　■（１）
19  shell:SystemTray.IsVisible="True">
20  <!--LayoutRoot is the root grid where all page content is placed-->
21  <Grid x:Name="LayoutRoot" Background="Transparent">
22    <Grid.RowDefinitions>
23      <RowDefinition Height="Auto"/>
24      <RowDefinition Height="*"/>
25    </Grid.RowDefinitions>
26  
27    <!--TitlePanel contains the name of the application and page title-->
28    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
29      <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
30      <TextBlock x:Name="PageTitle" Text="AutoCompleteBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
31    </StackPanel>
32  
33    <!--ContentPanel - place additional content here-->
34    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
35      <toolkit:AutoCompleteBox Height="80" HorizontalAlignment="Left" Margin="21,26,0,0" Name="AutoCompleteBox1" VerticalAlignment="Top" Width="409" ValueMemberPath="氏名">　■（２）
36        <toolkit:AutoCompleteBox.ItemTemplate>　■（３）
37          <DataTemplate>
38            <TextBlock Text="{Binding 氏名}"/>
39          </DataTemplate>
40        </toolkit:AutoCompleteBox.ItemTemplate>
41      </toolkit:AutoCompleteBox>
42      <StackPanel Height="377" HorizontalAlignment="Left" Margin="12,126,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="438" />　■（４）
43    </Grid>
44  </Grid>
45～コード略～
46</phone:PhoneApplicationPage>

図3：SupportedOrientationsプロパティにPortraitOrLandscape を指定する

リスト2を設定すると図4のように表示されます。

図4：AutoCompleteBoxとStackPanelコントロールを配置した（クリックで拡大）

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

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

リスト3　(MainPage.xaml.vb)

01Option Strict On
02Imports System.Xml.Linq
03 
04PersonalInfoクラス内で文字列型の「氏名、年齢、住所、勤務先」プロパティを定義しておきます。
05Public Class PersonalInfo
06  Property 氏名 As String
07  Property 年齢 As String
08  Property 住所s As String
09  Property 勤務先 As String
10End Class
11Partial Public Class MainPage
12  Inherits PhoneApplicationPage
13  ～コード略～
14   
15XElement型のメンバ変数xmldocを宣言しています。
16    Dim xmldoc As XElement

ページが読み込まれた時の処理

01XElement.LoadメソッドでXML文書ファイル(sampleData.xml)を読み込みます。
02PersonalInfoクラスの新しいリストであるmyPersonalInfoオブジェクトを生成します。
03Descendantsメソッドで取得した<情報>要素のコレクションに対して、各要素を変数 result に格納しながら以下の処理を行います。
04PersonalInfoクラスの「氏名」プロパティに<氏名>要素の値を指定し、AddメソッドでmyPersonalInfoオブジェクトに追加していきます。
05AutoCompleteBoxのItemsSourceプロパティにmyPersonaInfoオブジェクトを指定します。
06  Private Sub MainPage_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
07    xmldoc = XElement.Load("sampleData.xml")
08    Dim myPersonalInfo As New List(Of PersonalInfo)
09  
10    For Each Result In From c In xmldoc.Descendants("情報") Select c
11      myPersonalInfo.Add(New PersonalInfo With {.氏名 = Result.Element("氏名").Value})
12    Next
13    AutoCompleteBox1.ItemsSource = myPersonalInfo
14  End Sub

AutoCompleteBox内から任意の氏名を選択した場合の処理

01StackPanelコントロール内を一度クリアしておきます。そうしないと、データが重複して追加されてしまいます。Try～Catch～End Tryで例外処理を記述しています。この処理を記述していないと、AutoCompleteBoxの入力欄に、続けて別な文字を入力する際、エラーが表示されてしまいますので、これを回避するために例外処理を記述しておきます。
02変数selectNameにAutoCompleteBoxから選択した値を、PersonalInfoクラスにキャストし、その「氏名」を取得して、格納しています。
03Descendantsメソッドで取得した<情報>要素のコレクションに対して、子要素<氏名>の値が、変数selectNameに格納されている値に等しい各要素を、変数 result に格納しながら以下の処理を行います。
04新しいTextBlockのインスタンスmyTextBlockオブジェクトを生成します。文字サイズに30を指定します。Textプロパティに、改行を追加しながら、<氏名>要素、<年齢>要素、<住所> 要素、<勤務先>要素の値を指定していきます。StackPanel１に値の追加されたmyTextBlockオブジェクトを指定します。これで、選択された氏名の詳細データが表示されます。例外が発生した場合は、処理を抜けます。
05  Private Sub AutoCompleteBox1_SelectionChanged(sender As Object, e As System.Windows.Controls.SelectionChangedEventArgs) Handles AutoCompleteBox1.SelectionChanged
06    StackPanel1.Children.Clear()
07    Try
08      Dim selectName As String = DirectCast(AutoCompleteBox1.SelectedItem, PersonalInfo).氏名
09  
10      For Each result In From c In xmldoc.Descendants("情報") Where c.Element("氏名").Value.Equals(selectName) Select c
11        Dim myTextBlock As New TextBlock
12        myTextBlock.FontSize = 30
13        myTextBlock.Text = "【氏　名】=" & result.Element("氏名").Value & vbCrLf &
14                                      "【年　齢】=" & result.Element("年齢").Value & vbCrLf &
15                                      "【住　所】=" & result.Element("住所").Value & vbCrLf &
16                                      "【勤務作】=" & result.Element("勤務先").Value
17        StackPanel1.Children.Add(myTextBlock)
18      Next
19    Catch
20      Exit Sub
21    End Try
22  End Sub
23End Class

エミュレーターの表示方向が変化する時に発生するイベント

1エミュレーターが横向きになった時はStackPanelのWidthの値を広くとります。
2  Private Sub MainPage_OrientationChanged(sender As Object, e As Microsoft.Phone.Controls.OrientationChangedEventArgs) Handles MyBase.OrientationChanged
3    StackPanel1.Width = Me.ActualWidth
4  End Sub

｢AutoCompleteBoxとLongListSelectorコントロールを使う｣サンプルプログラム_1

2237_1.zip
｢AutoCompleteBoxとLongListSelectorコントロールを使う｣サンプルプログラム_2

2237_2.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/