WINUI2.5 Archives - icodebroker

[C#/WINUI2.5] SymbolIcon 엘리먼트 사용하기

■ SymbolIcon 엘리먼트를 사용하는 방법을 보여준다. ▶ SymbolItem.cs


using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 상징 항목
    /// </summary>
    public class SymbolItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 상징 - Symbol

        /// <summary>
        /// 상징
        /// </summary>
        public Symbol Symbol { get; set; }

        #endregion
        #region 제목 - Title
        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
    }
}

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 상징 항목

/// </summary>

public class SymbolItem

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 상징 - Symbol

/// <summary>

/// 상징

/// </summary>

public Symbol Symbol { get; set; }

#endregion

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

}

▶ 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>
        <muxc:StackLayout x:Name="VerticalStackLayoutKey"
            Orientation="Vertical"
            Spacing="10" />
        <DataTemplate x:Key="DataTemplateKey" x:DataType="local:SymbolItem">
            <StackPanel
                Orientation="Horizontal">
                <SymbolIcon
                    VerticalAlignment="Center"
                    Margin="10 5 0 5"
                    Symbol="{Binding Symbol}" />
                <TextBox
                    VerticalAlignment="Center"
                    Margin="50 0 0 0"
                    BorderThickness="0"
                    IsReadOnly="True"
                    Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <Border
            Margin="10"
            BorderThickness="1"
            BorderBrush="Black">
            <ScrollViewer
                HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Auto">
                <muxc:ItemsRepeater Name="itemsRepeater"
                    Layout="{StaticResource VerticalStackLayoutKey}"
                    ItemTemplate="{StaticResource DataTemplateKey}"
                    ItemsSource="{x:Bind symbolItemList}" />
            </ScrollViewer>
        </Border>
    </Grid>
</Page>

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

<muxc:StackLayout x:Name="VerticalStackLayoutKey"

Orientation="Vertical"

Spacing="10" />

<StackPanel

Orientation="Horizontal">

<SymbolIcon

VerticalAlignment="Center"

Margin="10 5 0 5"

Symbol="{Binding Symbol}" />

<TextBox

VerticalAlignment="Center"

Margin="50 0 0 0"

BorderThickness="0"

IsReadOnly="True"

Text="{Binding Title}" />

</StackPanel>

</DataTemplate>

</Page.Resources>

<Grid>

<Border

Margin="10"

BorderThickness="1"

BorderBrush="Black">

<ScrollViewer

HorizontalScrollBarVisibility="Auto"

VerticalScrollBarVisibility="Auto">

<muxc:ItemsRepeater Name="itemsRepeater"

Layout="{StaticResource VerticalStackLayoutKey}"

ItemTemplate="{StaticResource DataTemplateKey}"

ItemsSource="{x:Bind symbolItemList}" />

</ScrollViewer>

</Border>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Collections.Generic;
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<SymbolItem> symbolItemList = new List<SymbolItem>();

        #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 = "SymbolIcon 엘리먼트 사용하기";

            #endregion

            foreach(Symbol symbol in Enum.GetValues(typeof(Symbol)))
            {
                this.symbolItemList.Add(new SymbolItem { Symbol = symbol, Title = symbol.ToString() });
            }
        }

        #endregion
    }
}

using System;

using System.Collections.Generic;

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<SymbolItem> symbolItemList = new List<SymbolItem>();

#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 = "SymbolIcon 엘리먼트 사용하기";

#endregion

foreach(Symbol symbol in Enum.GetValues(typeof(Symbol)))

{

this.symbolItemList.Add(new SymbolItem { Symbol = symbol, Title = symbol.ToString() });

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] TextBox 엘리먼트 : PlaceholderText 속성을 사용해 원하는 입력 형식의 힌트 설정하기

■ TextBox 엘리먼트의 PlaceholderText 속성을 사용해 원하는 입력 형식의 힌트를 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<TextBox
    Header="이름을 입력해 주시기 바랍니다 :"
    PlaceholderText="이름" />

<TextBox

Header="이름을 입력해 주시기 바랍니다 :"

PlaceholderText="이름" />

