ホワイトボードアプリケーション

前回に引き続きLive Framework SDKの.NET Kitを使用した開発です。今回は，サンプルアプリケーションとしてホワイトボードアプリケーションを作成します。アプリケーションを実行した画面は図1のようになります。機能はホワイトボードに見立てたウィンドウに黒色で手書きできるという単純なものですが，Live Frameworkを利用して手書きした内容をMeshサービス上へ保存し，同期・共有できるようにします。

図1　ホワイトボードアプリケーション

本連載ではVisual Studio 2008と言語にVB.NETを使用します。無償のVisual Basic 2008 Express Editionでも同様の内容ものが作成できます。

WPFアプリケーションの作成

最初にホワイトボードアプリケーションの基本的な部分を作成します。Visual Studioを使用して，新しくWPFアプリケーションのプロジェクトを作成します（図2⁠）⁠。

図2　WPFアプリケーションプロジェクトの作成

プロジェクトの作成後，Live Framework SDKの.NET Kitのライブラリの参照を追加します。詳しくは，本連載の第4回を参照してください。

InkCanvas

手書きを実現するためInkCanvasというコントロールを使用します。InkCanvasはTablet PC等でスタイラスによる入力を行い，ジェスチャーや文字認識に使用されるコントロールですが，今回はこれをホワイトボードとして利用します。

まずは，プロジェクトにデフォルトで作成されているウィンドウにInkCanvasを配置しましょう。Window1.xamlに対して，直接XAMLの記述を編集します。「⁠<InkCanvas />」という記述を追加したものが図3になります。

図3　InkCanvasの追加

この時点で実行するとウィンドウに手書き入力することができます。実際に実行して確認してみましょう。入力により画面上に追加される線は，ひとつひとつが内部ではStrokeクラスのオブジェクトとして保持されています。

コードを記述しない状態で手書き入力が可能になり便利なコントロールですが，これだけでは線の削除もできず機能的に不十分ですので，少しだけコントロールとコードを記述して機能を追加します。

追加する内容は

• 消しゴムの選択
• ホワイトボードのクリア

および消しゴム選択から手書き入力に戻るための

• ペンの選択

とします。ここでは，ボタンを3個ウィンドウに配置し，ボタンクリック時に以上の各処理を行うよう実装します。

XAMLファイルを以下のように編集します。InkCanvasだけでなくボタンを追加し，Clickイベントの記述を行います。またInkCanvasをコードから参照するためMyInkCanvasという名前を付けています。

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ホワイトボード" Height="300" Width="300">
    <DockPanel>
        <StackPanel DockPanel.Dock="Bottom"  Orientation="Horizontal">
            <Button Content="ペン" Click="PenButton_Click" Width="80" Margin="2" />
            <Button Content="消しゴム" Click="EraserButton_Click" Width="80" Margin="2" />
            <Button Content="クリア" Click="ClearButton_Click"  Width="80" Margin="2" />
        </StackPanel>
        <InkCanvas Name="MyInkCanvas" />
    </DockPanel>
</Window>

続いてボタンのClickイベント処理を記述します。ソリューションエクスプローラからWindow1.xaml.vbを選択してイベント処理のコードを追加します。

ペンと消しゴムの選択はInkCanvasのEditingModeプロパティを使用し，入力動作を指定します。このアプリケーションでは，ペンと消しゴムの動作としてInkCanvasEditingMode.InkとInkCanvasEditingMode.EraseByStrokeを指定することにします。コードは次のようになります。

Private Sub PenButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    MyInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End Sub

Private Sub EraserButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    MyInkCanvas.EditingMode = InkCanvasEditingMode.EraseByStroke
End Sub

このEditingModeで指定できる動作には，ほかにも線の選択や，書いた線の一部分を消す動作などがあります。

ホワイトボードのクリアは，InkCanvasが保持しているStrokeオブジェクトのコレクションをクリアします。コードは次のようになります。

Private Sub ClearButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    MyInkCanvas.Strokes.Clear()
End Sub

以上でホワイトボードとしての処理部分は完了です。実際に実行して各ボタンが機能するか確認してみましょう。