好きな写真を指で選んで順番に拡大表示するLeap Motionプログラムを作る

BlendでGotoStateActionを設定する(TransitionEffectListBox.xaml)

前述の方法に従ってBlendを起動します。実際にBlend起動する前に、必ずVS 2012でプロジェクトをビルドしておいてください。

アートボードの上に表示されているタブからTransitionEffectListBoxを選択します。

[アセット]のビヘイビアーから「GoToStateAction」を選択して、ListBox1上にドラッグ&ドロップします（図16）。

図16：ListBox1コントロール上にGoToSateActionビヘイビアーをドラッグ&ドロップする（クリックで拡大）

[オブジェクトとタイムライン(B)] 内の「GoToStateAction」を選択し、プロパティを設定します。

[トリガー]内の[EventName]が「SelectionChanged」になっているのを確認してください。次に、[TargetName]プロパティの横に付いている[…]ボタンをクリックします。「要素の選択」画面が表示され、要素の一覧が表示されます。「ターゲットにする要素の選択」にImageShowAreaを指定します（図17）。ImageShowAreaはTransitionEffectImageShowに付けたx:Nameです。

図17：GoToSateActionビヘイビアーの各プロパティを設定する（クリックで拡大）

TransitionEffectListBox.xamlの設定は以上で終わりです。Blendを閉じて、VS 2012に戻ります。保存と適用のメッセージが出ますので、保存して適用させます。

画面のレイアウト（MainWindow.xaml）

前述した方法で、localという名前空間を、MainPage.xaml内の要素内で定義します。xmlns:local=””と入力すると、名前空間の値の一覧が表示されますので、現在作成しているプロジェクト名を選択します。

内に

最前面にpaintCanvasという名前のInkPresenterを配置します。

図18：MainWindow.xaml内にTransitionEffectListBox.xamlを取り込む（クリックで拡大）

書き出されるXAMLはリスト3のようになります。

リスト3　書き出されたXAMLコード(MainWindo.xaml)

<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:SlideInTransitionLeapMotion"
  Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
  <Grid>
    <local:TransitionEffectListBox Margin="10,10,702,28"/>
    <InkPresenter Name="paintCanvas"/>
  </Grid>
</Window>

今回の筆者の環境では、TransitionEffectListBoxを取り込むとデザイン画面にエラーが表示されて、デザイン画面が使えませんでした（図19）。但しプログラムは問題なく動きます。原因は現時点では不明です。

図19：デザイン画面でエラーが表示される（クリックで拡大）

プログラム・コード（MainWindow.xaml.vb）

では、次にプログラム・コード（MainWindows.xaml.vbファイル）を見ていきましょう。

コードは4回のコードと似通っている部分については割愛します。4回のコード説明を参照してください。異なる部分のみ解説します。

名前空間の読み込み

「Imports Leap」と「Imports System.Windows.Ink」名前空間だけを読み込みます。

メンバー変数の宣言

次にメンバー変数を宣言する。

今回もWin32 APIを使用するためにWin32 APIの宣言も行います。4回と同じWin32 APIを使用しています。定数メンバー変数「Private Const MOUSEEVENTF_MOVE = &H1」は、今回は不要です。

「leap」、「touchIndicator」、「touchPoint」、「windowWidth」、「windowHeight」、「tx」、「ty」、「x」、「y」、「FingersCount」等のメンバー変数については4回と同じのため、そちらの記事を参照してください。これ以外に、XML要素を表すXElementクラス型のメンバー変数xmldocを宣言します（リスト4）。

リスト4　メンバー変数の宣言

・・・・コード略・・・
  Private xmldoc As XElement
・・・コード略・・・・

MainWindow_Loadedメソッドの処理

MainWindow_Loadedメソッド（＝メイン・ウィンドウのLoadedイベントのハンドラー）では、MainWindowが読み込まれた時の処理を実装します。

AddHandlerステートメントを使って、構成ツリーのオブジェクトがレンダリングされる直前に発生する「CompositionTarget.Renderingイベント」に対するイベント・ハンドラーとしてUpdateメソッドを指定します（※Updateメソッドの実装内容は後述）。

インク・ストロークの外観を表す、DrawingAttributesオブジェクトのインスタンス「touchIndicator」のWidthプロパティとHeightプロパティにそれぞれ「20」を指定します。スタイラスの形状を指定するStylusTipプロパティに「StylusTip.Ellipse」を指定して円形とします。Leap Motionの上で指をかざすと、かざした指の本数に応じて20px（px＝ピクセル）の円が表示されるようになります(リスト5)。

リスト5 MainWindow_Loadedメソッド

  Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
    AddHandler CompositionTarget.Rendering, AddressOf Update
    touchIndicator.Width = 20
    touchIndicator.Height = 20
 
    touchIndicator.StylusTip = StylusTip.Ellipse
  End Sub

Updateメソッドの処理

4回と同じにつき割愛します、4回を参照してください。

次にLeap Motionのタッチ処理になる。タッチのイメージは次の図20のようなイメージです。