[C#/WINUI2.5] TextBox 엘리먼트 : AcceptsReturn 속성을 사용해 멀티 라인 입력하기

■ TextBox 엘리먼트의 AcceptsReturn 속성을 사용해 멀티 라인을 입력하는 방법을 보여준다. ▶ 예제 코드 (XAML) —————————————————————————————————- <TextBox TextWrapping="Wrap" AcceptsReturn="True" IsSpellCheckEnabled="True" SelectionHighlightColor="Green" />

[C#/WINUI2.5] TextBlock 엘리먼트 : 인라인 텍스트 엘리먼트 사용하기

■ TextBlock 엘리먼트를 사용해 인라인 텍스트 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<TextBlock>
    <Run
        FontFamily="Times New Roman"
        Foreground="DarkGray">
        Text in a TextBlock doesn't have to be a simple string.
    </Run>
    <LineBreak />
    <Span>
        Text can be <Bold>bold</Bold>,
        <Italic>italic</Italic>, or <Underline>underlined</Underline>.
    </Span>
</TextBlock>

<Run

FontFamily="Times New Roman"

Foreground="DarkGray">

Text in a TextBlock doesn't have to be a simple string.

</Run>

<Span>

Text can be <Bold>bold</Bold>,

<Italic>italic</Italic>, or <Underline>underlined</Underline>.

</Span>

</TextBlock>

[C#/WINUI2.5] TextBlock 엘리먼트 : CharacterSpacing 속성 사용하기

■ TextBlock 엘리먼트의 CharacterSpacing 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<TextBlock
    TextWrapping="WrapWholeWords"
    CharacterSpacing="200"
    Foreground="CornflowerBlue"
    FontFamily="Arial"
    FontSize="24"
    FontStyle="Italic"
    Text="I am super excited to be here!" />

<TextBlock

TextWrapping="WrapWholeWords"

CharacterSpacing="200"

Foreground="CornflowerBlue"

FontFamily="Arial"

FontSize="24"

FontStyle="Italic"

Text="I am super excited to be here!" />

[C#/WINUI2.5] RichTextBlock 엘리먼트 : TextHighlighters 속성 사용하기

■ RichTextBlock 엘리먼트의 TextHighlighters 속성을 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <RichTextBlock x:Name="richTextBlock" Grid.Column="0">
                <Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                </Paragraph>
            </RichTextBlock>
            <StackPanel Grid.Column="2">
                <ComboBox
                    Header="텍스트 하이라이트 색상"
                    SelectionChanged="textHighlightColorCombobox_SelectionChanged">
                    <ComboBoxItem Content="Yellow"
                        IsSelected="True" />
                    <ComboBoxItem Content="Red"  />
                    <ComboBoxItem Content="Blue" />
                </ComboBox>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

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

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

</Paragraph>

</RichTextBlock>

<ComboBox

Header="텍스트 하이라이트 색상"

SelectionChanged="textHighlightColorCombobox_SelectionChanged">

<ComboBoxItem Content="Yellow"

IsSelected="True" />

</ComboBox>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;
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 = "RichTextBlock 엘리먼트 : TextHighlighters 속성 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 텍스트 하이라이트 색상 콤보 박스 선택 변경시 처리하기 - textHighlightColorCombobox_SelectionChanged(sender, e)

        /// <summary>
        /// 텍스트 하이라이트 색상 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void textHighlightColorCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ComboBox comboBox = sender as ComboBox;

            ComboBoxItem item = comboBox.SelectedItem as ComboBoxItem;

            Color color = Colors.Yellow;

            switch(item.Content as string)
            {
                case "Yellow" : color = Colors.Yellow; break;
                case "Red"    : color = Colors.Red;    break;
                case "Blue"   : color = Colors.Blue;   break;
            }

            TextRange textRange = new TextRange()
            {
                StartIndex = 28,
                Length     = 11
            };

            TextHighlighter textHighlighter = new TextHighlighter()
            {
                Background = new SolidColorBrush(color),
                Ranges     = { textRange }
            };

            this.richTextBlock.TextHighlighters.Clear();

            this.richTextBlock.TextHighlighters.Add(textHighlighter);
        }

        #endregion
    }
}

100

101

102

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Documents;

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 = "RichTextBlock 엘리먼트 : TextHighlighters 속성 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 텍스트 하이라이트 색상 콤보 박스 선택 변경시 처리하기 - textHighlightColorCombobox_SelectionChanged(sender, e)

/// <summary>

/// 텍스트 하이라이트 색상 콤보 박스 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void textHighlightColorCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

ComboBox comboBox = sender as ComboBox;

ComboBoxItem item = comboBox.SelectedItem as ComboBoxItem;

Color color = Colors.Yellow;

switch(item.Content as string)

{

case "Yellow" : color = Colors.Yellow; break;

case "Red" : color = Colors.Red; break;

case "Blue" : color = Colors.Blue; break;

}

TextRange textRange = new TextRange()

{

StartIndex = 28,

Length = 11

};

TextHighlighter textHighlighter = new TextHighlighter()

{

Background = new SolidColorBrush(color),

Ranges = { textRange }

};

this.richTextBlock.TextHighlighters.Clear();

this.richTextBlock.TextHighlighters.Add(textHighlighter);

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RichTextBlockOverflow 엘리먼트 사용하기

■ RichTextBlockOverflow 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="50">
        <Grid Height="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <RichTextBlock Grid.Column="0"
                Margin="10 0"
                OverflowContentTarget="{x:Bind firstRichTextBlockOverflow}"
                TextAlignment="Justify">
                <Paragraph>
Linked text containers allow text which does not fit in one element to overflow into a different element on the page.
Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.
                </Paragraph>
                <Paragraph>
Duis sed nulla metus, id hendrerit velit.
Curabitur dolor purus, bibendum eu cursus lacinia, interdum vel augue.
Aenean euismod eros et sapien vehicula dictum.
Duis ullamcorper, turpis nec feugiat tincidunt, dui erat luctus risus, aliquam accumsan lacus est vel quam.
Nunc lacus massa, varius eget accumsan id, congue sed orci.
Duis dignissim hendrerit egestas.
Proin ut turpis magna, sit amet porta erat.
Nunc semper metus nec magna imperdiet nec vestibulum dui fringilla.
Sed sed ante libero, nec porttitor mi.
Ut luctus, neque vitae placerat egestas, urna leo auctor magna, sit amet ultricies ipsum felis quis sapien.
Proin eleifend varius dui, at vestibulum nunc consectetur nec.
Mauris nulla elit, ultrices a sodales non, aliquam ac est.
Quisque sit amet risus nulla.
Quisque vestibulum posuere velit, vitae vestibulum eros scelerisque sit amet.
In in risus est, at laoreet dolor.
Nullam aliquet pellentesque convallis. Ut vel tincidunt nulla.
Mauris auctor tincidunt auctor.
Aenean orci ante, vulputate ac sagittis sit amet, consequat at mi.
Morbi elementum purus consectetur nisi adipiscing vitae blandit sapien placerat.
Aliquam adipiscing tortor non sem lobortis consectetur mattis felis rhoncus.
Nunc eu nunc rhoncus arcu sollicitudin ultrices.
In vulputate eros in mauris aliquam id dignissim nisl laoreet.
                </Paragraph>
            </RichTextBlock>
            <RichTextBlockOverflow Name="firstRichTextBlockOverflow" Grid.Column="1"
                Margin="10 0"
                OverflowContentTarget="{x:Bind secondRichTextBlockOverflow}" />
            <RichTextBlockOverflow Name="secondRichTextBlockOverflow" Grid.Column="2"
                Margin="10 0" />
        </Grid>
    </Grid>
</Page>

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

</Grid.ColumnDefinitions>

<RichTextBlock Grid.Column="0"

Margin="10 0"

OverflowContentTarget="{x:Bind firstRichTextBlockOverflow}"

TextAlignment="Justify">

Linked text containers allow text which does not fit in one element to overflow into a different element on the page.

Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.

</Paragraph>

Duis sed nulla metus, id hendrerit velit.

Curabitur dolor purus, bibendum eu cursus lacinia, interdum vel augue.

Aenean euismod eros et sapien vehicula dictum.

Duis ullamcorper, turpis nec feugiat tincidunt, dui erat luctus risus, aliquam accumsan lacus est vel quam.

Nunc lacus massa, varius eget accumsan id, congue sed orci.

Duis dignissim hendrerit egestas.

Proin ut turpis magna, sit amet porta erat.

Nunc semper metus nec magna imperdiet nec vestibulum dui fringilla.

Sed sed ante libero, nec porttitor mi.

Ut luctus, neque vitae placerat egestas, urna leo auctor magna, sit amet ultricies ipsum felis quis sapien.

Proin eleifend varius dui, at vestibulum nunc consectetur nec.

Mauris nulla elit, ultrices a sodales non, aliquam ac est.

Quisque sit amet risus nulla.

Quisque vestibulum posuere velit, vitae vestibulum eros scelerisque sit amet.

In in risus est, at laoreet dolor.

Nullam aliquet pellentesque convallis. Ut vel tincidunt nulla.

Mauris auctor tincidunt auctor.

Aenean orci ante, vulputate ac sagittis sit amet, consequat at mi.

Morbi elementum purus consectetur nisi adipiscing vitae blandit sapien placerat.

Aliquam adipiscing tortor non sem lobortis consectetur mattis felis rhoncus.

Nunc eu nunc rhoncus arcu sollicitudin ultrices.

In vulputate eros in mauris aliquam id dignissim nisl laoreet.

</Paragraph>

</RichTextBlock>

<RichTextBlockOverflow Name="firstRichTextBlockOverflow" Grid.Column="1"

Margin="10 0"

OverflowContentTarget="{x:Bind secondRichTextBlockOverflow}" />

<RichTextBlockOverflow Name="secondRichTextBlockOverflow" Grid.Column="2"

Margin="10 0" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "RichTextBlockOverflow 엘리먼트 사용하기";

            #endregion
        }

        #endregion

    }
}

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 = "RichTextBlockOverflow 엘리먼트 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RichTextBlock 엘리먼트 사용하기

