잉크 입력 컨트롤

Windows 앱에서 수동 입력을 간편하게 하는 두 가지 컨트롤은 InkCanvasInkToolbar입니다.

InkCanvas 컨트롤을 사용하여 펜 입력을 잉크 스트로크(색 및 두께에 대한 기본 설정 사용) 또는 지우기 스트로크로 렌더링합니다. 이 컨트롤은 투명한 오버레이로 기본 잉크 스트로크 속성을 변경하는 데 필요한 빌트인 UI를 포함하지 않습니다.

참고 항목

InkCanvas는 구성을 통해 마우스 및 터치 입력 모두에 대해 유사한 기능을 지원할 수 있습니다.

InkCanvas 컨트롤에는 기본 잉크 스트로크 설정 변경에 대한 지원이 포함되지 않으므로 InkToolbar 컨트롤과 페어링할 수 있습니다. InkToolbar는 연결된 InkCanvas에서 잉크 관련 기능을 활성화하는 사용자 지정 및 확장 가능한 단추 버튼을 포함합니다.

기본적으로 InkToolbar에는 그리기, 지우기, 강조 표시 및 눈금자 표시 버튼이 모두 있습니다. 기능에 따라 잉크 색, 스트로크 두께, 모든 잉크 지우기 등의 기타 설정 및 명령이 플라이아웃에 제공됩니다.

참고 항목

InkToolbar는 펜 및 마우스 입력을 지원하며, 구성을 통해 터치 입력을 인식할 수도 있습니다.

InkToolbar palette flyout

올바른 컨트롤인가요?

사용자에게 잉크 설정을 제공하지 않고 앱에서 기본 수동 입력 기능을 사용하도록 설정해야 하는 경우 InkCanvas를 사용합니다.

기본적으로 스트로크는 펜 팁(두께가 2픽셀인 검은색 볼펜)을 사용할 때 잉크로 렌더링되고 지우개 팁을 사용할 때 지우개로 렌더링됩니다. 지우개 팁이 없는 경우, 구성을 통해 InkCanvas로 펜 팁의 입력을 지우기 스트로크로서 사용할 수 있습니다.

InkCanvas를 InkToolbar와 페어링하여 잉크 기능을 활성화하고 펜 팁의 스트로크 크기, 색 및 모양과 같은 기본 잉크 속성을 설정하는 UI를 제공합니다.

참고 항목

InkCanvas에서 잉크 스트로크 렌더링을 보다 광범위하게 사용자 지정하려면 기본 InkPresenter 개체를 사용합니다.

InkToolbar 개요

빌트인 버튼

InkToolbar에는 다음과 같은 빌트인 버튼이 포함되어 있습니다.

  • 볼펜 - 원모양 펜 팁으로 단단하고 불투명한 스트로크를 그립니다. 스트로크 크기는 감지된 펜 압력에 따라 달라집니다.
  • 연필 - 원모양 펜 팁으로 (레이어 음영 효과에 유용한) 가장자리가 부드럽고, 질감이 느껴지는 반투명 스트로크를 그립니다. 스트로크 색(어두움 정도)은 감지된 펜 압력에 따라 달라집니다.
  • 형광펜 - 사각형 펜 팁으로 반투명 스트로크를 그립니다.

각 펜의 플라이아웃에서 색상표와 크기 속성(최소, 최대, 기본값)을 모두 사용자 지정할 수 있습니다.

도구

  • 지우개 – 터치된 잉크 스트로크를 삭제합니다. 지우개 스트로크 아래 부분뿐만 아니라 전체 잉크 스트로크가 삭제됩니다.

토글

  • 눈금자 – 눈금자를 표시하거나 숨깁니다. 눈금자 가장자리 주변에서 그리면 잉크 스트로크가 눈금자에 맞춰집니다.
    Ruler visual associated with InkToolbar

기본 구성이지만 앱의 InkToolbar에 포함된 빌트인 버튼을 완벽하게 제어할 수 있습니다.

사용자 지정 버튼

InkToolbar는 각기 고유한 두 그룹으로 구성됩니다.

  1. "도구" 버튼 그룹에는 빌트인 그리기, 지우기 및 강조 표시 버튼이 있습니다. 사용자 지정 펜 및 도구가 여기에 추가됩니다.

참고 항목

기능 선택은 함께 사용할 수 없습니다.

  1. "토글" 버튼 그룹에는 빌트인 눈금자 버튼이 있습니다. 사용자 지정 토글이 여기에 추가됩니다.

참고 항목

기능은 함께 사용할 수 있으며, 다른 활성 도구와도 동시에 사용할 수 있습니다.

애플리케이션 및 필요한 잉크 기능에 따라, 다음 버튼(사용자 지정 잉크 기능에 바인딩됨)을 InkToolbar에 추가할 수 있습니다.

  • 사용자 지정 펜 – 잉크 색상표 및 펜 팁 속성(예: 모양, 회전 및 크기)이 호스트 앱에서 정의되는 펜입니다.
  • 사용자 지정 도구 – 호스트 앱에서 정의한 도구 중 펜이 아닌 도구입니다.
  • 사용자 지정 토글 – 앱 정의 기능의 상태를 켜거나 끄도록 설정합니다. 이 기능을 키면, 기능이 활성 도구와 함께 작동합니다.

