このページは役に立ちましたか。
このページのコンテンツについての ご意見をお待ちしております
その他にご意見はありますか。
残り 1500 文字
エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 用に LongListSelector でグループ化されたリストにデータを表示する方法

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 のみ

このトピックでは、データをグループ化したリストとして LongListSelector コントロールに表示する方法について説明します。このトピックの例では、姓の最初の文字に基づいてグループ化されたアドレス帳エントリを表示します。グループ ヘッダーをクリックすると、すべてのアルファベット文字を含むジャンプ リストが表示されます。ユーザーはこのジャンプ リストから LongListSelector 内の特定のグループに移動することができます。

このトピックは、次のセクションで構成されています。

LongListSelector コントロールを追加し、正しくこれを参照する最も簡単な方法は、[ツールボックス] からコントロールをドラッグし、XAML デザイナーまたは XAML ビューにドロップする方法です。

LongListSelector コントロールを追加するには

  1. Visual Studio で、Windows Phone OS 8.0 を対象とする新しい Windows Phone アプリ プロジェクトを LLSSample という名前で作成します。

  2. LLSSample プロジェクトで、[ツールボックス] を開き、[コモン コントロール] をクリックします。

  3. [ツールボックス] から、LongListSelector コントロールを XAML ビューにドラッグします。

    
    <!--ContentPanel - place additional content here-->
    <Grid> 
       <phone:LongListSelector x:Name="AddrBook"/>
    </Grid>
    

AlphaKeyGroup はヘルパー クラスであり、フラット リスト形式のデータを、キーに基づいてエントリをグループ化したリストに変換するのに使用します。この例では、このクラスを使用して、アドレス帳エントリの単純なリストを姓の最初の文字に基づいてグループ化されたリストの一覧に変換します。

AlphaKeyGroup クラスを作成するには

  1. ソリューション エクスプローラーで、LLSSample プロジェクトを右クリックし、[追加] をポイントして、[クラス] をクリックします。

  2. [新しい項目の追加] ダイアログの [名前] ボックスに「AlphaKeyGroup.cs」と入力し、[追加] をクリックします。

  3. 次のコードをコピーし、AlphaKeyGroup クラスに貼り付けます。

    
    using System.Collections.Generic;
    using System.Globalization;
    using Microsoft.Phone.Globalization;
    
    namespace LLSSample
    {
        public class AlphaKeyGroup<T> : List<T>
        {
            /// <summary>
            /// The delegate that is used to get the key information.
            /// </summary>
            /// <param name="item">An object of type T</param>
            /// <returns>The key value to use for this object</returns>
            public delegate string GetKeyDelegate(T item);
    
            /// <summary>
            /// The Key of this group.
            /// </summary>
            public string Key { get; private set; }
    
            /// <summary>
            /// Public constructor.
            /// </summary>
            /// <param name="key">The key for this group.</param>
            public AlphaKeyGroup(string key)
            {
                Key = key;
            }
    
            /// <summary>
            /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
            /// </summary>
            /// <param name="slg">The </param>
            /// <returns>Theitems source for a LongListSelector</returns>
            private static List<AlphaKeyGroup<T>> CreateGroups(SortedLocaleGrouping slg)
            {
                List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();
    
                foreach (string key in slg.GroupDisplayNames)
                {
                    list.Add(new AlphaKeyGroup<T>(key));
                }
    
                return list;
            }
    
            /// <summary>
            /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
            /// </summary>
            /// <param name="items">The items to place in the groups.</param>
            /// <param name="ci">The CultureInfo to group and sort by.</param>
            /// <param name="getKey">A delegate to get the key from an item.</param>
            /// <param name="sort">Will sort the data if true.</param>
            /// <returns>An items source for a LongListSelector</returns>
            public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, CultureInfo ci, GetKeyDelegate getKey, bool sort)
            {
                SortedLocaleGrouping slg = new SortedLocaleGrouping(ci);
                List<AlphaKeyGroup<T>> list = CreateGroups(slg);
    
                foreach (T item in items)
                {
                    int index = 0;
                    if (slg.SupportsPhonetics)
                    {
                        //check if your database has yomi string for item
                        //if it does not, then do you want to generate Yomi or ask the user for this item.
                        //index = slg.GetGroupIndex(getKey(Yomiof(item)));
                    }
                    else
                    {
                        index = slg.GetGroupIndex(getKey(item));
                    }
                    if (index >= 0 && index < list.Count)
                    {
                        list[index].Add(item);
                    }
                }
    
                if (sort)
                {
                    foreach (AlphaKeyGroup<T> group in list)
                    {
                        group.Sort((c0, c1) => { return ci.CompareInfo.Compare(getKey(c0), getKey(c1)); });
                    }
                }
    
                return list;
            }
    
        }
    }
    
    

