InkPresenter 방명록 만들기 - 1. InkPresenter 객체 겉핥기


1. InkPresenter 객체 겉핥기 (InkPresenter XAML 구조)
2. InkPresenter를 사용한 간단한 샘플 만들어보기 (작동완구)
3. Undo & Redo 구현하기
4. InkPresenter User Control 만들기
5. Color Palette User Control 만들기
6. Ink Thickness Palette User Control 만들기
7. HTTP Request와 Response를 이용하여 정보 교환하기 (Get, Post 전송)
8. Page Navigation User Control 만들기

올해 마지막 당일치기 예비군 훈련 다녀왔습니다. ^^

1) InkPresenter XAML

사용자 삽입 이미지













일단 위와 같이 간단하게 두 획을 그은 경우를 예를 들어 설명을 드리겠습니다.

기본적으로 InkPresenter 객체는 배경색을 주지 않으면 투명하게 존재합니다.

즉, 동영상(MediaElement)이나 사진(Image)을 배경으로 구현하는 것도 가능하다는 것입니다.


위 그림에 대한 XAML을 살펴 보겠습니다.

   <InkPresenter Width="190" Height="190" Background="#FFB7E31D">
    <InkPresenter.Strokes>
      <Stroke>
        <Stroke.DrawingAttributes>
          <DrawingAttributes Color="#FFFFFFFF" Width="9" Height="9"/>
        </Stroke.DrawingAttributes>
        <Stroke.StylusPoints>
          <StylusPoint X="70" Y="75"/>
          <StylusPoint X="71" Y="75"/>
          <StylusPoint X="71" Y="76"/>
          <StylusPoint X="72" Y="76"/>
          <StylusPoint X="72" Y="77"/>
          <StylusPoint X="73" Y="78"/>
          <StylusPoint X="74" Y="79"/>
          <StylusPoint X="74" Y="80"/>
          <StylusPoint X="75" Y="81"/>
        </Stroke.StylusPoints>
      </Stroke>
      <Stroke>
        <Stroke.DrawingAttributes>
          <DrawingAttributes Color="#FF000000" Width="9" Height="9"/>
        </Stroke.DrawingAttributes>
        <Stroke.StylusPoints>
          <StylusPoint X="85" Y="83"/>
          <StylusPoint X="85" Y="82"/>
          <StylusPoint X="86" Y="81"/>
          <StylusPoint X="87" Y="80"/>
          <StylusPoint X="88" Y="79"/>
          <StylusPoint X="90" Y="78"/>
          <StylusPoint X="90" Y="77"/>
        </Stroke.StylusPoints>
      </Stroke>
    </InkPresenter.Strokes>
  </InkPresenter>


InkPresenter는 Stroke들의 Collection이라고 보시면 되구요.

Stroke는 한 획이라고 보시면 됩니다. (= 한 번의 클릭으로 그려지는 단위)


한 Stroke는 DrawingAttributes와 StylusPoints로 이루어 집니다.

DrawingAttributes를 통해 Ink의 Width, HeightColor를 설정할 수 있습니다.

StylusPoints는 마우스 움직이는 동안에 일정 Frequency로 샘플링된 점들의 집합이라고 보시면 됩니다.

타블렛에서 스타일러스를 사용해서 그리게 되면 좀더 많은 점을 샘플링하기 때문에 부드러운 그림이 그려지게 됩니다.



주의) 위 XAML코드는 Expression Blend에서 Invalid XAML 에러가 납니다.

하지만 실행시켜보면 화면에는 정상적으로 보여집니다. 버그일까요?


사용자 삽입 이미지












2) Expression Blend에서 InkPresenter 객체 추가하기

Visual Studio의 XAML 코드편집창에 <InkPresenter> 태그를 직접 입력해서 추가하시거나.

C# 코드로 동적으로 생성하셔도 되지만, 뭐니뭐니해도 Blend를 써서 하는게 디자인하기는 편하겠죠!



  A. Expression Blend를 실행시키고 왼쪽의 세로 Toolbar의 맨 아래쪽 Asset Library 버튼을 누릅니다.


  

사용자 삽입 이미지



  B. 오른쪽 위에 있는 Show All 체크 박스를 체크하시고, InkPresenter를 선택합니다.


사용자 삽입 이미지


  C. 왼쪽 세로 ToolBar에 InkPresenter 아이콘이 추가된 모습을 확인하실 수 있습니다.


사용자 삽입 이미지



  D. InkPresenter 아이콘을 클릭하고 Rectangle이나 Canvas를 추가하듯 추가합니다.


사용자 삽입 이미지



3) 특징 (주의할 점)


객체 간에 존재하는 z-index 순위 상 맨 앞에 위치할 경우에만 제대로 작동합니다.

즉, 다른 객체에 의해서 덮히면 제기능이 작동 하지 않습니다.

(혹시, z-index가 같은 객체끼리 섞여 있다면 맨 마지막에 추가되어야 합니다.)


필요에 의해서 z-index를 하위로 변경해 놓을 수는 있지만, 실제 InkPresenter 기능을 이용하려고 할 때는

동적으로 화면 맨 앞으로 위치시켜 주셔야 합니다.


InkPresenter에 획을 긋는 것은 다음 시간에~


설정

트랙백

댓글