次の方法で共有

インクの収集

  • [アーティクル]

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>

インクコレクションモード

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

インクの操作

InkCanvas では、多くのインク編集操作がサポートされています。 たとえば、InkCanvas はペンの背面消去をサポートしており、要素に機能を追加するために追加のコードは必要ありません。

選択

選択モードの設定は、 プロパティを 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 の 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 プロパティは、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 オーダーで高いので、インクはその背後にレンダリングされます。

参照