잉크 입력 컨트롤

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

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

참고 항목

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

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

기본적으로 InkToolbar에는 눈금자를 그리기, 지우기, 강조 표시 및 표시하기 위한 단추가 포함되어 있습니다. 기능에 따라 잉크 색, 스트로크 두께, 모든 잉크 지우기 등의 다른 설정 및 명령이 플라이아웃에 제공됩니다.

참고 항목

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

InkToolbar palette flyout

올바른 컨트롤인가요?

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

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

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

참고 항목

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

잉크 도구 모음 개요

기본 제공 단추

InkToolbar에는 다음과 같은 기본 제공 단추가 포함되어 있습니다.

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

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

도구

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

토글

  • 눈금자 – 눈금자를 표시하거나 숨깁니다. 눈금자 가장자리 근처에 그리면 잉크 스트로크가 눈금자로 맞춰지게 됩니다.
    Ruler visual associated with InkToolbar

기본 구성이지만 앱의 InkToolbar에 포함된 기본 제공 단추를 완벽하게 제어할 수 있습니다.

사용자 지정 단추

InkToolbar는 단추 유형의 두 가지 고유한 그룹으로 구성됩니다.

  1. 기본 제공 그리기, 지우기 및 강조 표시 단추가 포함된 "도구" 단추 그룹입니다. 사용자 지정 펜 및 도구가 여기에 추가됩니다.

참고 항목

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

  1. 기본 제공 눈금자 단추가 포함된 "토글" 단추 그룹입니다. 사용자 지정 토글이 여기에 추가됩니다.

참고 항목

기능은 상호 배타적이지 않으며 다른 활성 도구와 동시에 사용할 수 있습니다.

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

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

참고 항목

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

InkToolbar는 최상위 항목일 수 있지만 일반적으로 "수동 입력" 단추 또는 명령을 통해 노출됩니다. Segoe MLD2 자산 글꼴의 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 컨트롤을 참조하세요.