このセクションでは、まずアドレス帳エントリの単純なリストを作成してから、そのリストをグループ化されたリストに変換します。

データの単純なリストを作成するには

  1. MainPage.xaml.cs で、AddressBook という名前の次のクラスを追加します。このクラスはアドレス帳の 1 つのエントリを表します。

    
    public class AddressBook
    {
       public string FirstName
       {
          get;
          set;
       }
             public string LastName
       {
          get;
          set;
       }
             public string Address
       {
          get;
          set;
       }
             public string Phone
       {
          get;
          set;
       }
    
       public AddressBook(string firstname, string lastname, string address, string phone)
       {
          this.FirstName = firstname;
          this.LastName = lastname;
          this.Address = address;
          this.Phone = phone;
       }
    }
    
  2. MainPage() コンストラクターで、source という名前の List<T> を作成する次のコードを追加してから、アドレス帳にエントリをいくつか追加します。

    
    List<AddressBook> source = new List<AddressBook>();
    source.Add(new AddressBook ("Joe", "Smith", "US", "48579347594"));
    source.Add(new AddressBook("Jim", "Johnson", "UK", "3423423423"));
    source.Add(new AddressBook("Mary", "Robert", "India", "9384394793"));
    source.Add(new AddressBook("Patricia", "James", "France", "9384394793"));
    source.Add(new AddressBook("Linda", "Williams", "Italy", "9384394793"));
    source.Add(new AddressBook("David", "Jones", "US", "9384394793"));
    source.Add(new AddressBook("Elizabeth", "Martinez", "US", "9384394793"));
    source.Add(new AddressBook("Richard", "Robinson", "Germany", "9384394793"));
    source.Add(new AddressBook("Charles", "Clark", "US", "9384394793"));
    source.Add(new AddressBook("Joseph", "Rodriguez", "France", "9384394793"));
    source.Add(new AddressBook("Susan", "Lewis", "Italy", "9384394793"));
    source.Add(new AddressBook("Thomas", "Lee", "US", "9384394793"));
    source.Add(new AddressBook("Margaret", "Walker", "US", "9384394793"));
    source.Add(new AddressBook("Christopher", "Hall", "UK", "9384394793"));
    source.Add(new AddressBook("Lisa", "Allen", "US", "9384394793"));
    source.Add(new AddressBook("Daniel", "Young", "US", "9384394793"));
    source.Add(new AddressBook("Paul", "Hernandez", "US", "9384394793"));
    source.Add(new AddressBook("Karen", "King", "US", "9384394793"));
    source.Add(new AddressBook("Ruth", "Wright", "US", "9384394793"));
    source.Add(new AddressBook("Steven", "Lopez", "US", "9384394793"));
    source.Add(new AddressBook("Edward", "Hill", "US", "9384394793"));
    source.Add(new AddressBook("Sharon", "Scott", "US", "9384394793"));
    source.Add(new AddressBook("Brian", "Green", "US", "9384394793"));
    source.Add(new AddressBook("Michelle", "Ramos", "US", "9384394793"));
    source.Add(new AddressBook("Ronald", "Mason", "India", "9384394793"));
    source.Add(new AddressBook("Laura", "Crawford", "US", "9384394793"));
    source.Add(new AddressBook("Anthony", "Burns", "US", "9384394793"));
    source.Add(new AddressBook("Sarah", "Gordon", "India", "9384394793"));
    source.Add(new AddressBook("Kevin", "Hunter", "US", "9384394793"));
    source.Add(new AddressBook("Kimberly", "Tucker", "US", "9384394793"));
    source.Add(new AddressBook("Jason", "Dixon", "US", "9384394793"));
    source.Add(new AddressBook("Deborah", "Mills", "US", "9384394793"));
    source.Add(new AddressBook("Matthew", "Warren", "US", "9384394793"));
    source.Add(new AddressBook("Jessica", "Nichols", "US", "9384394793"));
    source.Add(new AddressBook("Gary", "Knight", "US", "9384394793"));
    source.Add(new AddressBook("Shirley", "Ferguson", "US", "9384394793"));
    

