インクの概要

  • [アーティクル]

更新 : 2007 年 11 月

アプリケーションへのデジタル インクの組み込みは、今までになく容易になりました。COM および Windows フォームによるプログラミング手法の付随的な存在であったインクは、WPF に完全に統合されるまでに発展しました。個別の SDK や、ランタイム ライブラリをインストールする必要はありません。

必要条件

以降に示す例を使用するには、まず Microsoft Visual Studio 2005 および Windows SDK をインストールする必要があります。また、WPF に対応するアプリケーションの作成方法も理解しておく必要があります。WPF の概要については、「Windows Presentation Foundation の概要」を参照してください。

クイック スタート

ここでは、インクを収集する簡単な WPF アプリケーションを作成する方法を説明します。

Microsoft Visual Studio 2005 および Windows Software Development Kit (SDK) をまだインストールしていない場合はインストールしてください。WPF アプリケーションを表示するには、その全体が Extensible Application Markup Language (XAML) で構成されている場合でも、通常はあらかじめコンパイルしておく必要があります。また、Windows Software Development Kit (SDK) には、XAML ベースの UI の実装作業を迅速化するために設計された、XamlPad というアプリケーションが付属しています。このアプリケーションを使用して、このドキュメントの最初にあるいくつかのサンプルを表示し、いろいろと変更してみるとよいでしょう。XAML からコンパイルされたアプリケーションを作成する作業については、このドキュメントで後に説明します。

XAMLPad を起動するには、[スタート] ボタンをクリックし、[すべてのプログラム] をポイントします。次に、[Microsoft Windows SDK] をポイントし、[Tools] をポイントして、[XAMLPad] をクリックします。XAMLPad のレンダリング ペインには、コード ペインで作成された XAML コードがレンダリングされます。XAML コードを編集すると、変更は直ちにレンダリング ペインに反映されます。

インクを取得する

インクをサポートする WPF アプリケーションを初めて作成するには、次の手順を実行します。

  1. Microsoft Visual Studio 2005 を開きます。

  2. 新しい Windows アプリケーション (WPF) を作成します。

  3. 2 つの <Grid> タグの間に「<InkCanvas/>」と入力します。

  4. デバッガでアプリケーションを起動するために、F5 キーを押します。

  5. スタイラスまたはマウスを使用して、ウィンドウに「hello world」と書き込みます。

"hello world" アプリケーションに相当するインクが、わずか 12 回のキーストロークで書き込まれました。

アプリケーションを改良する

次に、WPF のいくつかの機能を利用してみましょう。開始タグ <Window> と終了タグ </Window> の間にあるすべてのコードを、次に示すマークアップで置き換えてください。インク サーフェイスに、グラデーション ブラシによる背景が表示されます。

<Page>
  <InkCanvas Name="myInkCanvas">
    <InkCanvas.Background>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Blue" Offset="0.5" />
        <GradientStop Color="Green" Offset="1.0" />
      </LinearGradientBrush>
    </InkCanvas.Background>
  </InkCanvas>


...


</Page>

アニメーションを使用する

今度は、グラデーション ブラシの色をアニメーション化してみましょう。次に示す XAML を、終了タグ </InkCanvas> と終了タグ </Page> の間に追加します。

<Page.Triggers>
  <EventTrigger RoutedEvent="Page.Loaded">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <ColorAnimation  Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
          From="Yellow" To="Blue" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
          From="Blue" To="Red" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
          From="Green" To="Blue" Duration="0:0:5"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Page.Triggers>

XAML に分離コードを追加する

XAML を使用すると、ユーザー インターフェイスの設計は非常に簡単になりますが、実際のアプリケーションには、イベントを処理するコードを追加する必要があります。マウスが右クリックされたときにインクを拡大表示する簡単な例を次に示します。

作成した XAML の中で、次のように MouseRightButtonUp ハンドラを設定します。

<InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">

Visual Studio のソリューション エクスプローラで Windows1.xaml を展開し、分離コード ファイル Window1.xaml.cs (Visual Basic を使用している場合は Window1.xaml.vb) を開きます。次に示すイベント ハンドラ コードを追加します。

Private Sub RightMouseUpHandler(ByVal sender As Object, _
                                ByVal e As System.Windows.Input.MouseButtonEventArgs)

    Dim m As New Matrix()
    m.Scale(1.1, 1.1)
    CType(sender, InkCanvas).Strokes.Transform(m, True)

End Sub 'RightMouseUpHandler

private void RightMouseUpHandler(object sender, 
                                 System.Windows.Input.MouseButtonEventArgs e)
{
    Matrix m = new Matrix();
    m.Scale(1.1d, 1.1d);
    ((InkCanvas)sender).Strokes.Transform(m, true);
}

ここで、アプリケーションを実行します。いくつかのインクを追加してから、マウスで右クリックするか、またはスタイラスを使用して同等の操作であるプレス アンド ホールドを実行します。

XAML の代わりに手順コードを使用する

手順コードからは、WPF のすべての機能にアクセスできます。XAML を一切使用しない WPF の "Hello Ink World" アプリケーションを次に示します。Visual Studio で、次に示すコードを空のコンソール アプリケーションに貼り付けます。PresentationCore、PresentationFramework、および WindowsBase の各アセンブリへの参照を追加し、F5 キーを押してアプリケーションをビルドします。

Imports System
Imports System.Windows
Imports System.Windows.Controls


Class Program
    Inherits Application
    Private win As Window
    Private ic As InkCanvas


    Protected Overrides Sub OnStartup(ByVal args As StartupEventArgs)
        MyBase.OnStartup(args)
        win = New Window()
        ic = New InkCanvas()
        win.Content = ic
        win.Show()

    End Sub 'OnStartup

End Class 'Program

Module Module1

    Sub Main()
        Dim prog As New Program()
        prog.Run()

    End Sub

End Module

using System;
using System.Windows;
using System.Windows.Controls;
class Program : Application
{
    Window win;
    InkCanvas ic;

    protected override void OnStartup(StartupEventArgs args)
    {
        base.OnStartup(args);
        win = new Window();
        ic = new InkCanvas();
        win.Content = ic;
        win.Show();
    }

    [STAThread]
    static void Main(string[] args)
    {
        new Program().Run();
    }
}

参照

概念

インクの収集

手書き認識

インクの格納

その他の技術情報

デジタル インク