PR

KinectButtonを動的に作成して、ジェスチャーで文字を表示させるサンプル

2012年8月9日(木)
薬師寺 国安

KinectButtonを動的に作成する

ここでは、プログラム上からKinectButtonを動的に作成して、選択したボタンの表面の文字を表示させてみます。実際に動かした動画は以下になります。

動的にKinectButtonを作成し選択している(KinectButton_04.wmv)

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「WPF アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「KINECT_DynamicButton」という名前を付けています。

参照の追加

VS2010のメニューから「プロジェクト(P)/参照の追加(R)」と選択して、コンポーネントを追加しておきます。今回追加するのは、Microsoft.KinectとBeginning.Kinect.Framework.dllの2つです。.NETタブ内に表示されていないDLLファイルは「参照」タブからDLLファイルを指定します。

Microsoft.Kinect.dllは、C:\Program Files\Microsoft SDKs\Kinect\v1.5\Assemblies内に存在しますので、これを指定します。Beginning.Kinect.Framework.dllはソリューションエクスプローラー内のDLLフォルダにあります。既に参照はしていますが、もしエラーが表示される場合は、このDLLを再度、参照の追加を行ってください。

コントロールの配置

ツールボックスからデザイン画面上にStackPanelを1個、その子要素としてKinectButtonを1個、このKinectButtonは最終的には非表示にします。

1個だけ非表示にしておくのは、動的にKinectButtonを作成しただけでは、円形のカーソルが表示されないため、ダミーとしての役割を果たします。実際には不要ですので、非表示としておきます。TextBlockコントロールを1個配置します。また、要素のWindowStateプロパティにMaximizedを指定して、全画面で表示されるようにしています。全画面表示にするのは必須です。

書き出されるXAMLコードはリスト3、レイアウトは図3のようになります。

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

  • (1)WindowStateプロパティにMaximizedを指定し全画面表示とする。
  • (2)要素の子要素としてダミー用の要素を配置する。この要素は最終的には非表示にする。
<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="800" Width="800" WindowState="Maximized" xmlns:my="clr-namespace:Beginning.Kinect.Framework.Controls;assembly=Beginning.Kinect.Framework"> ■(1)
  <Grid>
    <StackPanel Name="Stackpanel1" Margin="10,10,10,98">
      <my:KinectButton Content="Button" Height="66" Name="KinectButton1" Width="84"/> ■(2)
    </StackPanel>
    <TextBlock Height="61" HorizontalAlignment="Left" Margin="12,680,0,0" Name="TextBlock1" Text="" VerticalAlignment="Top" Width="754" FontSize="40" FontWeight="Bold" Foreground="Red" />
  </Grid>
</Window>
図3:各コントロールを配置した(クリックで拡大)

図3ではKinectButton1が表示されていますが、実行時には、プロパティのVisibilityにCollaspedを指定して非表示としてください。

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト4のコードを記述します。

ロジックコードを記述する

リスト4 (MainWindow.xaml.vb)

Option Strict On
Imports Microsoft.Kinect
Imports Beginning.Kinect.Framework.Controls
Imports Beginning.Kinect.Framework.Input
Class MainWindow
  Dim myKinect As KinectSensor

ウィンドウが読み込まれた時の処理

Kinect センサーが接続されていない場合は、警告を発して処理を抜けます。そうでない場合は、Kinect センサーを取得しKinectButtonを4個生成する処理を行います。

KinectButtonの新しいインスタンスmyButtonオブジェクトを作成し、Width、Height、Content、Backgroundプロパティの値を指定します。各プロパティの設定されたmyButtonオブジェクトをStackPanel1に追加します。これで、KinectButtonが4個作成されます。

次にボタンがClickされた時のイベントハンドラを追加します。clickSenderオブジェクトをKinectButtonにキャストして、KinectButtonの情報を取得します。BackgroudにBlueを指定し、TextBlock1コントロール内に、選択されたKinectButtonの表面の文字を表示します。Clickというイベントですが、実際にはKinectButtonに円形のカーソルが乗った時という方が合っています。

次に、KinectButtonからマウスカーソルが離れた時(KinectCursorLeave)のイベントハンドラを追加します。BackgroundにGoldを指定し、BlueからGoldに背景色を変化させます。TextBlock1内の表示を消します。

  Private Sub MainWindow_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    If KinectSensor.KinectSensors.Count = 0 Then
      MessageBox.Show("Kinectが接続されておりません。")
      Exit Sub
    Else
      myKinect = KinectSensor.KinectSensors(0)
      For i As Integer = 1 To 4
        Dim myButton As New KinectButton
        With myButton
          .Width = 200
          .Height = 100
          .Content = "myButton" & i.ToString
          .Background = New SolidColorBrush(Colors.Gold)
        End With
        StackPanel1.Children.Add(myButton)
 
        AddHandler myButton.Click, Sub(clickSender As Object, clickArgs As RoutedEventArgs)
          Dim selectButton As KinectButton = DirectCast(clickSender, KinectButton)
          selectButton.Background = New SolidColorBrush(Colors.Blue)
          TextBlock1.Text = selectButton.Content.ToString
                     End Sub
 
        AddHandler myButton.KinectCursorLeave, Sub(leaveSender As Object, leaveArgs As KinectCursorEventArgs)
          Dim selectButton As KinectButton = DirectCast(leaveSender, KinectButton)
          selectButton.Background = New SolidColorBrush(Colors.Gold)
          TextBlock1.Text = String.Empty
                     End Sub
      Next
    End If
  End Sub

ウィンドウが閉じられた場合の処理

Kinectセンサーが動作している場合は、Kinect センサーの動作を停止し、リソースを開放します。

  Private Sub MainWindow_Closing(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles Me.Closing
    If myKinect Is Nothing = False Then
      If myKinect.IsRunning = True Then
        myKinect.Stop()
        myKinect.Dispose()
      End If
    End If
  End Sub
End Class

以上で今回のサンプルは終了です。

Think IT会員限定特典
  • Kinect Buttonを使って画面上にボタンを表示・操作するサンプル(1)

  • Kinect Buttonを使って画面上にボタンを表示・操作するサンプル(2)

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています