インクを収集する

Windows Presentation Foundation プラットフォームでは、その機能の中核としてデジタル インクが収集されます。 このトピックでは、Windows Presentation Foundation (WPF) でインクを収集する方法について説明します。

必須コンポーネント

次の例を使用するには、まず Visual Studio と Windows SDK をインストールする必要があります。 また、WPF に対応するアプリケーションの作成方法も理解しておく必要があります。 WPF の概要については、「チュートリアル: 初めての WPF デスクトップ アプリケーション」を参照してください。

InkCanvas 要素を使用する

System.Windows.Controls.InkCanvas 要素を使用すると、最も簡単に WPF でインクを収集できます。 InkCanvas 要素を使用して、インク入力を受け取って表示します。 インクは一般的に、スタイラスを使用して入力します。スタイラスはデジタイザーとの対話により、インク ストロークを生成します。 また、スタイラスの代わりにマウスを使用することもできます。 作成されたストロークは Stroke オブジェクトとして表され、プログラムとユーザー入力の両方で操作できます。 InkCanvas を使用すると、ユーザーは既存の Stroke を選択、変更、または削除できます。

XAML を使用して、InkCanvas 要素をツリーに追加するだけで簡単にインク収集を設定できます。 次の例では、Visual Studio で作成された既定の WPF プロジェクトに InkCanvas を追加します。

<Grid>
  <InkCanvas/>
</Grid>

InkCanvas 要素には子要素を含めることもできます。これにより、ほとんどすべての XAML 要素にインク注釈機能を追加できます。 たとえば、テキスト要素にインク機能を追加するには、単にそれを InkCanvas の子にします。

<InkCanvas>
  <TextBlock>Show text here.</TextBlock>
</InkCanvas>

インクを使用したイメージのマークアップのサポートも、簡単に追加できます。

<InkCanvas>
  <Image Source="myPicture.jpg"/>
</InkCanvas>

InkCollection モード

InkCanvas は、EditingMode プロパティを介したさまざまな入力モードをサポートしています。

インクを操作する

InkCanvas は、多くのインク編集操作をサポートしています。 たとえば、InkCanvas は消しゴム付きペンの機能をサポートしており、この機能を要素に追加するために追加のコードは必要ありません。

選択ツール

選択モードの設定は、InkCanvasEditingMode プロパティを Select に設定する場合と同じくらい簡単です。

次のコードでは、CheckBox の値に基づいて編集モードを設定します。

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

インク ストロークの外観を変更するには、DrawingAttributes プロパティを使用します。 たとえば、DrawingAttributes の Color メンバーを使用して、レンダリングされた Stroke の色を設定できます。

次の例では、選択されたストロークの色を赤に変更します。

// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();

// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
    // Change the color of each stroke in the collection to red
    foreach (System.Windows.Ink.Stroke stroke in selection)
    {
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
    }
}

' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()

' Check to see if any strokes are actually selected
If selection.Count > 0 Then
    ' Change the color of each stroke in the collection to red
    Dim stroke As System.Windows.Ink.Stroke
    For Each stroke In  selection
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
    Next stroke
End If

DefaultDrawingAttributes

DefaultDrawingAttributes プロパティを使用すると、InkCanvas で作成されるストロークの高さ、幅、色などのプロパティにアクセスできます。 DefaultDrawingAttributes を変更すると、以降、InkCanvas に入力されるすべてのストロークは、新しいプロパティ値でレンダリングされます。

分離コード ファイルの DefaultDrawingAttributes を変更するだけでなく、XAML 構文を使用して DefaultDrawingAttributes プロパティを指定できます。

次の例は、Color プロパティを設定する方法を示しています。 このコードを使用するには、Visual Studio で "HelloInkCanvas" という新しい WPF プロジェクトを作成します。 MainWindow.xaml ファイル内のコードを次のコードに置き換えます。

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
    Title="Hello, InkCanvas!" Height="300" Width="300"
    >
  <Grid>
    <InkCanvas Name="inkCanvas1" Background="Ivory">
      <InkCanvas.DefaultDrawingAttributes>
        <Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
      </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>

    <!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it, 
         higher in z-order, so that ink is collected and rendered behind -->
    <StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
      <Button Click="Ink">Ink</Button>
      <Button Click="Highlight">Highlight</Button>
      <Button Click="EraseStroke">EraseStroke</Button>
      <Button Click="Select">Select</Button>
    </StackPanel>
  </Grid>
</Window>

次に、以下のボタン イベント ハンドラーを、分離コード ファイルの MainWindow クラス内に追加します。

// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
    inkCanvas1.DefaultDrawingAttributes.Height = 2;
}

// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
    inkCanvas1.DefaultDrawingAttributes.Height = 25;
}

// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}

// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}

このコードをコピーしたら、Visual Studio で F5 キーを押して、デバッガーでプログラムを実行します。

StackPanel によってボタンが InkCanvas の上に配置されていることに注意してください。 ボタンの上にインクを塗ろうとすると、InkCanvas によってボタンの背後にインクが収集され、レンダリングされます。 これは、ボタンが InkCanvas の子ではなく兄弟であるためです。 また、ボタンは z オーダーの上位に位置するため、インクはその背後で描画されます。

関連項目

• DrawingAttributes
• DefaultDrawingAttributes
• System.Windows.Ink