■ ItemsRepeater 엘리먼트의 ItemTemplate 속성에서 DateTemplate 객체 내에 ItemsRepeater 객체를 사용해 그룹화된 항목을 표시하는 방법을 보여준다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.
▶ Item.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
namespace TestProject; /// <summary> /// 항목 /// </summary> public class Item { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 항목명 - Name /// <summary> /// 항목명 /// </summary> public string Name { get; set; } #endregion } |
▶ Group.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 |
using System.Collections.Generic; namespace TestProject; /// <summary> /// 그룹 /// </summary> public class Group { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 그룹명 - Name /// <summary> /// 그룹명 /// </summary> public string Name { get; set; } #endregion #region 항목 리스트 - ItemList /// <summary> /// 항목 리스트 /// </summary> public List<Item> ItemList { get; set; } #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 |
<?xml version="1.0" encoding="utf-8"?> <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"> <Border HorizontalAlignment="Center" VerticalAlignment="Center" Width="250" Height="250" BorderThickness="1" BorderBrush="DarkGray" Padding="10"> <ItemsRepeater Name="itemsRepeater"> <ItemsRepeater.ItemTemplate> <DataTemplate x:DataType="local:Group"> <StackPanel Margin="0 0 0 20"> <TextBlock Text="{x:Bind Name}" FontWeight="Bold" FontSize="18" Margin="0 0 0 10"/> <ItemsRepeater ItemsSource="{x:Bind ItemList}"> <ItemsRepeater.ItemTemplate> <DataTemplate x:DataType="local:Item"> <TextBlock Text="{x:Bind Name}" Margin="20 0,0 5" /> </DataTemplate> </ItemsRepeater.ItemTemplate> </ItemsRepeater> </StackPanel> </DataTemplate> </ItemsRepeater.ItemTemplate> </ItemsRepeater> </Border> </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 |
using System.Collections.Generic; using Microsoft.UI.Xaml.Controls; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); List<Group> groupList = new List<Group> { new Group { Name = "과일", ItemList = new List<Item> { new Item { Name = "사과" }, new Item { Name = "바나나" }, new Item { Name = "오렌지" } } }, new Group { Name = "야채", ItemList = new List<Item> { new Item { Name = "당근" }, new Item { Name = "브로콜리" }, new Item { Name = "토마토" } } } }; this.itemsRepeater.ItemsSource = groupList; } #endregion } |
