■ ListView 엘리먼트에서 그룹 헤더를 사용하는 방법을 보여준다.
▶ GroupInfoList.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
using System.Collections.Generic; namespace TestProject { /// <summary> /// 그룹 정보 리스트 /// </summary> public class GroupInfoList : List<object> { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 키 - Key /// <summary> /// 키 /// </summary> public object Key { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - GroupInfoList(itemEnumerable) /// <summary> /// 생성자 /// </summary> /// <param name="itemEnumerable">항목 열거 가능형</param> public GroupInfoList(IEnumerable<object> itemEnumerable) : base(itemEnumerable) { } #endregion } } |
▶ Contact.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using System.Threading.Tasks; using Windows.Storage; namespace TestProject { /// <summary> /// 연락 /// </summary> public class Contact { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 이름 - FirstName /// <summary> /// 이름 /// </summary> public string FirstName { get; private set; } #endregion #region 성 - LastName /// <summary> /// 성 /// </summary> public string LastName { get; private set; } #endregion #region 회사 - Company /// <summary> /// 회사 /// </summary> public string Company { get; private set; } #endregion #region 성명 - Name /// <summary> /// 성명 /// </summary> public string Name => FirstName + " " + LastName; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - Contact(firstName, lastName, company) /// <summary> /// 생성자 /// </summary> /// <param name="firstName">이름</param> /// <param name="lastName">성</param> /// <param name="company">회사</param> public Contact(string firstName, string lastName, string company) { FirstName = firstName; LastName = lastName; Company = company; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 컬렉션 구하기 (비동기) - GetCollectionAsync() /// <summary> /// 컬렉션 구하기 (비동기) /// </summary> /// <returns>컬렉션</returns> public static async Task<ObservableCollection<Contact>> GetCollectionAsync() { StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///DATA/Contacts.txt")); IList<string> lineList = await FileIO.ReadLinesAsync(storageFile); ObservableCollection<Contact> collection = new ObservableCollection<Contact>(); for(int i = 0; i < lineList.Count; i += 3) { collection.Add(new Contact(lineList[i], lineList[i + 1], lineList[i + 2])); } return collection; } #endregion #region 그룹 컬렉션 구하기 (비동기) - GetGroupCollectionAsync() /// <summary> /// 그룹 컬렉션 구하기 (비동기) /// </summary> /// <returns>그룹 컬렉션</returns> public static async Task<ObservableCollection<GroupInfoList>> GetGroupCollectionAsync() { IEnumerable<GroupInfoList> query = from item in await GetCollectionAsync() group item by item.LastName.Substring(0, 1).ToUpper() into itemGroup orderby itemGroup.Key select new GroupInfoList(itemGroup) { Key = itemGroup.Key }; return new ObservableCollection<GroupInfoList>(query); } #endregion #region 문자열 구하기 - ToString() /// <summary> /// 문자열 구하기 /// </summary> /// <returns>문자열</returns> public override string ToString() { return Name; } #endregion } } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestProject" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <Style x:Key="BaseTextBlockStyleKey" TargetType="TextBlock"> <Setter Property="LineStackingStrategy" Value="MaxHeight" /> <Setter Property="TextLineBounds" Value="Full" /> <Setter Property="TextTrimming" Value="None" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="FontFamily" Value="XamlAutoFontFamily" /> <Setter Property="FontWeight" Value="SemiBold" /> <Setter Property="FontSize" Value="14" /> </Style> <Style x:Key="TitleTextBlockStyleKey" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyleKey}"> <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" /> <Setter Property="FontSize" Value="24" /> <Setter Property="FontWeight" Value="SemiLight" /> </Style> <DataTemplate x:Key="ListViewDataTemplateKey" x:DataType="local:Contact"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Ellipse Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Width ="32" Height="32" Fill="{ThemeResource SystemControlBackgroundBaseMediumBrush}" /> <TextBlock Grid.Row="0" Grid.Column="1" Style="{ThemeResource BaseTextBlockStyleKey}" Margin="10 5 0 0" x:Phase="1" Text="{x:Bind Name}" /> <TextBlock Grid.Row="1" Grid.Column="1" Style="{ThemeResource BaseTextBlockStyleKey}" Margin="10 0 0 5" x:Phase="2" Text="{x:Bind Company}" /> </Grid> </DataTemplate> <CollectionViewSource x:Name="collectionViewSource" IsSourceGrouped="True" /> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ListView x:Name="GroupedListViewCtrl" Grid.Column="0" ItemTemplate="{StaticResource ListViewDataTemplateKey}" Width="400" Height="400" BorderThickness="1" BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" ShowsScrollingPlaceholders="True" SelectionMode="Single" ItemsSource="{x:Bind collectionViewSource.View, Mode=OneWay}"> <ListView.ItemsPanel> <ItemsPanelTemplate> <ItemsStackPanel AreStickyGroupHeadersEnabled="False" Loaded="itemsStackPanel_loaded" /> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.GroupStyle> <GroupStyle > <GroupStyle.HeaderTemplate> <DataTemplate x:DataType="local:GroupInfoList"> <Border AutomationProperties.Name="{x:Bind Key}"> <TextBlock Style="{ThemeResource TitleTextBlockStyleKey}" Text="{x:Bind Key}" /> </Border> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListView.GroupStyle> </ListView> <ToggleSwitch Name="toggleSwitch" Grid.Column="2" Width="100" Header="스티커 헤더" OnContent="활성" OffContent="비활성" IsOn="False" Toggled="toggleSwitch_Toggled" /> </Grid> </Grid> </Page> |
▶ MainPage.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Navigation; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 항목 스택 패널 /// </summary> private ItemsStackPanel itemsStackPanel; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "ListView 엘리먼트 : 그룹 헤더 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 탐색되는 경우 처리하기 - OnNavigatedTo(e) /// <summary> /// 탐색되는 경우 처리하기 /// </summary> /// <param name="e">이벤트 인자</param> protected override async void OnNavigatedTo(NavigationEventArgs e) { this.collectionViewSource.Source = await Contact.GetGroupCollectionAsync(); } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Private #region 항목 스택 패널 로드시 처리하기 - itemsStackPanel_loaded(sender, e) /// <summary> /// 항목 스택 패널 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void itemsStackPanel_loaded(object sender, RoutedEventArgs e) { this.itemsStackPanel = sender as ItemsStackPanel; } #endregion #region 토글 스위치 토글시 처리하기 - toggleSwitch_Toggled(sender, e) /// <summary> /// 토글 스위치 토글시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void toggleSwitch_Toggled(object sender, RoutedEventArgs e) { if(this.toggleSwitch != null) { if(this.toggleSwitch.IsOn == true) { this.itemsStackPanel.AreStickyGroupHeadersEnabled = true; } else { this.itemsStackPanel.AreStickyGroupHeadersEnabled = false; } } } #endregion } } |
