WPF에서 잉크 시작

아티클
05/04/2023

WPF(Windows Presentation Foundation)에는 디지털 잉크를 앱에 쉽게 통합할 수 있는 잉크 기능이 있습니다.

사전 요구 사항

다음 예제를 사용하려면 먼저 Visual Studio를 설치해야 합니다. 기본 WPF 앱을 작성하는 방법을 아는 데도 도움이 됩니다. WPF를 쉽게 시작하고 싶다면 연습: 내 첫 번째 WPF 데스크톱 애플리케이션을 참조하세요.

빠른 시작

이 섹션은 잉크를 수집하는 간단한 WPF 애플리케이션을 작성하는 데 도움이 됩니다.

잉크가 있나요?

잉크를 지원하는 WPF 앱을 만들려면 다음을 수행하세요.

Visual Studio를 엽니다.
새 WPF 앱을 만듭니다.

새 프로젝트 대화 상자에서 설치된>Visual C# 또는 Visual Basic>Windows Desktop 범주를 확장합니다. 그런 다음 WPF 앱(.NET Framework) 앱 템플릿을 선택합니다. 이름을 입력하고 확인을 선택합니다.

Visual Studio에서 프로젝트를 만들고, MainWindow.xaml이 디자이너에서 열립니다.
<Grid> 태그 사이에 <InkCanvas/>를 입력합니다.
F5를 눌러 디버거에서 애플리케이션을 실행합니다.
스타일러스나 마우스를 사용하여 창에 hello world를 작성합니다.

키를 겨우 12번 입력해서 "hello world" 애플리케이션에 해당하는 잉크를 작성했습니다.

앱 꾸미기

WPF의 일부 기능을 활용해 보겠습니다. <창> 열기 및 닫기 태그 사이의 모든 항목을 다음 태그로 바꿉니다.

<Page>
  <InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">
    <InkCanvas.Background>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Blue" Offset="0.5" />
            <GradientStop Color="HotPink" Offset="1.0" />
              </LinearGradientBrush>
    </InkCanvas.Background>
  </InkCanvas>
</Page>

이 XAML은 수동 입력 화면에 그라데이션 브러시 배경을 만듭니다.

WPF 앱의 잉크 입력 면에 그라데이션 컬러

XAML 뒤에 일부 코드 추가

XAML을 사용하면 사용자 인터페이스를 매우 쉽게 디자인할 수 있지만, 모든 실제 애플리케이션에서는 이벤트를 처리하는 코드를 추가해야 합니다. 다음은 마우스 오른쪽 단추를 클릭하면 잉크를 확대하는 간단한 예제입니다.

XAML에서 MouseRightButtonUp 처리기를 설정합니다.

<InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">

솔루션 탐색기에서 MainWindow.xaml을 확장하고 코드 숨김 파일(MainWindow.xaml.cs 또는 MainWindow.xaml.vb) 파일을 엽니다. 다음 이벤트 처리기 코드를 추가합니다.

private void RightMouseUpHandler(object sender,
                                 System.Windows.Input.MouseButtonEventArgs e)
{
    Matrix m = new Matrix();
    m.Scale(1.1d, 1.1d);
    ((InkCanvas)sender).Strokes.Transform(m, true);
}

Private Sub RightMouseUpHandler(ByVal sender As Object, _
                                ByVal e As System.Windows.Input.MouseButtonEventArgs)

    Dim m As New Matrix()
    m.Scale(1.1, 1.1)
    CType(sender, InkCanvas).Strokes.Transform(m, True)

End Sub

애플리케이션을 실행합니다. 잉크를 추가한 다음 마우스 오른쪽 단추로 클릭하거나 스타일러스를 이용해 누르고 있기를 수행합니다.

마우스 오른쪽 단추로 클릭할 때마다 화면이 확대됩니다.

XAML 대신 프로시저 코드 사용

프로시저 코드에서 모든 WPF 기능에 액세스할 수 있습니다. 다음 단계에 따라 XAML을 전혀 사용하지 않는 WPF용 "Hello Ink World" 애플리케이션을 만듭니다.

Visual Studio에서 새 콘솔 애플리케이션 프로젝트를 만듭니다.

새 프로젝트 대화 상자에서 설치된>Visual C# 또는 Visual Basic>Windows Desktop 범주를 확장합니다. 그런 다음 콘솔 앱(.NET Framework) 앱 템플릿을 선택합니다. 이름을 입력하고 확인을 선택합니다.

Program.cs 또는 Program.vb 파일에 다음 코드를 붙여넣습니다.

using System;
using System.Windows;
using System.Windows.Controls;
class Program : Application
{
    Window win;
    InkCanvas ic;

    protected override void OnStartup(StartupEventArgs args)
    {
        base.OnStartup(args);
        win = new Window();
        ic = new InkCanvas();
        win.Content = ic;
        win.Show();
    }

    [STAThread]
    static void Main(string[] args)
    {
        new Program().Run();
    }
}

Imports System.Windows
Imports System.Windows.Controls


Class Program
    Inherits Application
    Private win As Window
    Private ic As InkCanvas


    Protected Overrides Sub OnStartup(ByVal args As StartupEventArgs)
        MyBase.OnStartup(args)
        win = New Window()
        ic = New InkCanvas()
        win.Content = ic
        win.Show()

    End Sub

End Class

Module Module1

    Sub Main()
        Dim prog As New Program()
        prog.Run()

    End Sub

End Module

솔루션 탐색기에서 참조를 마우스 오른쪽 단추로 클릭하고 참조 추가를 선택하여 PresentationCore, PresentationFramework 및 WindowsBase 어셈블리에 대한 참조를 추가합니다.
F5를 눌러 애플리케이션을 빌드합니다.