[C#/WINUI2.5] RichTextBlock 엘리먼트 사용하기
■ RichTextBlock 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)
|
1 2 3 4 5 |
<RichTextBlock> <Paragraph>I am a RichTextBlock.</Paragraph> </RichTextBlock> |
[태그:] UWP
[C#/WINUI2.5] RichEditBox 엘리먼트 : 커스텀 에디터 사용하기
■ RichEditBox 엘리먼트에서 커스텀 에디터를 사용하는 방법을 보여준다. ▶ 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 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 |
<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" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <RelativePanel Margin="100" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <RelativePanel.Resources> <ResourceDictionary> <Style TargetType="Button"> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Margin" Value="0 0 10 0" /> <Setter Property="Background" Value="Transparent" /> </Style> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="HighContrast"> <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightColor" /> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary> </RelativePanel.Resources> <Button Name="openFileButton" ToolTipService.ToolTip="파일 열기" Click="openFileButton_Click"> <Button.Content> <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> </Button.Content> </Button> <Button RelativePanel.RightOf="openFileButton" ToolTipService.ToolTip="파일 저장하기" Click="saveFileButton_Click"> <Button.Content> <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> </Button.Content> </Button> <muxc:DropDownButton Name="fontColorButton" RelativePanel.AlignRightWithPanel="True" BorderThickness="0" Background="Transparent" ToolTipService.ToolTip="폰트 색상"> <SymbolIcon Symbol="FontColor" /> <muxc:DropDownButton.Flyout> <Flyout Placement="Bottom"> <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"> <VariableSizedWrapGrid.Resources> <Style TargetType="Rectangle"> <Setter Property="Width" Value="32" /> <Setter Property="Height" Value="32" /> </Style> <Style TargetType="Button"> <Setter Property="Padding" Value="0" /> <Setter Property="MinWidth" Value="0" /> <Setter Property="MinHeight" Value="0" /> <Setter Property="Margin" Value="5" /> </Style> </VariableSizedWrapGrid.Resources> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Red" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Orange" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Yellow" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Green" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Blue" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Indigo" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Violet" /> </Button.Content> </Button> <Button Click="fontColorButton_Click"> <Button.Content> <Rectangle Fill="Gray" /> </Button.Content> </Button> </VariableSizedWrapGrid> </Flyout> </muxc:DropDownButton.Flyout> </muxc:DropDownButton> <Button Name="italicButton" RelativePanel.LeftOf="fontColorButton" Click="italicButton_Click" ToolTipService.ToolTip="Italic"> <Button.Content> <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> </Button.Content> </Button> <Button RelativePanel.LeftOf="italicButton" ToolTipService.ToolTip="Bold" Click="boldButton_Click"> <Button.Content> <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" /> </Button.Content> </Button> <RichEditBox Name="richEditBox" RelativePanel.Below="openFileButton" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" MinWidth="300" Height="300" GotFocus="richEditBox_GotFocus" TextChanged="richEditBox_TextChanged" /> <StackPanel RelativePanel.Below="richEditBox" RelativePanel.AlignLeftWith="richEditBox" Margin="0 10 0 0" Orientation="Horizontal"> <TextBlock VerticalAlignment="Center" Margin="0 0 0 3" Text="검색 문자열 :" /> <TextBox Name="findTextBox" Margin="10 0 0 0" Width="300" PlaceholderText="검색할 텍스트를 입력해 주시기 바립니다." TextChanged="{x:Bind SetHighlight}" GotFocus="{x:Bind SetHighlight}" LostFocus="{x:Bind RemoveHighlight}" /> </StackPanel> </RelativePanel> </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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 |
using System; using System.Collections.Generic; using Windows.Foundation; using Windows.Graphics.Display; using Windows.Storage; using Windows.Storage.Pickers; using Windows.Storage.Provider; using Windows.Storage.Streams; using Windows.UI; using Windows.UI.Popups; using Windows.UI.Text; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Shapes; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 현재 색상 /// </summary> private Color currentColor = Colors.Green; #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 = "RichEditBox 엘리먼트 : 커스텀 에디터 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 파일 열기 버튼 클릭시 처리하기 - openFileButton_Click(sender, e) /// <summary> /// 파일 열기 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private async void openFileButton_Click(object sender, RoutedEventArgs e) { FileOpenPicker fileOpenPicker = new FileOpenPicker { SuggestedStartLocation = PickerLocationId.DocumentsLibrary }; fileOpenPicker.FileTypeFilter.Add(".rtf"); StorageFile storageFile = await fileOpenPicker.PickSingleFileAsync(); if(storageFile != null) { using(IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read)) { this.richEditBox.Document.LoadFromStream(TextSetOptions.FormatRtf, stream); } } } #endregion #region 파일 저장 버튼 클릭시 처리하기 - saveFileButton_Click(sender, e) /// <summary> /// 파일 저장 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private async void saveFileButton_Click(object sender, RoutedEventArgs e) { FileSavePicker fileSavePicker = new FileSavePicker { SuggestedStartLocation = PickerLocationId.DocumentsLibrary }; fileSavePicker.FileTypeChoices.Add("Rich Text", new List<string>() { ".rtf" }); fileSavePicker.SuggestedFileName = "New Document"; StorageFile storageFile = await fileSavePicker.PickSaveFileAsync(); if(storageFile != null) { CachedFileManager.DeferUpdates(storageFile); using(IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.ReadWrite)) { this.richEditBox.Document.SaveToStream(TextGetOptions.FormatRtf, stream); } FileUpdateStatus status = await CachedFileManager.CompleteUpdatesAsync(storageFile); if(status != FileUpdateStatus.Complete) { MessageDialog messageDialog = new MessageDialog($"{storageFile.Name} 파일을 저장할 수 없습니다."); await messageDialog.ShowAsync(); } } } #endregion #region 폰트 색상 버튼 클릭시 처리하기 - fontColorButton_Click(sender, e) /// <summary> /// 폰트 색상 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void fontColorButton_Click(object sender, RoutedEventArgs e) { Button button = sender as Button; Rectangle rectangle = button.Content as Rectangle; Color color = (rectangle.Fill as SolidColorBrush).Color; this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color; fontColorButton.Flyout.Hide(); this.richEditBox.Focus(FocusState.Keyboard); this.currentColor = color; } #endregion #region 이탤릭체 버튼 클릭시 처리하기 - italicButton_Click(sender, e) /// <summary> /// 이탤릭체 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void italicButton_Click(object sender, RoutedEventArgs e) { this.richEditBox.Document.Selection.CharacterFormat.Italic = FormatEffect.Toggle; } #endregion #region 볼드체 버튼 클릭시 처리하기 - boldButton_Click(sender, e) /// <summary> /// 볼드체 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void boldButton_Click(object sender, RoutedEventArgs e) { this.richEditBox.Document.Selection.CharacterFormat.Bold = FormatEffect.Toggle; } #endregion #region 리치 편집 박스 포커스 획득시 처리하기 - richEditBox_GotFocus(sender, e) /// <summary> /// 리치 편집 박스 포커스 획득시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void richEditBox_GotFocus(object sender, RoutedEventArgs e) { this.richEditBox.Document.GetText(TextGetOptions.UseCrlf, out string currentRawText); ITextRange textRange = this.richEditBox.Document.GetRange(0, TextConstants.MaxUnitCount); SolidColorBrush backgroundBrush = App.Current.Resources["TextControlBackgroundFocused"] as SolidColorBrush; if(backgroundBrush != null) { textRange.CharacterFormat.BackgroundColor = backgroundBrush.Color; } } #endregion #region 리치 편집 박스 텍스트 변경시 처리하기 - richEditBox_TextChanged(sender, e) /// <summary> /// 리치 편집 박스 텍스트 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void richEditBox_TextChanged(object sender, RoutedEventArgs e) { if(this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor != this.currentColor) { this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor; } } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 하이라이트 설정하기 - SetHighlight() /// <summary> /// 하이라이트 설정하기 /// </summary> private void SetHighlight() { RemoveHighlight(); Color highlightBackgroundColor = (Color)App.Current.Resources["SystemColorHighlightColor" ]; Color highlightForegroundColor = (Color)App.Current.Resources["SystemColorHighlightTextColor"]; string textToFind = this.findTextBox.Text; if(textToFind != null) { ITextRange textRange = this.richEditBox.Document.GetRange(0, 0); while(textRange.FindText(textToFind, TextConstants.MaxUnitCount, FindOptions.None) > 0) { textRange.CharacterFormat.BackgroundColor = highlightBackgroundColor; textRange.CharacterFormat.ForegroundColor = highlightForegroundColor; } } } #endregion #region 하이라이트 제거하기 - RemoveHighlight() /// <summary> /// 하이라이트 제거하기 /// </summary> private void RemoveHighlight() { ITextRange textRange = this.richEditBox.Document.GetRange(0, TextConstants.MaxUnitCount); SolidColorBrush defaultBackgroundBrush = this.richEditBox.Background as SolidColorBrush; SolidColorBrush defaultForegroundbrush = this.richEditBox.Foreground as SolidColorBrush; textRange.CharacterFormat.BackgroundColor = defaultBackgroundBrush.Color; textRange.CharacterFormat.ForegroundColor = defaultForegroundbrush.Color; } #endregion } } |
TestProject.zip
[C#/WINUI2.5] RichEditBox 엘리먼트 : 컨텍스트 메뉴에 커스텀 명령 추가하기
■ RichEditBox 엘리먼트에서 컨텍스트 메뉴에 커스텀 명령을 추가하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <RichEditBox Name="richEditBox" Width="600" Height="200" Loaded="richEditBox_Loaded" Unloaded="richEditBox_Unloaded" /> </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 |
using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "RichEditBox 엘리먼트 : 컨텍스트 메뉴에서 커스텀 명령 추가하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 플라이아웃 베이스 오픈시 처리하기 - FlyoutBase_Opening(sender, e) /// <summary> /// 플라이아웃 베이스 오픈시 처리하기 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void FlyoutBase_Opening(object sender, object e) { CommandBarFlyout commandBarFlyout = sender as CommandBarFlyout; if(commandBarFlyout.Target == this.richEditBox) { AppBarButton appBarButton = new AppBarButton { Command = new StandardUICommand(StandardUICommandKind.Share) }; commandBarFlyout.PrimaryCommands.Add(appBarButton); } } #endregion #region 리치 편집 박스 로드시 처리하기 - richEditBox_Loaded(sender, e) /// <summary> /// 리치 편집 박스 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void richEditBox_Loaded(object sender, RoutedEventArgs e) { if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { this.richEditBox.ContextFlyout.Opening += FlyoutBase_Opening; this.richEditBox.SelectionFlyout.Opening += FlyoutBase_Opening; } } #endregion #region 리치 편집 박스 언로드시 처리하기 - richEditBox_Unloaded(sender, e) /// <summary> /// 리치 편집 박스 언로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void richEditBox_Unloaded(object sender, RoutedEventArgs e) { if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { this.richEditBox.SelectionFlyout.Opening -= FlyoutBase_Opening; this.richEditBox.ContextFlyout.Opening -= FlyoutBase_Opening; } } #endregion } } |
TestProject.zip
[C#/WINUI2.5] PasswordBox 엘리먼트 : PlaceholderText/PasswordChar 속성 사용하기
■ PasswordBox 엘리먼트의 PlaceholderText/PasswordChar 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <PasswordBox HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Header="패스워드" PlaceholderText="패스워드를 입력해 주시기 바랍니다." PasswordChar="#" /> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "PasswordBox 엘리먼트 : PlaceholderText/PasswordChar 속성 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] PasswordBox 엘리먼트 : PasswordChanged 이벤트 사용하기
■ PasswordBox 엘리먼트의 PasswordChanged 이벤트를 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <PasswordBox Width="300" PasswordChanged="passwordBox_PasswordChanged" /> <TextBlock Name="textBlock" Margin="0 10 0 0" Visibility="Collapsed" /> </StackPanel> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "PasswordBox 엘리먼트 : PasswordChanged 이벤트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 패스워드 박스 패스워드 변경시 처리하기 - passwordBox_PasswordChanged(sender, e) /// <summary> /// 패스워드 박스 패스워드 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e) { if(sender is PasswordBox passwordBox) { if(string.IsNullOrEmpty(passwordBox.Password) || passwordBox.Password.ToLower() == "password") { this.textBlock.Visibility = Visibility.Visible; this.textBlock.Text = "'password'는 허용되지 않습니다."; passwordBox.Password = string.Empty; } else { this.textBlock.Text = string.Empty; this.textBlock.Visibility = Visibility.Collapsed; } } } #endregion } } |
TestProject.zip
[C#/WINUI2.5] NumberBox 엘리먼트 : NumberFormatter 속성 사용하기
■ NumberBox 엘리먼트의 NumberFormatter 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <muxc:NumberBox Name="numberBox" HorizontalAlignment="Center" VerticalAlignment="Center" Header="달러 금액을 입력해 주시기 바랍니다 :" PlaceholderText="0.00" /> </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 |
using Windows.Foundation; using Windows.Globalization.NumberFormatting; 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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "NumberBox 엘리먼트 : NumberFormatter 속성 사용하기"; #endregion IncrementNumberRounder rounder = new IncrementNumberRounder { Increment = 0.25, RoundingAlgorithm = RoundingAlgorithm.RoundHalfUp }; DecimalFormatter formatter = new DecimalFormatter { IntegerDigits = 1, FractionDigits = 2, NumberRounder = rounder }; this.numberBox.NumberFormatter = formatter; } #endregion } } |
TestProject.zip
[C#/WINUI2.5] NumberBox 엘리먼트 : SpinButtonPlacementMode 속성 사용하기
■ NumberBox 엘리먼트의 SpinButtonPlacementMode 속성을 사용하는 방법을 보여준다. ▶ 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 |
<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" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <muxc:NumberBox Name="numberBox" Grid.Column="0" Header="정수를 입력해 주시기 바랍니다 :" SpinButtonPlacementMode="Compact" SmallChange="10" LargeChange="100" Value="10" /> <muxc:RadioButtons Grid.Column="2" Header="SpinButtonPlacementMode"> <RadioButton Tag="Inline" Content="Inline" Checked="radioButton_Checked" /> <RadioButton Tag="Compact" Content="Compact" Checked="radioButton_Checked" IsChecked="True" /> </muxc:RadioButtons> </Grid> </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 |
using Microsoft.UI.Xaml.Controls; 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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "NumberBox 엘리먼트 : SpinButtonPlacementMode 속성 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e) /// <summary> /// 라디오 버튼 체크시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void radioButton_Checked(object sender, RoutedEventArgs e) { if(sender is RadioButton radioButton && this.numberBox != null) { switch(radioButton.Tag.ToString()) { case "Inline" : this.numberBox.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Inline; break; case "Compact" : this.numberBox.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Compact; break; } } } #endregion } } |
TestProject.zip
[C#/WINUI2.5] NumberBox 엘리먼트 : AcceptsExpression 속성 사용하기
■ NumberBox 엘리먼트의 AcceptsExpression 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <muxc:NumberBox HorizontalAlignment="Center" VerticalAlignment="Center" Header="수식을 입력해 주시기 바랍니다." AcceptsExpression="True" PlaceholderText="1 + 2 ^ 2" Value="NaN" /> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "NumberBox 엘리먼트 : AcceptsExpression 속성 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AutoSuggestBox 엘리먼트 : QuerySubmitted 이벤트 사용하기
■ AutoSuggestBox 엘리먼트의 QuerySubmitted 이벤트를 사용하는 방법을 보여준다. ▶ ControlInfoDocumentLink.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 |
namespace TestProject { /// <summary> /// 컨트롤 정보 문서 링크 /// </summary> public class ControlInfoDocumentLink { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; private set; } #endregion #region URI - URI /// <summary> /// URI /// </summary> public string URI { get; private set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - ControlInfoDocumentLink(title, uri) /// <summary> /// 생성자 /// </summary> /// <param name="title">제목</param> /// <param name="uri">URI</param> public ControlInfoDocumentLink(string title, string uri) { Title = title; URI = uri; } #endregion } } |
▶ ControlInfoDataItem.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 |
using System.Collections.ObjectModel; namespace TestProject { /// <summary> /// 컨트롤 정보 데이터 항목 /// </summary> public class ControlInfoDataItem { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 고유 ID - UniqueID /// <summary> /// 고유 ID /// </summary> public string UniqueID { get; private set; } #endregion #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; private set; } #endregion #region 하위 제목 - Subtitle /// <summary> /// 하위 제목 /// </summary> public string Subtitle { get; private set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; private set; } #endregion #region 이미지 경로 - ImagePath /// <summary> /// 이미지 경로 /// </summary> public string ImagePath { get; private set; } #endregion #region 배지 문자열 - BadgeString /// <summary> /// 배지 문자열 /// </summary> public string BadgeString { get; private set; } #endregion #region 내용 - Content /// <summary> /// 내용 /// </summary> public string Content { get; private set; } #endregion #region 신규 여부 - IsNew /// <summary> /// 신규 여부 /// </summary> public bool IsNew { get; private set; } #endregion #region 업데이트 여부 - IsUpdated /// <summary> /// 업데이트 여부 /// </summary> public bool IsUpdated { get; private set; } #endregion #region 미리보기 여부 - IsPreview /// <summary> /// 미리보기 여부 /// </summary> public bool IsPreview { get; private set; } #endregion #region 문서 링크 컬렉션 - DocumentLinkCollection /// <summary> /// 문서 링크 컬렉션 /// </summary> public ObservableCollection<ControlInfoDocumentLink> DocumentLinkCollection { get; private set; } #endregion #region 연결 컨트롤 컬렉션 - RelatedControlCollection /// <summary> /// 연결 컨트롤 컬렉션 /// </summary> public ObservableCollection<string> RelatedControlCollection { get; private set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - ControlInfoDataItem(uniqueID, title, subtitle, imagePath, badgeString, description, content, isNew, isUpdated, isPreview) /// <summary> /// 생성자 /// </summary> /// <param name="uniqueID">고유 ID</param> /// <param name="title">제목</param> /// <param name="subtitle">하위 제목</param> /// <param name="imagePath">이미지 경로</param> /// <param name="badgeString">배지 문자열</param> /// <param name="description">설명</param> /// <param name="content">내용</param> /// <param name="isNew">신규 여부</param> /// <param name="isUpdated">업데이트 여부</param> /// <param name="isPreview">미리보기 여부</param> public ControlInfoDataItem ( string uniqueID, string title, string subtitle, string imagePath, string badgeString, string description, string content, bool isNew, bool isUpdated, bool isPreview ) { UniqueID = uniqueID; Title = title; Subtitle = subtitle; ImagePath = imagePath; BadgeString = badgeString; Description = description; Content = content; IsNew = isNew; IsUpdated = isUpdated; IsPreview = isPreview; DocumentLinkCollection = new ObservableCollection<ControlInfoDocumentLink>(); RelatedControlCollection = new ObservableCollection<string>(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 문자열 구하기 - ToString() /// <summary> /// 문자열 구하기 /// </summary> /// <returns>문자열</returns> public override string ToString() { return Title; } #endregion } } |
▶ ControlInfoDataGroup.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 |
using System.Collections.ObjectModel; namespace TestProject { /// <summary> /// 컨트롤 정보 데이터 그룹 /// </summary> public class ControlInfoDataGroup { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 고유 ID - UniqueID /// <summary> /// 고유 ID /// </summary> public string UniqueID { get; private set; } #endregion #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; private set; } #endregion #region 하위 제목 - Subtitle /// <summary> /// 하위 제목 /// </summary> public string Subtitle { get; private set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; private set; } #endregion #region 이미지 경로 - ImagePath /// <summary> /// 이미지 경로 /// </summary> public string ImagePath { get; private set; } #endregion #region 데이터 항목 컬렉션 - DataItemCollection /// <summary> /// 데이터 항목 컬렉션 /// </summary> public ObservableCollection<ControlInfoDataItem> DataItemCollection { get; private set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - ControlInfoDataGroup(uniqueID, title, subtitle, imagePath, description) /// <summary> /// 생성자 /// </summary> /// <param name="uniqueID">고유 ID</param> /// <param name="title">제목</param> /// <param name="subtitle">하위 제목</param> /// <param name="imagePath">이미지 경로</param> /// <param name="description">설명</param> public ControlInfoDataGroup(string uniqueID, string title, string subtitle, string imagePath, string description) { UniqueID = uniqueID; Title = title; Subtitle = subtitle; Description = description; ImagePath = imagePath; DataItemCollection = new ObservableCollection<ControlInfoDataItem>(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 문자열 구하기 - ToString() /// <summary> /// 문자열 구하기 /// </summary> /// <returns>문자열</returns> public override string ToString() { return Title; } #endregion } } |
▶ ControlInfoDataSource.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 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Windows.Data.Json; using Windows.Storage; namespace TestProject { /// <summary> /// 컨트롤 정보 데이터 소스 /// </summary> public sealed class ControlInfoDataSource { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 잠금 객체 /// </summary> private static readonly object _lockObject = new object(); /// <summary> /// 인스턴스 /// </summary> private static ControlInfoDataSource _instance; #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 데이터 그룹 리스트 /// </summary> private IList<ControlInfoDataGroup> dataGroupList = new List<ControlInfoDataGroup>(); #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 인스턴스 - Instance /// <summary> /// 인스턴스 /// </summary> public static ControlInfoDataSource Instance { get { return _instance; } } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 데이터 그룹 리스트 - DataGroupList /// <summary> /// 데이터 그룹 리스트 /// </summary> public IList<ControlInfoDataGroup> DataGroupList { get { return this.dataGroupList; } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Static #region 생성자 - ControlInfoDataSource() /// <summary> /// 생성자 /// </summary> static ControlInfoDataSource() { _instance = new ControlInfoDataSource(); } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region 생성자 - ControlInfoDataSource() /// <summary> /// 생성자 /// </summary> private ControlInfoDataSource() { } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 데이터 그룹 열거 가능형 구하기 (비동기) - GetDataGroupEnumerableAsync() /// <summary> /// 데이터 그룹 열거 가능형 구하기 (비동기) /// </summary> /// <returns>데이터 그룹 열거 가능형</returns> public async Task<IEnumerable<ControlInfoDataGroup>> GetDataGroupEnumerableAsync() { await _instance.GetControlInfoDataAsync(); return _instance.DataGroupList; } #endregion #region 데이터 그룹 구하기 (비동기) - GetDataGroupAsync(uniqueID) /// <summary> /// 데이터 그룹 구하기 (비동기) /// </summary> /// <param name="uniqueID">고유 ID</param> /// <returns>데이터 그룹 태스크</returns> public async Task<ControlInfoDataGroup> GetDataGroupAsync(string uniqueID) { await _instance.GetControlInfoDataAsync(); IEnumerable<ControlInfoDataGroup> dataGroupEnumerable = _instance.DataGroupList.Where((group) => group.UniqueID.Equals(uniqueID)); if(dataGroupEnumerable.Count() == 1) { return dataGroupEnumerable.First(); } return null; } #endregion #region 데이터 항목 구하기 (비동기) - GetDataItemAsync(uniqueID) /// <summary> /// 데이터 항목 구하기 (비동기) /// </summary> /// <param name="uniqueID">고유 ID</param> /// <returns>데이터 항목 태스크</returns> public async Task<ControlInfoDataItem> GetDataItemAsync(string uniqueID) { await _instance.GetControlInfoDataAsync(); IEnumerable<ControlInfoDataItem> dataItemEnumerable = _instance.DataGroupList.SelectMany(group => group.DataItemCollection) .Where((item) => item.UniqueID.Equals(uniqueID)); if(dataItemEnumerable.Count() > 0) { return dataItemEnumerable.First(); } return null; } #endregion #region 항목에서 데이터 그룹 구하기 (비동기) - GetDataGroupFromItemAsync(uniqueID) /// <summary> /// 항목에서 데이터 그룹 구하기 (비동기) /// </summary> /// <param name="uniqueID">고유 ID</param> /// <returns>데이터 그룹 태스크</returns> public async Task<ControlInfoDataGroup> GetDataGroupFromItemAsync(string uniqueID) { await _instance.GetControlInfoDataAsync(); IEnumerable<ControlInfoDataGroup> dataGroupEnumerable = _instance.DataGroupList.Where ( (group) => group.DataItemCollection.FirstOrDefault(item => item.UniqueID.Equals(uniqueID)) != null ); if(dataGroupEnumerable.Count() == 1) { return dataGroupEnumerable.First(); } return null; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Private #region 컨트롤 정보 데이터 구하기 - GetControlInfoDataAsync() /// <summary> /// 컨트롤 정보 데이터 구하기 /// </summary> /// <returns>태스크</returns> private async Task GetControlInfoDataAsync() { lock(_lockObject) { if(DataGroupList.Count() != 0) { return; } } Uri dataURI = new Uri("ms-appx:///DATA/ControlInfoData.json"); StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(dataURI); string json = await FileIO.ReadTextAsync(storageFile); JsonObject jsonObject = JsonObject.Parse(json); JsonArray jsonArray = jsonObject["Groups"].GetArray(); lock(_lockObject) { foreach(JsonValue groupValue in jsonArray) { JsonObject groupObject = groupValue.GetObject(); ControlInfoDataGroup group = new ControlInfoDataGroup ( groupObject["UniqueId" ].GetString(), groupObject["Title" ].GetString(), groupObject["Subtitle" ].GetString(), groupObject["ImagePath" ].GetString(), groupObject["Description"].GetString() ); foreach(JsonValue itemValue in groupObject["Items"].GetArray()) { JsonObject itemObject = itemValue.GetObject(); string badgeString = null; bool isNew = itemObject.ContainsKey("IsNew" ) ? itemObject["IsNew" ].GetBoolean() : false; bool isUpdated = itemObject.ContainsKey("IsUpdated") ? itemObject["IsUpdated"].GetBoolean() : false; bool isPreview = itemObject.ContainsKey("IsPreview") ? itemObject["IsPreview"].GetBoolean() : false; if(isNew) { badgeString = "New"; } else if(isUpdated) { badgeString = "Updated"; } else if(isPreview) { badgeString = "Preview"; } ControlInfoDataItem item = new ControlInfoDataItem ( itemObject["UniqueId" ].GetString(), itemObject["Title" ].GetString(), itemObject["Subtitle" ].GetString(), itemObject["ImagePath" ].GetString(), badgeString, itemObject["Description"].GetString(), itemObject["Content" ].GetString(), isNew, isUpdated, isPreview ); if(itemObject.ContainsKey("Docs")) { foreach(JsonValue documentValue in itemObject["Docs"].GetArray()) { JsonObject documentObject = documentValue.GetObject(); item.DocumentLinkCollection.Add ( new ControlInfoDocumentLink ( documentObject["Title"].GetString(), documentObject["Uri" ].GetString() ) ); } } if(itemObject.ContainsKey("RelatedControls")) { foreach(JsonValue relatedControlValue in itemObject["RelatedControls"].GetArray()) { item.RelatedControlCollection.Add(relatedControlValue.GetString()); } } group.DataItemCollection.Add(item); } if(!DataGroupList.Any(g => g.Title == group.Title)) { DataGroupList.Add(group); } } } } #endregion } } |
▶ MainPage.xaml
[C#/WINUI2.5] AutoSuggestBox 엘리먼트 : TextChanged/SuggestionChosen 이벤트 사용하기
■ AutoSuggestBox 엘리먼트의 TextChanged/SuggestionChosen 이벤트를 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Spacing="10"> <AutoSuggestBox Width="300" TextChanged="autoSuggestBox_TextChanged" SuggestionChosen="autoSuggestBox_SuggestionChosen" /> <TextBlock Name="textBlock" /> </StackPanel> </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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
using System.Collections.Generic; using System.Linq; 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 List<string> sourceList = new List<string>() { "Abyssinian", "Aegean", "American Bobtail", "American Curl", "American Ringtail", "American Shorthair", "American Wirehair", "Aphrodite Giant", "Arabian Mau", "Asian cat", "Asian Semi-longhair", "Australian Mist", "Balinese", "Bambino", "Bengal", "Birman", "Bombay", "Brazilian Shorthair", "British Longhair", "British Shorthair", "Burmese", "Burmilla", "California Spangled", "Chantilly-Tiffany", "Chartreux", "Chausie", "Colorpoint Shorthair", "Cornish Rex", "Cymric", "Cyprus", "Devon Rex", "Donskoy", "Dragon Li", "Dwelf", "Egyptian Mau", "European Shorthair", "Exotic Shorthair", "Foldex", "German Rex", "Havana Brown", "Highlander", "Himalayan", "Japanese Bobtail", "Javanese", "Kanaani", "Khao Manee", "Kinkalow", "Korat", "Korean Bobtail", "Korn Ja", "Kurilian Bobtail", "Lambkin", "LaPerm", "Lykoi", "Maine Coon", "Manx", "Mekong Bobtail", "Minskin", "Napoleon", "Munchkin", "Nebelung", "Norwegian Forest Cat", "Ocicat", "Ojos Azules", "Oregon Rex", "Oriental Bicolor", "Oriental Longhair", "Oriental Shorthair", "Persian (modern)", "Persian (traditional)", "Peterbald", "Pixie-bob", "Ragamuffin", "Ragdoll", "Raas", "Russian Blue", "Russian White", "Sam Sawet", "Savannah", "Scottish Fold", "Selkirk Rex", "Serengeti", "Serrade Petit", "Siamese", "Siberian or´Siberian Forest Cat", "Singapura", "Snowshoe", "Sokoke", "Somali", "Sphynx", "Suphalak", "Thai", "Thai Lilac", "Tonkinese", "Toyger", "Turkish Angora", "Turkish Van", "Turkish Vankedisi", "Ukrainian Levkoy", "Wila Krungthep", "York Chocolate" }; #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 = "AutoSuggestBox 엘리먼트 : TextChanged/SuggestionChosen 이벤트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 자동 제안 박스 텍스트 변경시 처리하기 - autoSuggestBox_TextChanged(autoSuggestBox, e) /// <summary> /// 자동 제안 박스 텍스트 변경시 처리하기 /// </summary> /// <param name="autoSuggestBox">자동 제안 박스</param> /// <param name="e">이벤트 인자</param> private void autoSuggestBox_TextChanged(AutoSuggestBox autoSuggestBox, AutoSuggestBoxTextChangedEventArgs e) { List<string> targetList = new List<string>(); string[] tokenArray = autoSuggestBox.Text.ToLower().Split(" "); foreach(string source in sourceList) { bool found = tokenArray.All ( (key)=> { return source.ToLower().Contains(key); } ); if(found) { targetList.Add(source); } } if(targetList.Count == 0) { targetList.Add("검색 결과가 없습니다."); } autoSuggestBox.ItemsSource = targetList; } #endregion #region 자동 제안 박스 제안 선택시 처리하기 - autoSuggestBox_SuggestionChosen(autoSuggestBox, e) /// <summary> /// 자동 제안 박스 제안 선택시 처리하기 /// </summary> /// <param name="autoSuggestBox">자동 제안 박스</param> /// <param name="e">이벤트 인자</param> private void autoSuggestBox_SuggestionChosen(AutoSuggestBox autoSuggestBox, AutoSuggestBoxSuggestionChosenEventArgs e) { this.textBlock.Text = e.SelectedItem.ToString(); } #endregion } } |
TestProject.zip
[C#/WINUI2.5] ResourceDictionary 엘리먼트 : Source 속성을 사용해 컨트롤 컴팩트 크기 사용하기
■ ResourceDictionary 엘리먼트의 Source 속성을 사용해 컨트롤 컴팩트 크기를 사용하는 방법을 보여준다. ▶ SampleCompactSizingPage.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 |
<Page x:Class="TestProject.SampleCompactSizingPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" /> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Spacing="4"> <TextBlock Name="HeaderBlock" FontSize="18" Text="컴팩트 크기" /> <TextBox Name="firstNameTextBox" Header="이름 :" /> <TextBox Name="lastNameTextBox" Header="성 :" /> <PasswordBox Name="passwordPasswordBox" Header="패스워드 :" /> <PasswordBox Name="confirmPasswordPasswordBox" Header="패스워드 확인 :" /> <DatePicker Name="chosenDatePicker" Header="날짜 선택" /> </StackPanel> </Grid> </Page> |
▶ SampleCompactSizingPage.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 |
using Windows.UI.Xaml.Controls; namespace TestProject { /// <summary> /// 샘플 컴팩트 크기 페이지 /// </summary> public sealed partial class SampleCompactSizingPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 이름 - FirstName /// <summary> /// 이름 /// </summary> public TextBox FirstName => this.firstNameTextBox; #endregion #region 성 - LastName /// <summary> /// 성 /// </summary> public TextBox LastName => this.lastNameTextBox; #endregion #region 패스워드 - Password /// <summary> /// 패스워드 /// </summary> public PasswordBox Password => this.passwordPasswordBox; #endregion #region 패스워드 확인 - ConfirmPassword /// <summary> /// 패스워드 확인 /// </summary> public PasswordBox ConfirmPassword => this.confirmPasswordPasswordBox; #endregion #region 선택 날짜 - ChosenDate /// <summary> /// 선택 날짜 /// </summary> public DatePicker ChosenDate => this.chosenDatePicker; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - SampleCompactSizingPage() /// <summary> /// 생성자 /// </summary> public SampleCompactSizingPage() { InitializeComponent(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 상태 복사하기 - CopyState(page) /// <summary> /// 상태 복사하기 /// </summary> /// <param name="page">샘플 표준 크기 페이지</param> public void CopyState(SampleStandardSizingPage page) { FirstName.Text = page.FirstName.Text; LastName.Text = page.LastName.Text; Password.Password = page.Password.Password; ConfirmPassword.Password = page.ConfirmPassword.Password; ChosenDate.Date = page.ChosenDate.Date; } #endregion } } |
▶ SampleStandardSizingPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<Page x:Class="TestProject.SampleStandardSizingPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Spacing="4"> <TextBlock Name="HeaderBlock" FontSize="18" Text="표준 크기" /> <TextBox Name="firstNameTextBox" Header="이름 :" /> <TextBox Name="lastNameTextBox" Header="성 :" /> <PasswordBox Name="passwordPasswordBox" Header="패스워드 :" /> <PasswordBox Name="confirmPasswordPasswordBox" Header="패스워드 확인 :" /> <DatePicker Name="chosenDatePicker" Header="날짜 선택" /> </StackPanel> </Grid> </Page> |
▶
[C#/WINUI2.5] FrameworkElement 엘리먼트 : 포커스 사각형 크기/색상 변경하기
■ FrameworkElement 엘리먼트에서 포커스 사각형 크기/색상을 변경하는 방법을 보여준다. ▶ UIHelper.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 |
using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Xaml.Media; namespace TestProject { /// <summary> /// UI 헬퍼 /// </summary> public static class UIHelper { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 두께 구하기 - GetThickness(length) /// <summary> /// 두께 구하기 /// </summary> /// <param name="length">길이</param> /// <returns>두께</returns> public static Thickness GetThickness(double length) { return new Thickness(length); } #endregion #region 단일 색상 브러시 구하기 - GetSolidColorBrush(color) /// <summary> /// 단일 색상 브러시 구하기 /// </summary> /// <param name="color">색상</param> /// <returns>단일 색상 브러시</returns> public static SolidColorBrush GetSolidColorBrush(Color color) { return new SolidColorBrush(color); } #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 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 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
<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> <Style x:Key="CustomButtonRevealStyleKey" TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}"> <Setter Target="VerticalAlignment" Value="Center" /> <Setter Target="Margin" Value="10" /> <Setter Target="Width" Value="100" /> <Setter Target="Height" Value="100" /> </Style> <Flyout x:Key="PrimaryColorPickerFlyoutKey"> <RelativePanel> <ColorPicker Name="primaryColorPicker" IsColorChannelTextInputVisible="False" IsHexInputVisible="False" Color="{StaticResource SystemAltHighColor}" /> <Grid RelativePanel.Below="primaryColorPicker" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button HorizontalAlignment="Stretch" Margin="0 10 0 0" Content="확인" Click="confirmationButton_Click" /> </Grid> </RelativePanel> </Flyout> <Flyout x:Key="SecondaryColorPickerFlyoutKey"> <RelativePanel> <ColorPicker x:Name="secondaryColorPicker" IsColorChannelTextInputVisible="False" IsHexInputVisible="False" Color="{StaticResource SystemBaseHighColor}" /> <Grid RelativePanel.Below="secondaryColorPicker" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button HorizontalAlignment="Stretch" Margin="0 10 0 0" Content="확인" Click="confirmationButton_Click" /> </Grid> </RelativePanel> </Flyout> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0"> <StackPanel Orientation="Horizontal"> <Button Name="exampleButton" Style="{StaticResource CustomButtonRevealStyleKey}" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <Button Style="{StaticResource CustomButtonRevealStyleKey}" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <Button Style="{StaticResource CustomButtonRevealStyleKey}" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> </StackPanel> <TextBox Margin="0 20 0 0" MinWidth="300" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <ComboBox Margin="0 20 0 0" MinWidth="300" SelectedIndex="0" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}"> <ComboBoxItem>Apples</ComboBoxItem> <ComboBoxItem>Bananas</ComboBoxItem> <ComboBoxItem>Oranges</ComboBoxItem> <ComboBoxItem>Strawberries</ComboBoxItem> </ComboBox> <muxc:RatingControl Margin="0 20 0 0" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <Slider Margin="0 20 0 0" MinWidth="300" IsFocusEngagementEnabled="True" FocusVisualMargin="{x:Bind local:UIHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:UIHelper.GetThickness(primaryThicknessSlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:UIHelper.GetThickness(secondaryThicknessSlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <TimePicker Margin="0 20 0 0" MinWidth="300" /> </StackPanel> <StackPanel Grid.Column="2" Spacing="10"> <Slider Name="primaryThicknessSlider" MinWidth="50" Header="기본 두께" Minimum="0" Maximum="10" Value="2" /> <Slider Name="secondaryThicknessSlider" MinWidth="50" Header="보조 두께" Minimum="0" Maximum="10" Value="1"/> <Slider Name="marginSlider" MinWidth="50" Header="마진" Minimum="-20" Maximum="20" Value="-3" /> <Button Content="마진 초기화" Click="resetMarginButton_Click" /> <Button Content="키보드 포커스 이동" Click="moveKeyboardFocusButton_Click" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="기본 포커스 색상" /> <Button Name="primaryColorPickerButton" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Margin="10" Height="40" Width="40" Background="{x:Bind local:UIHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" Flyout="{StaticResource PrimaryColorPickerFlyoutKey}" /> <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Text="보조 포커스 색상" /> <Button Name="secondaryColorPickerButton" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10" Height="40" Width="40" Background="{x:Bind local:UIHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" Flyout="{StaticResource SecondaryColorPickerFlyoutKey}" /> </Grid> </StackPanel> </Grid> </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 |
using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "FrameworkElement 엘리먼트 : 포커스 사각형 크기/색상 변경하기"; #endregion if ( ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 6) && Application.Current.FocusVisualKind == FocusVisualKind.Reveal ) { this.primaryColorPicker.Color = (Resources["SystemControlRevealFocusVisualBrush" ] as SolidColorBrush).Color; this.secondaryColorPicker.Color = (Resources["SystemControlFocusVisualSecondaryBrush"] as SolidColorBrush).Color; this.primaryColorPickerButton.Background = new SolidColorBrush(this.primaryColorPicker.Color ); this.secondaryColorPickerButton.Background = new SolidColorBrush(this.secondaryColorPicker.Color); } else { this.primaryColorPickerButton.Background = new SolidColorBrush(this.primaryColorPicker.Color ); this.secondaryColorPickerButton.Background = new SolidColorBrush(this.secondaryColorPicker.Color); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 확인 버튼 클릭시 처리하기 - confirmationButton_Click(sender, e) /// <summary> /// 확인 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void confirmationButton_Click(object sender, RoutedEventArgs e) { this.primaryColorPickerButton.Background = new SolidColorBrush(this.primaryColorPicker.Color ); this.secondaryColorPickerButton.Background = new SolidColorBrush(this.secondaryColorPicker.Color); this.primaryColorPickerButton.Flyout.Hide(); this.secondaryColorPickerButton.Flyout.Hide(); } #endregion #region 마진 초기화 버튼 클릭시 처리하기 - resetMarginButton_Click(sender, e) /// <summary> /// 마진 초기화 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void resetMarginButton_Click(object sender, RoutedEventArgs e) { this.marginSlider.Value = -1 * (this.primaryThicknessSlider.Value + this.secondaryThicknessSlider.Value); } #endregion #region 키보드 포커스 이동 버튼 클릭시 처리하기 - moveKeyboardFocusButton_Click(sender, e) /// <summary> /// 키보드 포커스 이동 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void moveKeyboardFocusButton_Click(object sender, RoutedEventArgs e) { this.exampleButton.Focus(FocusState.Keyboard); } #endregion } } |
TestProject.zip
[C#/WINUI2.5] Application 클래스 : FocusVisualKind 속성을 사용해 포커스 사각형 모양 변경하기
■ Application 클래스의 FocusVisualKind 속성을 사용해 포커스 사각형 모양을 변경하는 방법을 보여준다. ▶ 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 |
<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" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <Style x:Key="CustomButtonRevealStyleKey" TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}"> <Setter Target="VerticalAlignment" Value="Center" /> <Setter Target="Margin" Value="10" /> <Setter Target="Width" Value="100" /> <Setter Target="Height" Value="100" /> </Style> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Button Style="{StaticResource CustomButtonRevealStyleKey}" /> <Button Style="{StaticResource CustomButtonRevealStyleKey}" /> <Button Style="{StaticResource CustomButtonRevealStyleKey}" /> </StackPanel> <muxc:RadioButtons Grid.Column="2" VerticalAlignment="Center" Header="FocusVisualKind"> <RadioButton Name="highVisibilityRadioButton" Content="High Visibility" Checked="highVisibilityRadioButton_Checked" /> <RadioButton Name="revealRadioButton" Content="Reveal" Checked="revealRadioButton_Checked" /> </muxc:RadioButtons> </Grid> </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 |
using Windows.Foundation; using Windows.Foundation.Metadata; 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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "Application 클래스 : FocusVisualKind 속성을 사용해 포커스 사각형 모양 변경하기"; #endregion if ( ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 6) && Application.Current.FocusVisualKind == FocusVisualKind.Reveal ) { this.revealRadioButton.IsChecked = true; } else { this.highVisibilityRadioButton.IsChecked = true; } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region High Visibility 라디오 버튼 체크시 처리하기 - highVisibilityRadioButton_Checked(sender, e) /// <summary> /// High Visibility 라디오 버튼 체크시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void highVisibilityRadioButton_Checked(object sender, RoutedEventArgs e) { Application.Current.FocusVisualKind = FocusVisualKind.HighVisibility; } #endregion #region Reveal 라디오 버튼 체크시 처리하기 - revealRadioButton_Checked(sender, e) /// <summary> /// Reveal 라디오 버튼 체크시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void revealRadioButton_Checked(object sender, RoutedEventArgs e) { if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 6)) { Application.Current.FocusVisualKind = FocusVisualKind.Reveal; } } #endregion } } |
TestProject.zip
[C#/WINUI2.5] Grid 엘리먼트 : BorderBrush 속성에서 SystemControlBackgroundListMediumRevealBorderBrush 리소스 사용하기
■ Grid 엘리먼트의 BorderBrush 속성에서 SystemControlBackgroundListMediumRevealBorderBrush 리소스를 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Grid Width="500" Height="100" BorderThickness="3" BorderBrush="{ThemeResource SystemControlBackgroundListMediumRevealBorderBrush}"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Text="SystemControlBackgroundListMediumRevealBorderBrush" /> </Grid> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "Grid 엘리먼트 : BorderBrush 속성에서 SystemControlBackgroundListMediumRevealBorderBrush 리소스 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AppBarButton 엘리먼트 : Style 속성에서 AppBarButtonRevealStyle 리소스 사용하기
■ AppBarButton 엘리먼트의 Style 속성에서 AppBarButtonRevealStyle 리소스를 사용하는 방법을 보여준다. ▶ 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 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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:media="using:Windows.UI.Xaml.Media" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <media:AcrylicBrush x:Key="CustomAcrylicBrushKey" BackgroundSource="Backdrop" TintOpacity="0.45" TintColor="#ff8ff0fb" FallbackColor="#ff8ff0fb" /> <media:AcrylicBrush x:Key="CustomDarkAcrylicBrushKey" BackgroundSource="Backdrop" TintOpacity="0.45" TintColor="#ff0e5a5c" FallbackColor="#ff0e5a5c" /> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Width="512" Height="275" Source="ms-appx:///IMAGE/background.png" /> <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Center"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Grid HorizontalAlignment="Center" Margin="5" Background="{ThemeResource SystemControlAcrylicElementBrush}"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="1 2 0 0" Icon="World" /> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="0 2 1 0" Icon="CellPhone" /> </StackPanel> <StackPanel Orientation="Horizontal"> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="1 2 0 2" Icon="Delete" /> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="0 2 1 2" Icon="Comment" /> </StackPanel> </StackPanel> </Grid> <Grid HorizontalAlignment="Center" Margin="5" Background="{ThemeResource CustomAcrylicBrushKey}" RequestedTheme="Light"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="1 2 0 0" Icon="World" /> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="0 2 1 0" Icon="CellPhone" /> </StackPanel> <StackPanel Orientation="Horizontal"> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="1 2 0 2" Icon="Delete" /> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="0 2 1 2" Icon="Comment" /> </StackPanel> </StackPanel> </Grid> <Grid HorizontalAlignment="Center" Margin="5" Background="{ThemeResource CustomDarkAcrylicBrushKey}" RequestedTheme="Dark"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="1 2 0 0" Icon="World" /> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="0 2 1 0" Icon="CellPhone" /> </StackPanel> <StackPanel Orientation="Horizontal"> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="1 2 0 2" Icon="Delete" /> <AppBarButton Style="{ThemeResource AppBarButtonRevealStyle}" Margin="0 2 1 2" Icon="Comment" /> </StackPanel> </StackPanel> </Grid> </StackPanel> </StackPanel> </Grid> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AppBarButton 엘리먼트 : Style 속성에서 AppBarButtonRevealStyle 리소스 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] RadialGradientBrush 엘리먼트 사용하기
■ RadialGradientBrush 엘리먼트를 사용하는 방법을 보여준다. ▶ 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:media="using:Microsoft.UI.Xaml.Media" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Rectangle Name="rectangle" Width="200" Height="200"> <Rectangle.Fill> <media:RadialGradientBrush x:Name="radialGradientBrush" MappingMode="RelativeToBoundingBox" Center="0.25 0.25" RadiusX=".5" RadiusY=".5" GradientOrigin="0.5 0.25" SpreadMethod="Pad"> <GradientStop Offset="0.0" Color="Yellow" /> <GradientStop Offset="1" Color="Blue" /> </media:RadialGradientBrush> </Rectangle.Fill> </Rectangle> </StackPanel> <Grid Grid.Column="2"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ComboBox Name="mappingModeComboBox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Header="MappingMode" SelectedValue="RelativeToBoundingBox"> <x:String>RelativeToBoundingBox</x:String> <x:String>Absolute</x:String> </ComboBox> <Slider Name="centerXSlider" Grid.Row="1" Grid.Column="0" Margin="0 10 0 0" Header="Center.X" SmallChange="0.05" ValueChanged="slider_ValueChanged" /> <Slider Name="centerYSlider" Grid.Row="1" Grid.Column="1" Margin="10 10 0 0" Header="Center.Y" SmallChange="0.05" ValueChanged="slider_ValueChanged" /> <Slider Name="radiusXSlider" Grid.Row="2" Grid.Column="0" Margin="0 10 0 0" Header="RadiusX" SmallChange="0.05" ValueChanged="slider_ValueChanged" /> <Slider Name="radiusYSlider" Grid.Row="2" Grid.Column="1" Margin="10 10 0 0" Header="RadiusY" SmallChange="0.05" ValueChanged="slider_ValueChanged" /> <Slider Name="gradientOriginXSlider" Grid.Row="3" Grid.Column="0" Margin="0 10 0 0" Header="GradientOrigin.X" SmallChange="0.05" ValueChanged="slider_ValueChanged" /> <Slider Name="gradientOriginYSlider" Grid.Row="3" Grid.Column="1" Margin="10 10 0 0" Header="GradientOrigin.Y" SmallChange="0.05" ValueChanged="slider_ValueChanged" /> <ComboBox Name="spreadMethodComboBox" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0 10 0 0" Header="SpreadMethod" SelectedValue="Pad"> <x:String>Pad</x:String> <x:String>Reflect</x:String> <x:String>Repeat</x:String> </ComboBox> </Grid> </Grid> </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 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 |
using System; using System.Numerics; using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "RadialGradientBrush 엘리먼트 사용하기"; #endregion Loaded += Page_Loaded; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 페이지 로드시 처리하기 - Page_Loaded(sender, e) /// <summary> /// 페이지 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Page_Loaded(object sender, RoutedEventArgs e) { this.mappingModeComboBox.SelectionChanged += mappingModeComboBox_SelectionChanged; this.spreadMethodComboBox.SelectionChanged += spreadMethodComboBox_SelectionChanged; InitializeSlider(); } #endregion #region 스프레드 메소드 콤보 박스 선택 변경시 처리하기 - spreadMethodComboBox_SelectionChanged(sender, e) /// <summary> /// 스프레드 메소드 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void spreadMethodComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { this.radialGradientBrush.SpreadMethod = Enum.Parse<GradientSpreadMethod>(this.spreadMethodComboBox.SelectedValue.ToString()); } #endregion #region 매핑 모드 콤보 박스 선택 변경시 처리하기 - mappingModeComboBox_SelectionChanged(sender, e) /// <summary> /// 매핑 모드 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void mappingModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { this.radialGradientBrush.MappingMode = Enum.Parse<BrushMappingMode>(this.mappingModeComboBox.SelectedValue.ToString()); InitializeSlider(); } #endregion #region 슬라이더 값 변경시 처리하기 - slider_ValueChanged(sender, e) /// <summary> /// 슬라이더 값 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { this.radialGradientBrush.Center = new Point(this.centerXSlider.Value, this.centerYSlider.Value); this.radialGradientBrush.RadiusX = this.radiusXSlider.Value; this.radialGradientBrush.RadiusY = this.radiusYSlider.Value; this.radialGradientBrush.GradientOrigin = new Point(this.gradientOriginXSlider.Value, this.gradientOriginYSlider.Value); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 슬라이더 초기화하기 - InitializeSlider() /// <summary> /// 슬라이더 초기화하기 /// </summary> private void InitializeSlider() { Size rectangleSize = this.rectangle.ActualSize.ToSize(); if(this.radialGradientBrush.MappingMode == BrushMappingMode.Absolute) { double width = rectangleSize.Width; double halfWidth = rectangleSize.Width / 2; double stepFrequencyX = rectangleSize.Width / 50; double stepFrequencyY = rectangleSize.Height / 50; this.centerXSlider.Maximum = width; this.centerXSlider.Value = halfWidth; this.centerXSlider.StepFrequency = stepFrequencyX; this.centerYSlider.Maximum = width; this.centerYSlider.Value = halfWidth; this.centerYSlider.StepFrequency = stepFrequencyY; this.radiusXSlider.Maximum = width; this.radiusXSlider.Value = halfWidth; this.radiusXSlider.StepFrequency = stepFrequencyX; this.radiusYSlider.Maximum = width; this.radiusYSlider.Value = halfWidth; this.radiusYSlider.StepFrequency = stepFrequencyY; this.gradientOriginXSlider.Maximum = width; this.gradientOriginXSlider.Value = halfWidth; this.gradientOriginXSlider.StepFrequency = stepFrequencyX; this.gradientOriginYSlider.Maximum = width; this.gradientOriginYSlider.Value = halfWidth; this.gradientOriginYSlider.StepFrequency = stepFrequencyY; } else { this.centerXSlider.Maximum = 1.0; this.centerXSlider.Value = 0.5; this.centerXSlider.StepFrequency = 0.02; this.centerYSlider.Maximum = 1.0; this.centerYSlider.Value = 0.5; this.centerYSlider.StepFrequency = 0.02; this.radiusXSlider.Maximum = 1.0; this.radiusXSlider.Value = 0.5; this.radiusXSlider.StepFrequency = 0.02; this.radiusYSlider.Maximum = 1.0; this.radiusYSlider.Value = 0.5; this.radiusYSlider.StepFrequency = 0.02; this.gradientOriginXSlider.Maximum = 1.0; this.gradientOriginXSlider.Value = 0.5; this.gradientOriginXSlider.StepFrequency = 0.02; this.gradientOriginYSlider.Maximum = 1.0; this.gradientOriginYSlider.Value = 0.5; this.gradientOriginYSlider.StepFrequency = 0.02; } } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시에서 밝기 사용하기
■ AcrylicBrush 엘리먼트를 사용해 커스텀 인-앱 아크릴 브러시에서 밝기를 설정하는 방법을 보여준다. ▶ 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:media="using:Microsoft.UI.Xaml.Media" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <media:AcrylicBrush x:Key="CustomAcrylicBrushKey" BackgroundSource="Backdrop" TintOpacity="0.8" TintColor="SkyBlue" FallbackColor="SkyBlue" /> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> <DataTemplate x:Key="ColorDataTemplateKey" x:DataType="SolidColorBrush"> <StackPanel Orientation="Horizontal"> <Rectangle Height="20" Width="20" Fill="{x:Bind}" /> <TextBlock Margin="5 0 0 0" Text="{x:Bind Color}" /> </StackPanel> </DataTemplate> </ResourceDictionary> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400"> <Grid> <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="200" Fill="Aqua" /> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Magenta" /> <Rectangle HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="200" Height="200" Fill="Yellow" /> </Grid> <Rectangle Name="rectangle" Margin="20" Fill="{ThemeResource CustomAcrylicBrushKey}" /> </Grid> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <TextBlock Text="색조 불투명도 :" /> <Slider Name="tintOpacitySlider" Width="200" Minimum="0" Maximum="1" SmallChange="0.001" StepFrequency="0.001" IsFocusEngagementEnabled="False" ValueChanged="tintOpacitySlider_ValueChanged" /> <TextBlock Text="색조 밝기 불투명도 :" /> <Slider Name="tintLuminosityOpacitySlider" Width="200" Minimum="0" Maximum="1" SmallChange="0.001" StepFrequency="0.001" IsFocusEngagementEnabled="False" ValueChanged="tintLuminosityOpacitySlider_ValueChanged" /> </StackPanel> </Grid> </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 |
using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시에서 밝기 사용하기"; #endregion Loaded += Page_Loaded; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 페이지 로드시 처리하기 - Page_Loaded(sender, e) /// <summary> /// 페이지 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Page_Loaded(object sender, RoutedEventArgs e) { this.tintOpacitySlider.Value = 0.8; this.tintLuminosityOpacitySlider.Value = 0.8; } #endregion #region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e) /// <summary> /// 색조 불투명도 슬라이더 값 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.TintOpacity = e.NewValue; } #endregion #region 색조 밝기 불투명도 슬라이더 값 변경시 처리하기 - tintLuminosityOpacitySlider_ValueChanged(sender, e) /// <summary> /// 색조 밝기 불투명도 슬라이더 값 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tintLuminosityOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.TintLuminosityOpacity = e.NewValue; } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 커스텀 배경 아크릴 브러시 사용하기
■ AcrylicBrush 엘리먼트를 사용해 커스텀 배경 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:media="using:Microsoft.UI.Xaml.Media" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <media:AcrylicBrush x:Key="CustomAcrylicBrushKey" BackgroundSource="HostBackdrop" TintOpacity="0.8" TintColor="Black" FallbackColor="Green" /> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> <DataTemplate x:Key="ColorDataTemplateKey" x:DataType="SolidColorBrush"> <StackPanel Orientation="Horizontal"> <Rectangle Height="20" Width="20" Fill="{x:Bind}" /> <TextBlock Margin="5 0 0 0" Text="{x:Bind Color}" /> </StackPanel> </DataTemplate> </ResourceDictionary> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400"> <Grid> <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="200" Fill="Aqua" /> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Magenta" /> <Rectangle HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="200" Height="200" Fill="Yellow" /> </Grid> <Rectangle Name="rectangle" Margin="20" Fill="{ThemeResource CustomAcrylicBrushKey}" /> </Grid> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <TextBlock Text="색조 불투명도 :" /> <Slider Name="tintOpacitySlider" Width="200" Minimum="0" Maximum="1" SmallChange="0.001" StepFrequency="0.001" IsFocusEngagementEnabled="False" ValueChanged="tintOpacitySlider_ValueChanged" /> <TextBlock Text="색조 색상 :" /> <ComboBox Name="tintColorComboBox" ItemTemplate="{StaticResource ColorDataTemplateKey}" SelectionChanged="tintColorComboBox_SelectionChanged"> <SolidColorBrush Color="Black" /> <SolidColorBrush Color="Red" /> <SolidColorBrush Color="Blue" /> </ComboBox> <TextBlock Text="폴백 색상 :" /> <ComboBox Name="fallbackColorComboBox" ItemTemplate="{StaticResource ColorDataTemplateKey}" SelectionChanged="fallbackColorComboBox_SelectionChanged"> <SolidColorBrush Color="Green" /> <SolidColorBrush Color="Yellow" /> </ComboBox> </StackPanel> </Grid> </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 |
using System.Linq; using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AcrylicBrush 엘리먼트 : 커스텀 배경 아크릴 브러시 사용하기"; #endregion Loaded += Page_Loaded; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 페이지 로드시 처리하기 - Page_Loaded(sender, e) /// <summary> /// 페이지 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Page_Loaded(object sender, RoutedEventArgs e) { this.tintOpacitySlider.Value = 0.8; this.tintColorComboBox.SelectedIndex = 0; this.fallbackColorComboBox.SelectedIndex = 0; } #endregion #region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e) /// <summary> /// 색조 불투명도 슬라이더 값 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.TintOpacity = e.NewValue; } #endregion #region 색조 색상 콤보 박스 선택 변경시 처리하기 - tintColorComboBox_SelectionChanged(sender, e) /// <summary> /// 색조 색상 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tintColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.TintColor = ((SolidColorBrush)e.AddedItems.First()).Color; } #endregion #region 폴백 색상 콤보 박스 선택 변경시 처리하기 - fallbackColorComboBox_SelectionChanged(sender, e) /// <summary> /// 폴백 색상 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void fallbackColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color; } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시 사용하기
■ AcrylicBrush 엘리먼트를 사용해 커스텀 인-앱 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:media="using:Microsoft.UI.Xaml.Media" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <media:AcrylicBrush x:Key="CustomAcrylicBrushKey" BackgroundSource="Backdrop" TintOpacity="0.8" TintColor="Black" FallbackColor="Green" /> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> <DataTemplate x:Key="ColorDataTemplateKey" x:DataType="SolidColorBrush"> <StackPanel Orientation="Horizontal"> <Rectangle Height="20" Width="20" Fill="{x:Bind}" /> <TextBlock Margin="5 0 0 0" Text="{x:Bind Color}" /> </StackPanel> </DataTemplate> </ResourceDictionary> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400"> <Grid> <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="200" Fill="Aqua" /> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Magenta" /> <Rectangle HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="200" Height="200" Fill="Yellow" /> </Grid> <Rectangle Name="rectangle" Margin="20" Fill="{ThemeResource CustomAcrylicBrushKey}" /> </Grid> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <TextBlock Text="색조 불투명도 :" /> <Slider Name="tintOpacitySlider" Width="200" Minimum="0" Maximum="1" SmallChange="0.001" StepFrequency="0.001" IsFocusEngagementEnabled="False" ValueChanged="tintOpacitySlider_ValueChanged" /> <TextBlock Text="색조 색상 :" /> <ComboBox Name="tintColorComboBox" ItemTemplate="{StaticResource ColorDataTemplateKey}" SelectionChanged="tintColorComboBox_SelectionChanged"> <SolidColorBrush Color="Black" /> <SolidColorBrush Color="Red" /> <SolidColorBrush Color="Blue" /> </ComboBox> <TextBlock Text="폴백 색상 :" /> <ComboBox Name="fallbackColorComboBox" ItemTemplate="{StaticResource ColorDataTemplateKey}" SelectionChanged="fallbackColorComboBox_SelectionChanged"> <SolidColorBrush Color="Green" /> <SolidColorBrush Color="Yellow" /> </ComboBox> </StackPanel> </Grid> </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 |
using System.Linq; using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시 사용하기"; #endregion Loaded += Page_Loaded; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 페이지 로드시 처리하기 - Page_Loaded(sender, e) /// <summary> /// 페이지 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Page_Loaded(object sender, RoutedEventArgs e) { this.tintOpacitySlider.Value = 0.8; this.tintColorComboBox.SelectedIndex = 0; this.fallbackColorComboBox.SelectedIndex = 0; } #endregion #region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e) /// <summary> /// 색조 불투명도 슬라이더 값 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.TintOpacity = e.NewValue; } #endregion #region 색조 색상 콤보 박스 선택 변경시 처리하기 - tintColorComboBox_SelectionChanged(sender, e) /// <summary> /// 색조 색상 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void tintColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.TintColor = ((SolidColorBrush)e.AddedItems.First()).Color; } #endregion #region 폴백 색상 콤보 박스 선택 변경시 처리하기 - fallbackColorComboBox_SelectionChanged(sender, e) /// <summary> /// 폴백 색상 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void fallbackColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush; brush.FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color; } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 디폴트 배경 아크릴 브러시 사용하기
■ AcrylicBrush 엘리먼트를 사용해 디폴트 배경 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400"> <Grid> <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="200" Fill="Aqua" /> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Magenta" /> <Rectangle HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="200" Height="200" Fill="Yellow" /> </Grid> <Rectangle Margin="20" Fill="{ThemeResource SystemControlAcrylicWindowBrush}" /> </Grid> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AcrylicBrush 엘리먼트 : 디폴트 배경 아크릴 브러시 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 디폴트 인-앱 아크릴 브러시 사용하기
■ AcrylicBrush 엘리먼트를 사용해 디폴트 인-앱 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400"> <Grid> <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="200" Fill="Aqua" /> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Magenta" /> <Rectangle HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="200" Height="200" Fill="Yellow" /> </Grid> <Rectangle Margin="20" Fill="{ThemeResource SystemControlAcrylicElementBrush}" /> </Grid> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AcrylicBrush 엘리먼트 : 디폴트 인-앱 아크릴 브러시 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] ToolTip 엘리먼트 : Placement/PlacementRect 속성 사용하기
■ ToolTip 엘리먼트의 Placement/PlacementRect 속성을 사용하는 방법을 보여준다. ▶ 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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="266" Source="/IMAGE/cliff.jpg"> <ToolTipService.ToolTip > <ToolTip Placement="Right" PlacementRect="0 0 400 266" Content="샘플 이미지입니다." /> </ToolTipService.ToolTip> </Image> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ToolTip 엘리먼트 : Placement/PlacementRect 속성 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] ToolTip 엘리먼트 : HorizontalOffset/VerticalOffset 속성 사용하기
■ ToolTip 엘리먼트의 HorizontalOffset/VerticalOffset 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="툴팁 오프셋을 갖는 텍스트 블럭입니다."> <ToolTipService.ToolTip> <ToolTip HorizontalOffset="50" VerticalOffset="-50" Content="툴팁 오프셋" /> </ToolTipService.ToolTip> </TextBlock> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ToolTip 엘리먼트 : HorizontalOffset/VerticalOffset 속성 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] ToolTipService 엘리먼트 : ToolTip 첨부 속성 사용하기
■ ToolTipService 엘리먼트의 ToolTip 첨부 속성을 사용해 툴팁을 표시하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Button HorizontalAlignment="Center" Width="100" Height="30" ToolTipService.ToolTip="간단한 테스를 실행합니다." Content="테스트" /> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ToolTipService 엘리먼트 : ToolTip 첨부 속성 사용하기"; #endregion } #endregion } } |
TestProject.zip
[C#/WINUI2.5] ProgressRing 엘리먼트 : IsIndeterminate/Value 속성 사용하기
■ ProgressRing 엘리먼트의 IsIndeterminate/Value 속성을 사용하는 방법을 보여준다. ▶ 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 |
<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" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <muxc:ProgressRing Name="progressRing" Width="60" Height="60" IsIndeterminate="False" /> <muxc:NumberBox VerticalAlignment="Center" Margin="50 0 0 0" SpinButtonPlacementMode="Inline" Minimum="0" Maximum="100" Value="0" Header="진행" ValueChanged="progressNumberBox_ValueChanged" /> </StackPanel> </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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ProgressRing 엘리먼트 : IsIndeterminate/Value 속성 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 진행 넘버 박스 값 변경시 처리하기 - progressNumberBox_ValueChanged(numberBox, e) /// <summary> /// 진행 넘버 박스 값 변경시 처리하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <param name="e">이벤트 인자</param> private void progressNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox numberBox, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs e) { if(!numberBox.Value.IsNAN()) { this.progressRing.Value = numberBox.Value; } else { numberBox.Value = 0; } } #endregion } } |
TestProject.zip