■ StickyHeaderBehavior 엘리먼트를 사용해 HeaderedTreeView 엘리먼트에서 헤더를 고정하는 방법을 보여준다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.
▶ ExplorerItem.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 |
using System.Collections.ObjectModel; namespace TestProject; /// <summary> /// 탐색기 항목 /// </summary> public class ExplorerItem { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 탐색기 항목 컬렉션 /// </summary> private ObservableCollection<ExplorerItem> explorerItemCollection; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get; set; } #endregion #region 자식 탐색기 항목 컬렉션 - ChildExplorerItemCollection /// <summary> /// 자식 탐색기 항목 컬렉션 /// </summary> public ObservableCollection<ExplorerItem> ChildExplorerItemCollection { get { if(this.explorerItemCollection == null) { this.explorerItemCollection = new ObservableCollection<ExplorerItem>(); } return this.explorerItemCollection; } set { this.explorerItemCollection = value; } } #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 |
<?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:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:mxi="using:Microsoft.Xaml.Interactivity" xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors" xmlns:ctwc="using:CommunityToolkit.WinUI.Controls" xmlns:local="using:TestProject" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Border HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="300" BorderThickness="1" BorderBrush="Black" CornerRadius="5"> <ctwc:HeaderedTreeView ItemsSource="{x:Bind ExplorerItemCollection, Mode=OneWay}"> <ctwc:HeaderedTreeView.Header> <Grid MinHeight="50" Background="{ThemeResource AccentFillColorDefaultBrush}"> <mxi:Interaction.Behaviors> <ctwb:StickyHeaderBehavior /> </mxi:Interaction.Behaviors> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}" Text="Header" /> </Grid> </ctwc:HeaderedTreeView.Header> <ctwc:HeaderedTreeView.ItemTemplate> <DataTemplate x:DataType="local:ExplorerItem"> <muxc:TreeViewItem Content="{x:Bind Name}" IsExpanded="True" ItemsSource="{x:Bind ChildExplorerItemCollection}" /> </DataTemplate> </ctwc:HeaderedTreeView.ItemTemplate> </ctwc:HeaderedTreeView> </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 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.Collections.ObjectModel; using Microsoft.UI.Xaml.Controls; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 탐색기 항목 컬렉션 - ExplorerItemCollection /// <summary> /// 탐색기 항목 컬렉션 /// </summary> public ObservableCollection<ExplorerItem> ExplorerItemCollection { get; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); ExplorerItemCollection = GetExplorerItemCollection(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 탐색기 항목 컬렉션 구하기 - GetExplorerItemCollection() /// <summary> /// 탐색기 항목 컬렉션 구하기 /// </summary> /// <returns>탐색기 항목 컬렉션</returns> private ObservableCollection<ExplorerItem> GetExplorerItemCollection() { ObservableCollection<ExplorerItem> collection = new ObservableCollection<ExplorerItem>(); ExplorerItem explorerItem1 = new ExplorerItem() { Name = "Work Documents", ChildExplorerItemCollection = { new ExplorerItem() { Name = "Functional Specifications", ChildExplorerItemCollection = { new ExplorerItem() { Name = "TreeView spec" } } }, new ExplorerItem() { Name = "Feature Schedule" }, new ExplorerItem() { Name = "Overall Project Plan" }, new ExplorerItem() { Name = "Feature Resources Allocation" } } }; ExplorerItem explorerItem2 = new ExplorerItem() { Name = "Personal Folder", ChildExplorerItemCollection = { new ExplorerItem() { Name = "Home Remodel Folder", ChildExplorerItemCollection = { new ExplorerItem() { Name = "Contractor Contact Info" }, new ExplorerItem() { Name = "Paint Color Scheme" }, new ExplorerItem() { Name = "Flooring Woodgrain type" }, new ExplorerItem() { Name = "Kitchen Cabinet Style" } } } } }; collection.Add(explorerItem1); collection.Add(explorerItem2); for(int i = 0; i < 40; i++) { collection.Add(new() { Name = $"Folder {i + 1}" }); } return collection; } #endregion } |