[C#/UWP] FrameworkElement 엘리먼트 : 포커스 사각형 크기/색상 변경하기

TestProject.zip

0.02MB

▶ UIHelper.cs

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
    }
}

 

728x90

 

▶ MainPage.xaml

<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>

 

300x250

 

▶ MainPage.xaml.cs

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
    }
}