잉크 시작

아티클
08/10/2011

응용 프로그램에 디지털 잉크 기능을 통합하는 것이 훨씬 쉬워졌습니다. 잉크는 WPF와의 완벽한 통합을 위해 자연스럽게 프로그래밍 방식의 COM 및 Windows Forms 메서드로 발전했습니다. 따라서 별도로 SDK나 런타임 라이브러리를 설치할 필요가 없습니다.

사전 요구 사항

다음 예제를 사용하려면 먼저 Microsoft Visual Studio 2005와 Windows SDK를 설치해야 합니다. 또한 WPF용 응용 프로그램을 작성하는 방법을 알고 있어야 합니다. WPF를 시작하는 방법에 대한 자세한 내용은 연습: WPF 시작을 참조하십시오.

퀵 스타트

이 단원에는 잉크를 수집하는 간단한 WPF 응용 프로그램을 작성하는 방법에 대한 유용한 정보가 나와 있습니다.

아직 Microsoft Visual Studio 2005 및 Windows Software Development Kit (SDK)를 설치하지 않았다면 지금 설치하십시오. WPF 응용 프로그램은 대개 컴파일해야만 볼 수 있습니다. 이것은 응용 프로그램이 Extensible Application Markup Language (XAML)만으로 구성된 경우에도 마찬가지입니다. 하지만 Windows Software Development Kit (SDK)에는 XAML 기반 UI를 구현하는 프로세스를 빠르게 처리할 수 있도록 디자인된 응용 프로그램인 XamlPad가 포함되어 있습니다. 이 응용 프로그램을 사용하면 이 문서의 앞부분에 있는 몇 가지 샘플을 보고 샘플을 사용하여 실습해 볼 수 있습니다. XAML에서 컴파일된 응용 프로그램을 만드는 프로세스에 대해서는 이 문서의 뒷부분에서 다룹니다.

XAMLPad를 시작하려면 시작 메뉴를 클릭하고 모든 프로그램, Microsoft Windows SDK, 도구를 차례로 가리킨 다음 XAMLPad를 클릭합니다. XAMLPad는 코드 창에서 작성한 XAML 코드를 렌더링 창에서 렌더링합니다. XAML 코드를 편집하면 렌더링 창에 변경 사항이 즉시 나타납니다.

잉크 사용

잉크를 지원하는 WPF 응용 프로그램을 처음으로 만들어서 시작하려면 다음과 같이 하십시오.

Microsoft Visual Studio 2005를 엽니다.
새 **Windows 응용 프로그램(WPF)**을 만듭니다.
<Grid> 태그 사이에 <InkCanvas/>를 입력합니다.
F5 키를 눌러 디버거에서 응용 프로그램을 시작합니다.
스타일러스나 마우스를 사용하여 창에 hello world를 씁니다.

"hello world"에 대한 잉크 응용 프로그램을 12번의 키 입력만으로 만들었습니다.

응용 프로그램 꾸미기

WPF의 몇 가지 기능을 이용해 보겠습니다. 여는 <Window> 태그와 닫는 </Window> 태그 사이에 있는 모든 요소를 다음 태그로 교체하여 잉크 기능으로 그려지는 표면에 그라데이션 브러시 배경을 추가합니다.

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


...


</Page>

애니메이션 사용

재미를 위해 그라데이션 브러시의 색에 애니메이션 효과를 추가해 봅니다. 닫는 </InkCanvas> 태그와 닫는 </Page> 태그 사이에 다음과 같은 XAML을 추가합니다.

<Page.Triggers>
  <EventTrigger RoutedEvent="Page.Loaded">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <ColorAnimation  Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
          From="Yellow" To="Blue" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
          From="Blue" To="Red" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
          From="Green" To="Blue" Duration="0:0:5"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Page.Triggers>

XAML에 몇 가지 코드 추가

XAML을 사용하면 사용자 인터페이스를 매우 쉽게 디자인할 수 있지만 실제 응용 프로그램에는 이벤트를 처리하는 코드를 추가해야 합니다. 다음은 마우스 오른쪽 단추를 클릭하여 잉크를 확대하는 단순한 예제입니다.

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

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

Visual Studio의 솔루션 탐색기에서 Windows1.xaml을 확장하고 코드 숨김 파일인 Window1.xaml.cs(Visual Basic을 사용하는 경우 Window1.xaml.vb)를 엽니다. 다음 이벤트 처리기 코드를 추가합니다.

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

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

이제 응용 프로그램을 실행합니다. 잉크를 추가한 후 마우스 오른쪽 단추로 잉크를 클릭하거나 스타일러스로 이와 동등한 누르고 있기 동작을 수행합니다.

XAML 대신 프로시저 코드 사용

프로시저 코드에서 모든 WPF 기능에 액세스할 수 있습니다. 다음은 XAML을 전혀 사용하지 않는 WPF용 "Hello Ink World" 응용 프로그램입니다. Visual Studio에서 다음 코드를 빈 콘솔 응용 프로그램에 붙여 넣습니다. PresentationCore, PresentationFramework 및 WindowsBase 어셈블리에 대한 참조를 추가하고 F5 키를 눌러 응용 프로그램을 빌드합니다.

Imports System
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 'OnStartup

End Class 'Program

Module Module1

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

    End Sub

End Module

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();
    }
}