■ ItemsRepeater 엘리먼트의 ItemTemplate 속성에서 DateTemplate 객체 내에 ItemsRepeater 객체를 사용해 그룹화된 항목을 표시하는 방법을 보여준다.
▶ Category.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 |
using System.Collections.ObjectModel; namespace TestProject { /// <summary> /// 카테고리 /// </summary> public class Category { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 카테고리명 - CategoryName /// <summary> /// 카테고리명 /// </summary> public string CategoryName { get; set; } #endregion #region 카테고리 항목 컬렉션 - CategoryItemCollection /// <summary> /// 카테고리 항목 컬렉션 /// </summary> public ObservableCollection<string> CategoryItemCollection { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - Category(categoryName, categoryItemCollection) /// <summary> /// 생성자 /// </summary> /// <param name="categoryName">카테고리명</param> /// <param name="categoryItemCollection">카테고리 항목 컬렉션</param> public Category(string categoryName, ObservableCollection<string> categoryItemCollection) { CategoryName = categoryName; CategoryItemCollection = categoryItemCollection; } #endregion } } |
▶ MainWindow.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 |
<?xml version="1.0" encoding="utf-8"?> <Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestProject" Title="TestProject"> <Grid Margin="10"> <Grid.Resources> <DataTemplate x:Key="StringDataTemplateKey" x:DataType="x:String"> <Grid Margin="10" Background="{ThemeResource SystemControlBackgroundAccentBrush}"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}" TextWrapping="Wrap" Text="{x:Bind}" /> </Grid> </DataTemplate> <DataTemplate x:Key="CategoryDataTemplateKey" x:DataType="local:Category"> <StackPanel> <TextBlock Style="{StaticResource TitleTextBlockStyle}" Padding="10" Text="{x:Bind CategoryName}" /> <ItemsRepeater ItemTemplate="{StaticResource StringDataTemplateKey}" ItemsSource="{x:Bind CategoryItemCollection}"> <ItemsRepeater.Layout> <StackLayout Orientation="Horizontal" /> </ItemsRepeater.Layout> </ItemsRepeater> </StackPanel> </DataTemplate> </Grid.Resources> <ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"> <ItemsRepeater Name="repeater" VerticalAlignment="Top" ItemTemplate ="{StaticResource CategoryDataTemplateKey}"> <ItemsRepeater.Layout> <StackLayout Orientation="Vertical" /> </ItemsRepeater.Layout> </ItemsRepeater> </ScrollViewer> </Grid> </Window> |
▶ MainWindow.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 124 125 126 127 128 |
using System.Collections.Generic; using System.Collections.ObjectModel; using Microsoft.UI.Xaml; namespace TestProject { /// <summary> /// 메인 윈도우 /// </summary> public sealed partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); List<Category> categoryList = new List<Category> { new Category("Fruits" , GetFruitCollection() ), new Category("Vegetables", GetVegetableCollection()), new Category("Grains" , GetGrainCollection() ), new Category("Proteins" , GetProteinCollection() ) }; this.repeater.ItemsSource = categoryList; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 과일 컬렉션 구하기 - GetFruitCollection() /// <summary> /// 과일 컬렉션 구하기 /// </summary> /// <returns>과일 컬렉션</returns> private ObservableCollection<string> GetFruitCollection() { return new ObservableCollection<string> { "Apricots", "Bananas", "Grapes", "Strawberries", "Watermelon", "Plums", "Blueberries" }; } #endregion #region 채소 컬렉션 구하기 - GetVegetableCollection() /// <summary> /// 채소 컬렉션 구하기 /// </summary> /// <returns>채소 컬렉션</returns> private ObservableCollection<string> GetVegetableCollection() { return new ObservableCollection<string> { "Broccoli", "Spinach", "Sweet potato", "Cauliflower", "Onion", "Brussels sprouts", "Carrots" }; } #endregion #region 곡물 컬렉션 구하기 - GetGrainCollection() /// <summary> /// 곡물 컬렉션 구하기 /// </summary> /// <returns>곡물 컬렉션</returns> private ObservableCollection<string> GetGrainCollection() { return new ObservableCollection<string> { "Rice", "Quinoa", "Pasta", "Bread", "Farro", "Oats", "Barley" }; } #endregion #region 단백질 컬렉션 구하기 - GetProteinCollection() /// <summary> /// 단백질 컬렉션 구하기 /// </summary> /// <returns>단백질 컬렉션</returns> private ObservableCollection<string> GetProteinCollection() { return new ObservableCollection<string> { "Steak", "Chicken", "Tofu", "Salmon", "Pork", "Chickpeas", "Eggs" }; } #endregion } } |
