■ Application 클래스의 FocusVisualKind 속성을 사용해 포커스 표시를 설정하는 방법을 보여준다.
▶ ConversionHelper.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 |
using Windows.UI; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Media; namespace TestProject { /// <summary> /// 변환 헬퍼 /// </summary> public class ConversionHelper { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 196 197 198 199 |
<?xml version="1.0" encoding="utf-8"?> <Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestProject" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <Style x:Key="ButtonRevealCustomStyleKey" 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" /> <Grid RelativePanel.Below="primaryColorPicker" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Name="primaryColorPickerCloseButton" HorizontalAlignment="Stretch" Margin="0 12 2 0" Content="Close" /> </Grid> </RelativePanel> </Flyout> <Flyout x:Key="SecondaryColorPickerFlyoutKey"> <RelativePanel> <ColorPicker 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 Name="secondaryColorPickerCloseButton" HorizontalAlignment="Stretch" Margin="0 12 2 0" Content="Close" /> </Grid> </RelativePanel> </Flyout> </Page.Resources> <Grid Margin="10" XYFocusKeyboardNavigation="Enabled"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0"> <StackPanel Orientation="Horizontal"> <Button Name="button1" Style="{StaticResource ButtonRevealCustomStyleKey}" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <Button Name="button2" Style="{StaticResource ButtonRevealCustomStyleKey}" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <Button Name="button3" Style="{StaticResource ButtonRevealCustomStyleKey}" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> </StackPanel> <TextBox HorizontalAlignment="Left" Margin="0 10 0 0" Width="300" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" /> <ComboBox Margin="0 10 0 0" Width="300" SelectedIndex="0" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}"> <ComboBoxItem>Apples</ComboBoxItem> <ComboBoxItem>Bananas</ComboBoxItem> <ComboBoxItem>Oranges</ComboBoxItem> <ComboBoxItem>Strawberries</ComboBoxItem> </ComboBox> <RatingControl Margin="0 10 0 0" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}"/> <Slider HorizontalAlignment="Left" Margin="0 10 0 0" Width="300" IsFocusEngagementEnabled="True" FocusVisualMargin="{x:Bind local:ConversionHelper.GetThickness(marginSlider.Value), Mode=OneWay}" FocusVisualPrimaryThickness="{x:Bind local:ConversionHelper.GetThickness(primarySlider.Value), Mode=OneWay}" FocusVisualSecondaryThickness="{x:Bind local:ConversionHelper.GetThickness(secondarySlider.Value), Mode=OneWay}" FocusVisualPrimaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" FocusVisualSecondaryBrush="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}"/> <TimePicker Margin="0 10 0 0" Width="300" /> </StackPanel> <StackPanel Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <RadioButtons Header="FocusVisualKind : "> <RadioButton Name="highVisibilityRadioButton" Content="High Visibility" /> <RadioButton Name="revealFocusRadioButton" Content="Reveal Focus" /> </RadioButtons> <Slider Name="primarySlider" MinWidth="50" Header="Primary Thickness" Minimum="0" Maximum="10" Value="2" /> <Slider Name="secondarySlider" MinWidth="50" Header="Secondary Thickness" Minimum="0" Maximum="10" Value="1" /> <Slider Name="marginSlider" MinWidth="50" Header="Margin" Minimum="-20" Maximum="20" Value="-3" /> <Button Name="resetMarginButton" Margin="0 10" Content="Reset margin" /> <Button Name="moveKeyboardFocusButton" Margin="0 25" Content="Move keyboard focus" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="Primary focus color : " /> <Button Name="primaryColorPickerButton" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Margin="10" Height="40" Width="40" Background="{x:Bind local:ConversionHelper.GetSolidColorBrush(primaryColorPicker.Color), Mode=OneWay}" Flyout="{StaticResource PrimaryColorPickerFlyoutKey}" /> <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Text="Secondary focus color : " /> <Button Name="secondaryColorPickerButton" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10" Width="40" Height="40" Background="{x:Bind local:ConversionHelper.GetSolidColorBrush(secondaryColorPicker.Color), Mode=OneWay}" Flyout="{StaticResource SecondaryColorPickerFlyoutKey}" /> </Grid> </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 |
using Windows.Foundation.Metadata; using Microsoft.UI; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 윈도우즈 Spring2018 버전 여부 - Spring2018 /// <summary> /// 윈도우즈 Spring2018 버전 여부 /// </summary> public bool Spring2018 { get { return ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 6); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); if(Spring2018 && Application.Current.FocusVisualKind == FocusVisualKind.Reveal) { this.revealFocusRadioButton.IsChecked = true; this.primaryColorPickerButton.Background = new SolidColorBrush(primaryColorPicker.Color); this.primaryColorPicker.Color = (Resources["SystemControlRevealFocusVisualBrush"] as SolidColorBrush).Color; this.secondaryColorPickerButton.Background = new SolidColorBrush(secondaryColorPicker.Color); this.secondaryColorPicker.Color = (Resources["SystemControlFocusVisualSecondaryBrush"] as SolidColorBrush).Color; } else { this.highVisibilityRadioButton.IsChecked = true; this.primaryColorPickerButton.Background = new SolidColorBrush(this.primaryColorPicker.Color); this.secondaryColorPickerButton.Background = new SolidColorBrush(this.secondaryColorPicker.Color); } ActualThemeChanged += Page_ActualThemeChanged; this.resetMarginButton.Click += resetMarginButton_Click; this.primaryColorPickerCloseButton.Click += colorPickerCloseButton_Click; this.secondaryColorPickerCloseButton.Click += colorPickerCloseButton_Click; this.highVisibilityRadioButton.Checked += highVisibilityRadioButton_Checked; this.revealFocusRadioButton.Checked += revealFocusRadioButton_Checked; this.moveKeyboardFocusButton.Click += moveKeyboardFocusButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 페이지 실제 테마 변경시 처리하기 - Page_ActualThemeChanged(sender, e) /// <summary> /// 페이지 실제 테마 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Page_ActualThemeChanged(FrameworkElement sender, object e) { if(ActualTheme == ElementTheme.Light) { this.primaryColorPicker.Color = Colors.Black; this.secondaryColorPicker.Color = Colors.White; } else if(ActualTheme == ElementTheme.Dark) { this.primaryColorPicker.Color = Colors.White; this.secondaryColorPicker.Color = Colors.Black; } } #endregion #region 색상 선택시 Close 버튼 클릭시 처리하기 - colorPickerCloseButton_Click(sender, e) /// <summary> /// 색상 선택시 Close 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void colorPickerCloseButton_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 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) { if(this.button1.ActualTheme == ElementTheme.Light) { this.primaryColorPicker.Color = Colors.Black; this.secondaryColorPicker.Color = Colors.White; } else if(this.button1.ActualTheme == ElementTheme.Dark) { this.primaryColorPicker.Color = Colors.White; this.secondaryColorPicker.Color = Colors.Black; } this.primaryColorPickerButton.Background = new SolidColorBrush(this.primaryColorPicker.Color); Application.Current.FocusVisualKind = FocusVisualKind.HighVisibility; } #endregion #region Reveal Focus 라디오 버튼 체크시 처리하기 - revealFocusRadioButton_Checked(sender, e) /// <summary> /// Reveal Focus 라디오 버튼 체크시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void revealFocusRadioButton_Checked(object sender, RoutedEventArgs e) { if(Spring2018) { this.primaryColorPicker.Color = (Resources["SystemControlRevealFocusVisualBrush"] as SolidColorBrush).Color; this.primaryColorPickerButton.Background = new SolidColorBrush(primaryColorPicker.Color); Application.Current.FocusVisualKind = FocusVisualKind.Reveal; } } #endregion #region Reset Margin 버튼 클릭시 처리하기 - resetMarginButton_Click(sender, e) /// <summary> /// Reset Margin 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void resetMarginButton_Click(object sender, RoutedEventArgs e) { this.marginSlider.Value = -1 * (this.primarySlider.Value + this.secondarySlider.Value); } #endregion #region Move Keyboard Focus 버튼 클릭시 처리하기 - moveKeyboardFocusButton_Click(sender, e) /// <summary> /// Move Keyboard Focus 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void moveKeyboardFocusButton_Click(object sender, RoutedEventArgs e) { this.button1.Focus(FocusState.Keyboard); } #endregion } } |
