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

■ InkCanvas 엘리먼트를 사용하는 방법을 보여준다.

▶ 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>
            <Grid Grid.Column="0"
                Width="300"
                Height="300"
                BorderThickness="1"
                BorderBrush="Gray"
                Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}">
                <InkCanvas Name="inkCanvas" />
            </Grid>
            <StackPanel Grid.Column="2"
                Width="180"
                Spacing="10">
                <ComboBox Name="penColorComboBox"
                    Header="펜 색상"
                    SelectedIndex="0"
                    SelectionChanged="penColorComboBox_SelectionChanged">
                    <x:String>검정색</x:String>
                    <x:String>빨간색</x:String>
                    <x:String>파란색</x:String>
                    <x:String>녹색</x:String>
                </ComboBox>
                <Slider Name="strokeSizeSlider"
                    Header="스트로크 크기"
                    IsFocusEngagementEnabled="False"
                    Minimum="1"
                    Maximum="20"
                    Value="5"
                    ValueChanged="strokeSizeSlider_ValueChanged" />
                <CheckBox Name="drawAsHighlighterCheckBox"
                    Content="하이라이트 그리기"
                    IsChecked="False"
                    Checked="drawAsHighlighterCheckBox_Checked"
                    Unchecked="drawAsHighlighterCheckBox_Checked" />
                <muxc:RadioButtons Header="펜 팁">
                    <RadioButton Name="circlePenTipRadioButton"
                        Content="원"
                        Checked="penTipRadioButton_Checked"
                        IsChecked="True" />
                    <RadioButton Name="rectanglePenTipRadioButton"
                        Content="사각형"
                        Checked="penTipRadioButton_Checked" />
                </muxc:RadioButtons>
                <Button
                    Content="모두 지우기"
                    Click="clearAllButton_Click" />
            </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:muxc="using:Microsoft.UI.Xaml.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Grid.Column="0"

Width="300"

Height="300"

BorderThickness="1"

BorderBrush="Gray"

Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}">

</Grid>

<StackPanel Grid.Column="2"

Width="180"

Spacing="10">

<ComboBox Name="penColorComboBox"

Header="펜 색상"

SelectedIndex="0"

SelectionChanged="penColorComboBox_SelectionChanged">

<x:String>검정색</x:String>

<x:String>빨간색</x:String>

<x:String>파란색</x:String>

<x:String>녹색</x:String>

</ComboBox>

<Slider Name="strokeSizeSlider"

Header="스트로크 크기"

IsFocusEngagementEnabled="False"

Minimum="1"

Maximum="20"

Value="5"

ValueChanged="strokeSizeSlider_ValueChanged" />

<CheckBox Name="drawAsHighlighterCheckBox"

Content="하이라이트 그리기"

IsChecked="False"

Checked="drawAsHighlighterCheckBox_Checked"

Unchecked="drawAsHighlighterCheckBox_Checked" />

<muxc:RadioButtons Header="펜 팁">

<RadioButton Name="circlePenTipRadioButton"

Content="원"

Checked="penTipRadioButton_Checked"

IsChecked="True" />

<RadioButton Name="rectanglePenTipRadioButton"

Content="사각형"

Checked="penTipRadioButton_Checked" />

</muxc:RadioButtons>

<Button

Content="모두 지우기"

