■ TokenizingTextBox 클래스의 TextChanged/TokenItemAdding/ItemClick 이벤트를 처리하는 방법을 보여준다.
※ 이 예제 코드에서 사용된 TokenizingTextBox 클래스는 CommunityToolkit.WinUI.Controls.TokenizingTextBox 누겟(버전 : 8.0.240109)을 참조한다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.
▶ SampleItem.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 |
using Microsoft.UI.Xaml.Controls; namespace TestProject; /// <summary> /// 샘플 항목 /// </summary> public class SampleItem { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 아이콘 - Icon /// <summary> /// 아이콘 /// </summary> public Symbol Icon { get; set; } #endregion #region 텍스트 - Text /// <summary> /// 텍스트 /// </summary> public string Text { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 문자열 구하기 - ToString() /// <summary> /// 문자열 구하기 /// </summary> /// <returns></returns> public override string ToString() { return Text!; } #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 |
<?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:ctw="using:CommunityToolkit.WinUI" xmlns:ctwc="using:CommunityToolkit.WinUI.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <StackPanel Margin="50" Orientation="Vertical" Spacing="10"> <ctwc:TokenizingTextBox x:Name="tokenizingTextBox" HorizontalAlignment="Left" MaxWidth="500" MaximumTokens="5" PlaceholderText="Add actions" QueryIcon="{ctw:FontIconSource Glyph=, FontSize=12}" SuggestedItemsSource="{x:Bind SuggestedSampleItemList, Mode=OneWay}" TextMemberPath="Text" TokenDelimiter="," ItemsSource="{x:Bind SampleItemCollection, Mode=TwoWay}"> <ctwc:TokenizingTextBox.Header> <TextBlock> <Run Text="작업을 " /> <Run FontWeight="SemiBold" Text="{Binding MaximumTokens, ElementName=tokenizingTextBox, Mode=OneWay}" /> <Run Text="건까지 입력하거나 선택할 수 있습니다." /> </TextBlock> </ctwc:TokenizingTextBox.Header> <ctwc:TokenizingTextBox.SuggestedItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Viewbox Width="16"> <SymbolIcon Symbol="{Binding Icon}" /> </Viewbox> <TextBlock Padding="10 0 0 0" Text="{Binding Text}" /> </StackPanel> </DataTemplate> </ctwc:TokenizingTextBox.SuggestedItemTemplate> <ctwc:TokenizingTextBox.TokenItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Viewbox Width="16"> <SymbolIcon Symbol="{Binding Icon}" /> </Viewbox> <TextBlock Padding="10 0 0 0" Text="{Binding Text}" /> </StackPanel> </DataTemplate> </ctwc:TokenizingTextBox.TokenItemTemplate> </ctwc:TokenizingTextBox> <TextBlock Margin="0 25 0 0" FontWeight="SemiBold" Text="편집 텍스트 : " /> <TextBlock Name="currentEditTextBlock" /> <TextBlock Margin="0 25 0 0" FontWeight="SemiBold" Text="선택 토큰 텍스트 : " /> <TextBlock Name="selectedTokenTextBlock" /> <TextBlock Margin="0 25 0 0" FontWeight="SemiBold" Text="항목 소스 : " /> <ItemsControl ItemsSource="{x:Bind SampleItemCollection, Mode=OneWay}" /> <TextBlock Margin="0 25 0 0" FontWeight="SemiBold" Text="클릭 항목 : " /> <TextBlock Name="clickedItemTextBlock" /> </StackPanel> </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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using CommunityToolkit.WinUI.Controls; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 추천 샘플 항목 리스트 /// </summary> public readonly List<SampleItem> SuggestedSampleItemList = new List<SampleItem>() { new SampleItem() { Text = "Account" , Icon = Symbol.Account }, new SampleItem() { Text = "Add friend" , Icon = Symbol.AddFriend }, new SampleItem() { Text = "Attach" , Icon = Symbol.Attach }, new SampleItem() { Text = "Attach camera", Icon = Symbol.AttachCamera }, new SampleItem() { Text = "Audio" , Icon = Symbol.Audio }, new SampleItem() { Text = "Block contact", Icon = Symbol.BlockContact }, new SampleItem() { Text = "Calculator" , Icon = Symbol.Calculator }, new SampleItem() { Text = "Calendar" , Icon = Symbol.Calendar }, new SampleItem() { Text = "Camera" , Icon = Symbol.Camera }, new SampleItem() { Text = "Contact" , Icon = Symbol.Contact }, new SampleItem() { Text = "Favorite" , Icon = Symbol.Favorite }, new SampleItem() { Text = "Link" , Icon = Symbol.Link }, new SampleItem() { Text = "Mail" , Icon = Symbol.Mail }, new SampleItem() { Text = "Map" , Icon = Symbol.Map }, new SampleItem() { Text = "Phone" , Icon = Symbol.Phone }, new SampleItem() { Text = "Pin" , Icon = Symbol.Pin }, new SampleItem() { Text = "Rotate" , Icon = Symbol.Rotate }, new SampleItem() { Text = "Rotate camera", Icon = Symbol.RotateCamera }, new SampleItem() { Text = "Send" , Icon = Symbol.Send }, new SampleItem() { Text = "Tags" , Icon = Symbol.Tag }, new SampleItem() { Text = "UnFavorite" , Icon = Symbol.UnFavorite }, new SampleItem() { Text = "UnPin" , Icon = Symbol.UnPin }, new SampleItem() { Text = "Zoom" , Icon = Symbol.Zoom }, new SampleItem() { Text = "ZoomIn" , Icon = Symbol.ZoomIn }, new SampleItem() { Text = "ZoomOut" , Icon = Symbol.ZoomOut } }; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 샘플 항목 컬렉션 - SampleItemCollection /// <summary> /// 샘플 항목 컬렉션 /// </summary> public ObservableCollection<SampleItem> SampleItemCollection { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.tokenizingTextBox.Loaded += tokenizingTextBox_Loaded; this.tokenizingTextBox.TextChanged += tokenizingTextBox_TextChanged; this.tokenizingTextBox.TokenItemAdding += tokenizingTextBox_TokenItemAdding; this.tokenizingTextBox.ItemClick += tokenizingTextBox_ItemClick; SampleItemCollection = new() { SuggestedSampleItemList[0], SuggestedSampleItemList[1] }; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 토크나이저 텍스트 박스 로드시 처리하기 - tokenizingTextBox_Loaded(sender, e) /// <summary> /// 토크나이저 텍스트 박스 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tokenizingTextBox_Loaded(object sender, RoutedEventArgs e) { SetSelectedTokenTextBlockData(); } #endregion #region 토크나이저 텍스트 박스 텍스트 변경시 처리하기 - tokenizingTextBox_TextChanged(sender, e) /// <summary> /// 토크나이저 텍스트 박스 텍스트 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tokenizingTextBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs e) { this.currentEditTextBlock.Text = this.tokenizingTextBox.Text; SetSelectedTokenTextBlockData(); } #endregion #region 토크나이저 텍스트 박스 토큰 항목 추가중 처리하기 - tokenizingTextBox_TokenItemAdding(sender, e) /// <summary> /// 토크나이저 텍스트 박스 토큰 항목 추가중 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tokenizingTextBox_TokenItemAdding(object sender, TokenItemAddingEventArgs e) { e.Item = this.SuggestedSampleItemList.FirstOrDefault((item) => item.Text!.Contains(e.TokenText, StringComparison.CurrentCultureIgnoreCase)); if(e.Item == null) { e.Item = new SampleItem() { Text = e.TokenText, Icon = Symbol.OutlineStar }; } } #endregion #region 토크나이저 텍스트 박스 항목 클릭시 처리하기 - tokenizingTextBox_ItemClick(sender, e) /// <summary> /// 토크나이저 텍스트 박스 항목 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tokenizingTextBox_ItemClick(object sender, ItemClickEventArgs e) { if(e.ClickedItem is SampleItem clickedItem) { this.clickedItemTextBlock.Text = clickedItem.Text!; } } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 선택 토큰 텍스트 블럭 데이터 설정하기 - SetSelectedTokenTextBlockData() /// <summary> /// 선택 토큰 텍스트 블럭 데이터 설정하기 /// </summary> private void SetSelectedTokenTextBlockData() { this.selectedTokenTextBlock.Text = this.tokenizingTextBox.SelectedTokenText; } #endregion } |