■ RichTextBlock 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<RichTextBlock SelectionHighlightColor="Green">
    <Paragraph>
        RichTextBlock provides a rich text display container that supports
        <Run FontStyle="Italic" FontWeight="Bold">formatted text</Run>,
        <Hyperlink NavigateUri="https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Documents.Hyperlink">
            hyperlinks
        </Hyperlink>, inline images, and other rich content.
    </Paragraph>
    <Paragraph>RichTextBlock also supports a built-in overflow model.</Paragraph>
</RichTextBlock>

RichTextBlock provides a rich text display container that supports

<Run FontStyle="Italic" FontWeight="Bold">formatted text</Run>,

hyperlinks

</Hyperlink>, inline images, and other rich content.

</Paragraph>

<Paragraph>RichTextBlock also supports a built-in overflow model.</Paragraph>

</RichTextBlock>

[C#/WINUI2.5] RichTextBlock 엘리먼트 사용하기

■ RichTextBlock 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<RichTextBlock>
    <Paragraph>I am a RichTextBlock.</Paragraph>
</RichTextBlock>

<Paragraph>I am a RichTextBlock.</Paragraph>

</RichTextBlock>

[C#/WINUI2.5] RichEditBox 엘리먼트 : 커스텀 에디터 사용하기

■ RichEditBox 엘리먼트에서 커스텀 에디터를 사용하는 방법을 보여준다. ▶ 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"
    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="&#xE8E5;" />
                </Button.Content>
            </Button>
            <Button
                RelativePanel.RightOf="openFileButton"
                ToolTipService.ToolTip="파일 저장하기"
                Click="saveFileButton_Click">
                <Button.Content>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74E;" />
                </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="&#xE8DB;" />
                </Button.Content>
            </Button>
            <Button
                RelativePanel.LeftOf="italicButton"
                ToolTipService.ToolTip="Bold"
                Click="boldButton_Click">
                <Button.Content>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8DD;" />
                </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>

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>

</Style>

<ResourceDictionary.ThemeDictionaries>

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

</ResourceDictionary>

</RelativePanel.Resources>

<Button Name="openFileButton"

ToolTipService.ToolTip="파일 열기"

Click="openFileButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button

RelativePanel.RightOf="openFileButton"

ToolTipService.ToolTip="파일 저장하기"

Click="saveFileButton_Click">

<Button.Content>

</Button.Content>

</Button>

<muxc:DropDownButton Name="fontColorButton"

RelativePanel.AlignRightWithPanel="True"

BorderThickness="0"

Background="Transparent"

ToolTipService.ToolTip="폰트 색상">

<muxc:DropDownButton.Flyout>

<VariableSizedWrapGrid

Orientation="Horizontal"

MaximumRowsOrColumns="3">

<VariableSizedWrapGrid.Resources>

</Style>

</Style>

</VariableSizedWrapGrid.Resources>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

<Button.Content>

</Button.Content>

</Button>

</VariableSizedWrapGrid>

</Flyout>

</muxc:DropDownButton.Flyout>

</muxc:DropDownButton>

<Button Name="italicButton"

RelativePanel.LeftOf="fontColorButton"

Click="italicButton_Click"

ToolTipService.ToolTip="Italic">

<Button.Content>

</Button.Content>

</Button>

<Button

RelativePanel.LeftOf="italicButton"

ToolTipService.ToolTip="Bold"

Click="boldButton_Click">

<Button.Content>

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


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

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


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

<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


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

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


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

<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


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

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


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

<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


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

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


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

<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


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

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


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

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

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

</Page>

▶ MainPage.xaml.cs


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

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


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

<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


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

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


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

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


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

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


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

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


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

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


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

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

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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


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

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

</Page.Resources>

<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


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

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


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

<Page x:Class="TestProject.SampleStandardSizingPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<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


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

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


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

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>

<ColorPicker Name="primaryColorPicker"

IsColorChannelTextInputVisible="False"

IsHexInputVisible="False"

Color="{StaticResource SystemAltHighColor}" />

<Grid

RelativePanel.Below="primaryColorPicker"

RelativePanel.AlignLeftWithPanel="True"

RelativePanel.AlignRightWithPanel="True">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button

HorizontalAlignment="Stretch"

Margin="0 10 0 0"

Content="확인"

Click="confirmationButton_Click" />

</Grid>

</RelativePanel>

</Flyout>

<ColorPicker x:Name="secondaryColorPicker"

IsColorChannelTextInputVisible="False"

IsHexInputVisible="False"

Color="{StaticResource SystemBaseHighColor}" />

<Grid

RelativePanel.Below="secondaryColorPicker"

RelativePanel.AlignLeftWithPanel="True"

RelativePanel.AlignRightWithPanel="True">

<Grid.ColumnDefinitions>

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

</Grid.ColumnDefinitions>

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

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

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

</Page>

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

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

(

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


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

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

</Page.Resources>

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

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

</Page>

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

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

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

(

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


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

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

</Page>

▶ MainPage.xaml.cs


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

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


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

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

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="1 2 0 0"

Icon="World" />

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="0 2 1 0"

Icon="CellPhone" />

</StackPanel>

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="1 2 0 2"

Icon="Delete" />

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="0 2 1 2"

Icon="Comment" />

</StackPanel>

</Grid>

<Grid

HorizontalAlignment="Center"

Margin="5"

Background="{ThemeResource CustomAcrylicBrushKey}"

RequestedTheme="Light">

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="1 2 0 0"

Icon="World" />

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="0 2 1 0"

Icon="CellPhone" />

</StackPanel>

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="1 2 0 2"

Icon="Delete" />

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="0 2 1 2"

Icon="Comment" />

</StackPanel>

</Grid>

<Grid

HorizontalAlignment="Center"

Margin="5"

Background="{ThemeResource CustomDarkAcrylicBrushKey}"

RequestedTheme="Dark">

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="1 2 0 0"

Icon="World" />

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="0 2 1 0"

Icon="CellPhone" />

</StackPanel>

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="1 2 0 2"

Icon="Delete" />

<AppBarButton

Style="{ThemeResource AppBarButtonRevealStyle}"

Margin="0 2 1 2"

Icon="Comment" />

</StackPanel>

</Grid>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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


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

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

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

</media:RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

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

</Page>

▶ MainPage.xaml.cs


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

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


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

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

<media:AcrylicBrush x:Key="CustomAcrylicBrushKey"

BackgroundSource="Backdrop"

TintOpacity="0.8"

TintColor="SkyBlue"

FallbackColor="SkyBlue" />

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

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

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

<Slider Name="tintOpacitySlider"

Width="200"

Minimum="0"

Maximum="1"

SmallChange="0.001"

StepFrequency="0.001"

IsFocusEngagementEnabled="False"

ValueChanged="tintOpacitySlider_ValueChanged" />

<Slider Name="tintLuminosityOpacitySlider"

Width="200"

Minimum="0"

Maximum="1"

SmallChange="0.001"

StepFrequency="0.001"

IsFocusEngagementEnabled="False"

ValueChanged="tintLuminosityOpacitySlider_ValueChanged" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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