참고 항목

빌트인 버튼의 표시 순서는 변경할 수 없습니다. 기본 표시 순서는 볼펜, 연필, 형광펜, 지우개 및 눈금자 순입니다. 사용자 지정 펜은 마지막 기본 펜에 추가되고, 마지막 펜 버튼과 지우개 버튼 사이에 사용자 지정 도구 단추가 추가되며 눈금자 버튼 뒤에 사용자 지정 토글 버튼이 추가됩니다. (사용자 지정 버튼은 지정된 순서대로 추가됩니다.)

InkToolbar는 최상위 항목일 수 있지만 일반적으로 "수동 입력" 단추 또는 명령을 통해 노출됩니다. Segoe MLD2 Assets 글꼴의 EE56 문자 모양을 최상위 아이콘으로 사용하는 것이 좋습니다.

InkToolbar 상호 작용

모든 빌트인 펜 및 도구 버튼에는 잉크 속성과 펜 팁 모양 및 크기를 설정할 수 있는 플라이아웃 메뉴가 포함되어 있습니다. “확장 문자 모양”이 이 단추에 표시되면 플라이아웃이 있음을 나타냅니다.

InkToolbar glyph

활성 도구의 버튼을 다시 선택하면 플라이아웃이 표시됩니다. 색 또는 크기가 변경되면 플라이아웃이 자동으로 해제되고 잉킹을 다시 시작할 수 있습니다. 사용자 지정 펜 및 도구는 기본 플라이아웃을 사용하거나 사용자 지정 플라이아웃을 지정할 수 있습니다.

지우개에는 또한 모든 잉크 지우기 명령을 제공하는 플라이아웃도 있습니다.

InkToolbar with eraser flyout invoked

사용자 지정 및 확장성에 대한 자세한 내용은 SimpleInk 샘플을 확인하세요.

권장 사항

  • InkCanvas 와 잉킹은 통상 활성 펜을 사용할 때가 가장 좋습니다. 그러나 앱에서 필요한 경우 마우스 및 터치(수동 펜 포함) 입력으로 잉킹을 지원하는 것이 좋습니다.
  • InkCanvas와 함께 InkToolbar 컨트롤을 사용하여 기본 잉킹 기능 및 설정을 제공합니다. InkCanvas와 InkToolbar 둘 다 프로그래밍 방식으로 사용자 지정할 수 있습니다.
  • InkToolbar와 잉킹은 통상 활성 펜을 사용할 때가 가장 좋습니다. 그러나 앱에서 필요한 경우 마우스와 터치로 잉킹을 지원할 수 있습니다.
  • 터치식 입력을 사용한 수동 입력을 지원하는 경우 "터치 쓰기" 도구 설명과 함께 Segoe MLD2 자산 글꼴의 ED5F 아이콘을 토글 단추에 사용하는 것이 좋습니다.
  • 스트로크 선택을 입력할 때 "선택 도구" 도구 설명과 함께 Segoe MLD2 자산 글꼴의 EF20 아이콘을 도구 단추에 사용하는 것이 좋습니다.
  • InkCanvas를 두 개 이상 사용하는 경우, 단일 InkToolbar를 사용하여 캔버스에서 잉킹을 제어하는 것이 좋습니다.
  • 최상의 성능을 위해, 기본 및 사용자 지정 도구 모두에 대한 사용자 지정 플라이아웃을 만드는 대신 기본 플라이아웃을 변경하는 것이 좋습니다.

예제

Microsoft Edge

Microsoft Edge는 웹 메모에 대해 InkCanvas 및 InkToolbar를 사용합니다.
InkCanvas is used to ink in Microsoft Edge

Windows Ink 작업 영역

InkCanvas 및 InkToolbar는 Windows Ink 작업 영역캡처 및 스케치에서도 사용됩니다.
InkToolbar in the Windows Ink Workspace

InkCanvas 및 InkToolbar 만들기

앱에 InkCanvas를 추가하려면 한 줄의 태그만 필요합니다.

<InkCanvas x:Name="myInkCanvas"/>

참고 항목

InkPresenter를 사용한 InkCanvas 사용자 지정에 대한 자세한 내용은 “Windows 앱의 펜 조작 및 Windows Ink” 문서를 참조하세요.

InkToolbar 컨트롤은 InkCanvas와 함께 사용해야 합니다. InkToolbar(모든 빌트인 도구 포함)를 앱에 통합하려면 한 줄의 추가 태그가 필요합니다.

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

이것이 보여주는 InkToolbar는 다음과 같습니다.

Basic InkToolbar

샘플 코드 가져오기

  • SimpleInk 샘플 - InkCanvas 및 InkToolbar 컨트롤의 사용자 지정 및 확장성 기능과 관련된 8가지 시나리오를 보여 줍니다. 각 시나리오에서 일반적인 잉킹 상황 및 제어 구현에 대한 기본 지침을 제공합니다.
  • ComplexInk 샘플 - 보다 높은 수준의 수동 입력 시나리오를 보여 줍니다.
  • WinUI 2 갤러리 샘플 - 상호 작용형 형식으로 모든 XAML 컨트롤을 확인할 수 있습니다.