■ TreeView 엘리먼트의 ItemTemplateSelector 속성을 사용하는 방법을 보여준다.
▶ 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 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 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
using System.Collections.ObjectModel; using System.ComponentModel; namespace TestProject { /// <summary> /// 탐색기 항목 /// </summary> public class ExplorerItem : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Enumeration ////////////////////////////////////////////////////////////////////////////////////////// Public #region 탐색기 항목 타입 - ExplorerItemType /// <summary> /// 탐색기 항목 타입 /// </summary> public enum ExplorerItemType { Folder, File }; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 자식 컬렉션 /// </summary> private ObservableCollection<ExplorerItem> children; /// <summary> /// 확장 여부 /// </summary> private bool isExpanded; /// <summary> /// 선택 여부 /// </summary> private bool isSelected; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get; set; } #endregion #region 타입 - Type /// <summary> /// 타입 /// </summary> public ExplorerItemType Type { get; set; } #endregion #region 자식 컬렉션 - Children /// <summary> /// 자식 컬렉션 /// </summary> public ObservableCollection<ExplorerItem> Children { get { if(this.children == null) { this.children = new ObservableCollection<ExplorerItem>(); } return this.children; } set { this.children = value; } } #endregion #region 확장 여부 - IsExpanded /// <summary> /// 확장 여부 /// </summary> public bool IsExpanded { get { return this.isExpanded; } set { if(this.isExpanded != value) { this.isExpanded = value; FirePropertyChangedEvent("IsExpanded"); } } } #endregion #region 선택 여부 - IsSelected /// <summary> /// 선택 여부 /// </summary> public bool IsSelected { get { return this.isSelected; } set { if(this.isSelected != value) { this.isSelected = value; FirePropertyChangedEvent("IsSelected"); } } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> private void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } } |
▶ ExplorerItemDataTemplateSelector.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 |
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace TestProject { /// <summary> /// 탐색기 항목 데이터 템플리트 셀렉터 /// </summary> public class ExplorerItemDataTemplateSelector : DataTemplateSelector { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 폴더 템플리트 - FolderTemplate /// <summary> /// 폴더 템플리트 /// </summary> public DataTemplate FolderTemplate { get; set; } #endregion #region 파일 템플리트 - FileTemplate /// <summary> /// 파일 템플리트 /// </summary> public DataTemplate FileTemplate { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 템플리트 선택하기 (코어) - SelectTemplateCore(item) /// <summary> /// 템플리트 선택하기 (코어) /// </summary> /// <param name="item">항목</param> /// <returns>데이터 템플리트</returns> protected override DataTemplate SelectTemplateCore(object item) { ExplorerItem explorerItem = item as ExplorerItem; return explorerItem.Type == ExplorerItem.ExplorerItemType.Folder ? FolderTemplate : FileTemplate; } #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 |
<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:local="using:TestProject" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <DataTemplate x:Key="FolderDataTemplateKey" x:DataType="local:ExplorerItem"> <muxc:TreeViewItem AutomationProperties.Name="{x:Bind Name}" IsExpanded="True" ItemsSource="{x:Bind Children}"> <StackPanel Orientation="Horizontal"> <Image Width="20" Source="/IMAGE/folder.png" /> <TextBlock Margin="0 0 10 0" /> <TextBlock Text="{x:Bind Name}" /> </StackPanel> </muxc:TreeViewItem> </DataTemplate> <DataTemplate x:Key="FileDataTemplateKey" x:DataType="local:ExplorerItem"> <muxc:TreeViewItem AutomationProperties.Name="{x:Bind Name}"> <StackPanel Orientation="Horizontal"> <Image Width="20" Source="/IMAGE/file.png" /> <TextBlock Margin="0 0 10 0" /> <TextBlock Text="{x:Bind Name}" /> </StackPanel> </muxc:TreeViewItem> </DataTemplate> <local:ExplorerItemDataTemplateSelector x:Key="ExplorerItemDataTemplateSelectorKey" FolderTemplate="{StaticResource FolderDataTemplateKey}" FileTemplate="{StaticResource FileDataTemplateKey}" /> </Page.Resources> <Grid> <Border HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="1" BorderBrush="{ThemeResource TextControlBorderBrush}"> <muxc:TreeView x:Name="treeView" Width="400" Height="400" ItemTemplateSelector="{StaticResource ExplorerItemDataTemplateSelectorKey}" ItemsSource="{x:Bind explorerItemCollection}" /> </Border> </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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
using System.Collections.ObjectModel; using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 탐색기 항목 컬렉션 /// </summary> private ObservableCollection<ExplorerItem> explorerItemCollection; #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 = "TreeView 엘리먼트 : ItemTemplateSelector 속성 사용하기"; #endregion this.explorerItemCollection = GetExplorerItemCollection(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 탐색기 항목 컬렉션 구하기 - GetExplorerItemCollection() /// <summary> /// 탐색기 항목 컬렉션 구하기 /// </summary> /// <returns>탐색기 항목 컬렉션</returns> private ObservableCollection<ExplorerItem> GetExplorerItemCollection() { ObservableCollection<ExplorerItem> collection = new ObservableCollection<ExplorerItem>(); ExplorerItem item1 = new ExplorerItem() { Name = "Work Documents", Type = ExplorerItem.ExplorerItemType.Folder, Children = { new ExplorerItem() { Name = "Functional Specifications", Type = ExplorerItem.ExplorerItemType.Folder, Children = { new ExplorerItem() { Name = "TreeView spec", Type = ExplorerItem.ExplorerItemType.File } } }, new ExplorerItem() { Name = "Feature Schedule", Type = ExplorerItem.ExplorerItemType.File }, new ExplorerItem() { Name = "Overall Project Plan", Type = ExplorerItem.ExplorerItemType.File }, new ExplorerItem() { Name = "Feature Resources Allocation", Type = ExplorerItem.ExplorerItemType.File } } }; ExplorerItem item2 = new ExplorerItem() { Name = "Personal Folder", Type = ExplorerItem.ExplorerItemType.Folder, Children = { new ExplorerItem() { Name = "Home Remodel Folder", Type = ExplorerItem.ExplorerItemType.Folder, Children = { new ExplorerItem() { Name = "Contractor Contact Info", Type = ExplorerItem.ExplorerItemType.File }, new ExplorerItem() { Name = "Paint Color Scheme", Type = ExplorerItem.ExplorerItemType.File }, new ExplorerItem() { Name = "Flooring Woodgrain type", Type = ExplorerItem.ExplorerItemType.File }, new ExplorerItem() { Name = "Kitchen Cabinet Style", Type = ExplorerItem.ExplorerItemType.File } } } } }; collection.Add(item1); collection.Add(item2); return collection; } #endregion } } |