Click="clearAllButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI;
using Windows.UI.Core;
using Windows.UI.Input.Inking;
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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 잉크 프리젠터
        /// </summary>
        private InkPresenter inkPresenter;

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

            #endregion

            this.inkPresenter = this.inkCanvas.InkPresenter;

            this.inkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;

            UpdatePen();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 펜 색상 콤보 박스 선택 변경시 처리하기 - penColorComboBox_SelectionChanged(sender, e)

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

        #endregion
        #region 스트로크 크기 슬라이더 값 변경시 처리하기 - strokeSizeSlider_ValueChanged(sender, e)

        /// <summary>
        /// 스트로크 크기 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void strokeSizeSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            UpdatePen();
        }

        #endregion
        #region 하이라이트 그리기 체크 박스 체크시 처리하기 - drawAsHighlighterCheckBox_Checked(sender, e)

        /// <summary>
        /// 하이라이트 그리기 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void drawAsHighlighterCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            UpdatePen();
        }

        #endregion
        #region 펜 팁 라디오 버튼 체크시 처리하기 - penTipRadioButton_Checked(sender, outedEventArgs e)

        /// <summary>
        /// 펜 팁 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void penTipRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            UpdatePen();
        }

        #endregion
        #region 모두 지우기 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e)

        /// <summary>
        /// 모두 지우기 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void clearAllButton_Click(object sender, RoutedEventArgs e)
        {
            this.inkPresenter.StrokeContainer.Clear();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 펜 업데이트하기 - UpdatePen()

        /// <summary>
        /// 펜 업데이트하기
        /// </summary>
        private void UpdatePen()
        {
            if(this.inkPresenter != null)
            {
                InkDrawingAttributes defaultAttributes = this.inkPresenter.CopyDefaultDrawingAttributes();

                switch(this.penColorComboBox.SelectedValue.ToString())
                {
                    case "검정색" : defaultAttributes.Color = Colors.Black; break;
                    case "빨간색" : defaultAttributes.Color = Colors.Red;   break;
                    case "파란색" : defaultAttributes.Color = Colors.Blue;  break;
                    case "녹색"   : defaultAttributes.Color = Colors.Green; break;
                }

                defaultAttributes.Size              = new Size(this.strokeSizeSlider.Value, this.strokeSizeSlider.Value);
                defaultAttributes.DrawAsHighlighter = this.drawAsHighlighterCheckBox.IsChecked.Value;
                defaultAttributes.PenTip            = (bool)this.circlePenTipRadioButton.IsChecked ? PenTipShape.Circle : PenTipShape.Rectangle;

                this.inkPresenter.UpdateDefaultDrawingAttributes(defaultAttributes);
            }
        }

        #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

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI;

using Windows.UI.Core;

using Windows.UI.Input.Inking;

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

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 잉크 프리젠터

/// </summary>

private InkPresenter inkPresenter;

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

#endregion

this.inkPresenter = this.inkCanvas.InkPresenter;

this.inkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;

UpdatePen();

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 펜 색상 콤보 박스 선택 변경시 처리하기 - penColorComboBox_SelectionChanged(sender, e)

/// <summary>

/// 펜 색상 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void penColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

UpdatePen();

}

#endregion

#region 스트로크 크기 슬라이더 값 변경시 처리하기 - strokeSizeSlider_ValueChanged(sender, e)

/// <summary>

/// 스트로크 크기 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void strokeSizeSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

UpdatePen();

}

#endregion

#region 하이라이트 그리기 체크 박스 체크시 처리하기 - drawAsHighlighterCheckBox_Checked(sender, e)

/// <summary>

/// 하이라이트 그리기 체크 박스 체크시 처리하기

/// </summary>

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

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

private void drawAsHighlighterCheckBox_Checked(object sender, RoutedEventArgs e)

{

UpdatePen();

}

#endregion

#region 펜 팁 라디오 버튼 체크시 처리하기 - penTipRadioButton_Checked(sender, outedEventArgs e)

/// <summary>

/// 펜 팁 라디오 버튼 체크시 처리하기

/// </summary>

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

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

private void penTipRadioButton_Checked(object sender, RoutedEventArgs e)

{

UpdatePen();

}

#endregion

#region 모두 지우기 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e)

/// <summary>

/// 모두 지우기 버튼 클릭시 처리하기

/// </summary>

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

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

private void clearAllButton_Click(object sender, RoutedEventArgs e)

{

this.inkPresenter.StrokeContainer.Clear();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 펜 업데이트하기 - UpdatePen()

/// <summary>

/// 펜 업데이트하기

/// </summary>

private void UpdatePen()

{

if(this.inkPresenter != null)

{

InkDrawingAttributes defaultAttributes = this.inkPresenter.CopyDefaultDrawingAttributes();

switch(this.penColorComboBox.SelectedValue.ToString())

{

case "검정색" : defaultAttributes.Color = Colors.Black; break;

case "빨간색" : defaultAttributes.Color = Colors.Red; break;

case "파란색" : defaultAttributes.Color = Colors.Blue; break;

case "녹색" : defaultAttributes.Color = Colors.Green; break;

}

defaultAttributes.Size = new Size(this.strokeSizeSlider.Value, this.strokeSizeSlider.Value);

defaultAttributes.DrawAsHighlighter = this.drawAsHighlighterCheckBox.IsChecked.Value;

defaultAttributes.PenTip = (bool)this.circlePenTipRadioButton.IsChecked ? PenTipShape.Circle : PenTipShape.Rectangle;

this.inkPresenter.UpdateDefaultDrawingAttributes(defaultAttributes);

}

#endregion

}

TestProject.zip