InkCanvas Graphics

InkCanvas はスタイラスやマウスでデジタルインクを描画できるコントロールです。フリーハンド描画、選択、消去モードをサポートし、ストロークをインクデータとして保存・読み込みできます。

概要

WPF の InkCanvas は FrameworkElement を継承したデジタルインク描画コントロールです。タブレットペン（スタイラス）やマウスでフリーハンド描画が可能で、描画されたストロークは Strokes プロパティに StrokeCollection として保持されます。

EditingMode プロパティで現在の操作モードを切り替えます。Ink モードでは描画、Select モードではストロークの選択・移動、EraseByPoint や EraseByStroke では消去ができます。ツールバーのボタンとバインドしてモードを切り替えるのが一般的です。

DefaultDrawingAttributes でペンの色・太さ・筆圧特性などを設定します。DrawingAttributes クラスには Color、Width、Height、StylusTip（円形か四角形か）、IsHighlighter（ハイライターモード）などのプロパティがあります。

ストロークの保存・読み込みには InkSerializer を使用します。ISF（Ink Serialized Format）形式でストリームに書き出すか、PNG 形式でレンダリングして保存できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`EditingMode`	`None/Ink/GestureOnly/InkAndGesture/Select/EraseByPoint/EraseByStroke`	現在の編集モードを設定します。`Select` モードはストロークの選択・移動・変形に使い、`GestureOnly` は円を描くと削除するなどジェスチャー認識専用として使います。`Ink` は通常の描画モードです。モードを切り替えることでツールバーに応じた操作を提供できます。はまりやすいポイント：`EditingMode=None` はすべての入力をブロックします。一時的に描画を無効にしたい場合（読み取り専用表示など）に使えますが、`EditingMode` はマウス入力のモードを制御し、タブレットペン入力は `ActiveEditingMode` が使われる点に注意してください。
`ActiveEditingMode (ReadOnly)`	`InkCanvasEditingMode`	スタイラスの現在のアクティブな編集モードを示す読み取り専用プロパティです。ステータスバーやツールバーインジケーターに現在のモードを表示したい場合にこのプロパティをバインドして参照します。プロパティ変更通知（PropertyChanged）を購読することで UI をリアルタイムに更新できます。はまりやすいポイント：このプロパティは読み取り専用のため設定できません。モードを変更する際は `EditingMode` プロパティを使用してください。
`EditingModeInverted`	`InkCanvasEditingMode`	スタイラスを反転した側（物理的な消しゴム側）で使う場合の操作モードを設定します。タブレットペンには消しゴム側が付いており、ペンをひっくり返して使った時のモードをここで定義します（通常は `EraseByStroke` を設定）。はまりやすいポイント：マウスのみの環境では `EditingModeInverted` は効果がありません。タブレットが接続されていない場合にこの機能に依存したワークフローを作ると、マウスユーザーは消しゴム側の機能を使えなくなります。
`DefaultDrawingAttributes`	`DrawingAttributes`	ペンの色・太さ・スタイルなどの描画属性を設定します。描画途中で色を変えたい場合は新しい `DrawingAttributes` インスタンスを作成して `DefaultDrawingAttributes` に代入します。`IsHighlighter=true` にすると半透明のハイライター描画になります。はまりやすいポイント：`DefaultDrawingAttributes` の変更は新しく描くストロークにのみ適用されます。既存のストローク（`Strokes` コレクション内のもの）には反映されないため、過去の描画色を変えたい場合は各ストロークの `DrawingAttributes` を個別に変更する必要があります。
`Strokes`	`StrokeCollection`	描画されたすべてのインクストロークのコレクションです。プログラムからストロークを追加・削除したり、保存・読み込みに使用します。保存する際は `StrokeCollection.Save(stream)` で ISF（Ink Serialized Format）形式でストリームに書き出し、読み込みは `new StrokeCollection(stream)` で行います。はまりやすいポイント：`Strokes` コレクションからストロークを削除してもアンドゥ機能は提供されません。アンドゥ/リドゥが必要な場合は削除したストロークのスタックを自前で管理する実装が必要です。
`Background`	`Brush`	InkCanvas の背景色を設定します。`Background="White"` にすると白い描画面として視覚的に分かりやすくなります。`null`（デフォルト）は透明で、下層の要素が透けて見えます。はまりやすいポイント：透明背景のままにするとストロークが「宙に浮いている」ように見え、描画エリアの境界が不明瞭になります。描画エリアをユーザーに認識させるには `Background="White"` の設定または外側に `Border` コントロールを配置することをお勧めします。

XAML 使用例

<InkCanvas x:Name="inkCanvas"
           EditingMode="{Binding CurrentMode}"
           Background="White">
  <InkCanvas.DefaultDrawingAttributes>
    <DrawingAttributes Color="Black" Width="3" Height="3"
                       StylusTip="Ellipse" />
  </InkCanvas.DefaultDrawingAttributes>
</InkCanvas>

<!-- モード切り替えボタン -->
<ToolBar>
  <RadioButton Content="描画" Tag="{x:Static InkCanvasEditingMode.Ink}"
               IsChecked="{Binding IsInkMode}" />
  <RadioButton Content="消去" Tag="{x:Static InkCanvasEditingMode.EraseByStroke}"
               IsChecked="{Binding IsEraseMode}" />
</ToolBar>

主な使用例

手書きメモアプリ — ペンタブレットやタッチスクリーンで手書きメモを取るアプリのコアコンポーネントとして使用します。
電子署名 — 契約書やフォームにデジタル署名を描画して保存する機能を実装します。
ホワイトボードアプリ — 会議やプレゼンテーションで使用するデジタルホワイトボード機能を実装します。
図面・スケッチツール — 設計図や概念図をフリーハンドで描画するスケッチアプリを作成します。
注釈機能 — 画像や PDF のプレビューに重ねて注釈・マークアップを描画する機能を追加します。

ヒントとベストプラクティス

InkCanvas は WinForms との相互運用が難しい — WPF ネイティブのコントロールなので WinForms との組み合わせには注意が必要です。
ストロークの保存には ISF か PNG を使う — StrokeCollection を ISF 形式でストリームに書き出すか、InkCanvas をビジュアルとして PNG に変換して保存します。
Undo/Redo の実装 — Strokes.StrokesChanged イベントを購読してストロークの追加・削除を記録し、アンドゥスタックを構築します。InkCanvas 自体にはアンドゥ機能がないため自前実装が必須です。
画像へのエクスポート — RenderTargetBitmap を使用し、InkCanvas.Measure/Arrange で描画後に PNG ファイルとして保存できます。
タッチとスタイラスの両対応 — タブレット PC では EditingModeInverted でスタイラスの消しゴム側の動作を設定します。
InkCanvas を画像の上に重ねる — 画像に注釈を追加する場合は Grid の上レイヤーに InkCanvas を透明背景で重ねて配置します。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

GitHub で InkCanvas のソースコードを見る →