データの単純なリストをキーに基づいてグループ化されたリストの一覧に変換するには

  1. MainPage() コンストラクターで、アドレス帳エントリがグループ化された DataSource という名前のリストを作成する次のコードを追加します。DataSource 内のエントリは、姓の最初の文字に基づいてグループ化されます。

    
    List<AlphaKeyGroup<AddressBook>> DataSource = AlphaKeyGroup<AddressBook>.CreateGroups(source, 
                    System.Threading.Thread.CurrentThread.CurrentUICulture,
                    (AddressBook s) => { return s.LastName; }, true);
    

    このコードでは、CreateGroups() メソッドを使用して source 内のエントリをグループ化します。CreateGroup()では、source 内のエントリを電話の UI カルチャのアルファベットと比較し、姓の最初の文字に基づいてエントリを並べ替えます。

  2. グループ化されたリストを LongListSelector コントロールのソースにバインドします。

    AddrBook.ItemsSource = DataSource;
    

このセクションでは、ItemTemplate プロパティと GroupHeaderTemplate プロパティを使用して、グループ化されたデータを LongListSelector コントロールに表示します。また、JumpListStyle プロパティを使用して、ユーザーがグループ ヘッダーを押したときに表示されるジャンプ リストのスタイルを定義します。

グループ化されたデータを表示するには

  1. MainPage.xaml で、IsGroupingEnabledHideEmptyGroupsItemTemplate、および GroupHeaderTemplate プロパティを次のコードで示すように LongListSelector 要素に追加します。

    <phone:LongListSelector
      x:Name="AddrBook"
      JumpListStyle="{StaticResource AddrBookJumpListStyle}"
      Background="Transparent"
      GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
      ItemTemplate="{StaticResource AddrBookItemTemplate}"
      LayoutMode="List"
      IsGroupingEnabled="true"
      HideEmptyGroups ="true"/>
    

    このコードでは、LayoutModeList に設定します。これは、アドレス帳エントリをリスト形式でレイアウトすることを意味します。表示される項目をグループ化するために、IsGroupingEnabledtrue に設定します。また、グループに 1 つも項目がない場合はそのグループを表示しないように、HideEmptyGroupstrue に設定します。GroupHeaderTemplate はグループ ヘッダーの外観を定義する DataTemplate クラスにバインドされ、ItemTemplate はアドレス帳の各項目の外観を定義する DataTemplate にバインドされます。

  2. <phone:PhoneApplicationPage> 要素で、アドレス帳の項目に対して DataTemplate を定義する次のコードを追加します。

    この新しい <phone:PhoneApplicationPage.Resources> セクションを、LayoutRoot という名前の Grid の上に配置して、ここで定義したリソースがページ上の UI 要素で使用できるようにします。

    
    <phone:PhoneApplicationPage.Resources>
       <DataTemplate x:Key="AddrBookItemTemplate">
          <StackPanel VerticalAlignment="Top">
             <TextBlock FontWeight="Bold"  Text="{Binding FirstName}" />
             <TextBlock Text="{Binding LastName}" />
             <TextBlock Text="{Binding Address}" />
             <TextBlock Text="{Binding Phone}" />
          </StackPanel>
       </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
    
  3. <phone:PhoneApplicationPage.Resources> 要素で、グループ ヘッダーに対して DataTemplate を定義する次のコードを追加します。この例では、グループ ヘッダーは姓の最初の文字になります。

    
    <DataTemplate x:Key="AddrBookGroupHeaderTemplate">
       <Border Background="Transparent" Padding="5">
          <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62" 
             Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
             <TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" 
                FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
          </Border>
        </Border>
    </DataTemplate>
    

ジャンプ リストを表示するには

  • <phone:PhoneApplicationPage.Resources> 要素で、ジャンプ リストのスタイルを定義する次のコードを追加します。

    
    <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
    <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
    <Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
       <Setter Property="GridCellSize"  Value="113,113"/>
       <Setter Property="LayoutMode" Value="Grid" />
       <Setter Property="ItemTemplate">
          <Setter.Value>
             <DataTemplate>
                <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
                   <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
                   Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
                </Border>
             </DataTemplate>
           </Setter.Value>
        </Setter>
    </Style>
    

    次の図は、このトピックで作成される LongListSelector コントロールを示しています。

    LongListSelector

表示:
© 2015 Microsoft