내보내기(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 을 대상으로 하는 LLSSample이라는 새 Windows Phone 앱 프로젝트를 만듭니다.

  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인 다음 클래스를 추가합니다. 이 클래스는 주소록 항목을 나타냅니다.

    
    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() 생성자에서 다음 코드를 추가하여 이름이 sourceList<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;
    

이 섹션에서 ItemTemplateGroupHeaderTemplate 속성은 LongListSelector 컨트롤에 그룹화된 데이터를 표시하는 데 사용되며, JumpListStyle 속성은 사용자가 그룹 머리글을 누를 때 표시되는 점프 목록 스타일을 정의하는 데 사용됩니다.

그룹화된 데이터를 표시하려면

  1. MainPage.xaml에서 다음 코드에 표시된 대로 IsGroupingEnabled, HideEmptyGroups, ItemTemplateGroupHeaderTemplate 속성을 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 로 설정되어 있으며, 그룹에 항목이 없는 경우 그룹이 표시되지 않도록 HideEmptyGroupstrue로 설정되어 있습니다. GroupHeaderTemplateDataTemplate 클래스에 바인딩되어 있으며, 이 클래스는 그룹 머리글의 모양을 정의합니다. ItemTemplateDataTemplate에 바인딩되어 있으며, 이 클래스는 각 주소록 항목의 모양을 정의합니다.

  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