その１：Windows Phone 7アプリを作成してみよう(その1)
その２：Windows Phone 7アプリを作成してみよう(その2)
その３：Windows Phone 7アプリを作成してみよう（その3）
画面操作で動きを変えてみよう
.NETを使ったプログラミングでは画面はコントロールと呼ばれる部品で作成されています。例えば、ButtonコントロールであるとListBoxコントロールなどです。
そして、例えばボタンをタップすれば、ButtonコントロールのClickイベントが発生するなど、画面での操作によってコントロールに対するイベントが検出され、そのイベントに割り当てたプロシージャの呼出しが行われます。
Windows Phone 7でもその仕組みは変わらず、画面操作ごとに発生するイベントを処理する事で画面操作に応じた動きをプログラミングできます。
Windows Phone 7で規定されている画面操作には次のようなものがあります。
- タップ
１本指でスクリーンをトンッと触り、すぐ指を離します。 - ダブルタップ
素早く2回タップします。 - パン
１本指でスクリーンを触ったまま動かして最後に指をスクリーンから離します。 - フリック
１本指でスクリーンを触り、任意の方向へその指をシュッと跳ね上げます。 - ピンチ
２本指でスクリーンを触り、スクリーンを触ったまま2本の指の間隔を狭くします。 - ストレッチ
２本指でスクリーンを触り、スクリーンを触ったまま2本の指の間隔を広くします。 - タッチアンドホールド
１本指でスクリーンを触り、そのまま動かさずにしばらく待ちます。
しかし、Windows Phone Developer Toolsに同封されているコントロールには「タップ」を検出するClickイベントなどはありますが、その他の操作に対するイベントの扱いは必ずしも容易ではありません。
そこで必要になってくるのが、Silverlight for Windows Phone ToolkitのGestureService/GestureListenerです。
ボタンコントロールをGestureService/GestureListenerで拡張してみる
それでは、GestureService/GestureListenerを使ってボタンコントロールにダブルタップなどボタンコントロールにないイベント検出を実装してみましょう。
XAMLへの記述はの中にを埋め込む形で記述します。
そしてその中にとして操作に対するイベントプロシージャ名を記述していきます。
なお、ページの先頭にある先頭ののところに「xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"」を忘れずに追記してください。
GestureListenerで指定できるイベントは、
- Tap
- DoubleTap
- DragStarted
- DragDelta
- DragComlested
- Flick
- PinchStarted
- PinchDelta
- PinchCompleted
- Hold
になります。これらのイベントを使ってWindows Phone 7で規定されている操作をどのように検出していくかを１つづつ確認してみましょう。
タップ
タップイベントは、ボタンコントロールのClickイベントでも検出できますし、GestureListenerでTapイベントでも検出できます。
両方のイベントでタップしたときに実行するプロシージャを指定してしまうとタップしたときにプロシージャを合計２回呼んでしまう事になるので注意してください。
ダブルタップ
ダブルタップは２回づつけてタップする操作になります。
ボタンコントロールのClickイベントはダブルタップそれぞれを別々のタップとして処理します。また、GestureListenerでは１つめのタップでTapイベント、２つめのタップでDoubleTapイベントとして認識します。
もし、タップとダブルタップを同時に実現するのであれば、タップして選択してもう１度タップしたときの動作＝ダブルタップのときの動作として設計しボタンのClickイベントは使わずGestureListenerのTapイベントとDoubleTapイベントを使うようにしましょう。
例えば、１度タップすれば選択、もう一度タップしたら選択したアイテムを編集のような操作性であれば、Tapイベントでは選択したときの処理、DoubleTapイベントでは編集処理を行うプロシージャを呼び出すようにコードを記述します。
パン
パン操作を行うとまずDragStartedイベントを検出、その後、指の動きに合わせてDragDeltaイベント、指を離したタイミングでDragCompletedイベントを検出します。
DragDeltaイベントでは指の移動量がe.VerticalChangeとe.HorizontalChangeで取得できるので、その値をつかってコントロールを移動させたり線を引いたりなどの機能を実現できます。
Private Sub OnDragDelta(sender As System.Object,
e As Microsoft.Phone.Controls.DragDeltaGestureEventArgs)
Call SetResult(String.Format("OnDragDelta {0} {1}",
e.HorizontalChange,
e.VerticalChange))
End Subフリック
フリック操作はパン操作と似ています。最後に指を跳ね上げるかどうかです。そのため、パン操作のイベントにプラスして、この指の跳ね上げをFlickイベントとして検出します。
フリック操作の結果を取得する場合、Flickイベントを処理するプロシージャでe.Directionで上下と左右のどちらかを判定し、上下であればe.VerticalVelocity、左右であればe.HorizontalVelocityで方向を判定します。具体的には次のようなコードになります。
このコードでの上下左右判定は指方向ではなくそのフリック操作により画面がスクロールする方向を判定しています。
Private Sub OnFlick(sender As System.Object,
e As Microsoft.Phone.Controls.FlickGestureEventArgs)
Dim angle As String
If e.Direction = Controls.Orientation.Vertical Then
If e.VerticalVelocity < 0 Then
angle = "下"
Else
angle = "上"
End If
Else
If e.HorizontalVelocity < 0 Then
angle = "右"
Else
angle = "左"
End If
End If
Dim value As String = String.Format("angle={0},hv={1},vv={2},d={3}",
CType(e.Angle, Long).ToString,
CType(e.HorizontalVelocity, Long).ToString,
CType(e.VerticalVelocity, Long).ToString,
e.Direction.ToString)
Call SetResult("フリック " & angle)
End Subピンチとストレッチ
２本指で操作を行うとまずPinchStartedイベントを検出、その後、2本の指の動きに合わせてPinchDeltaイベント、指をスクリーンから話したタイミングでPinchCompletedイベントを検出します。
Windows Phone 7エミュレータでピンチやストレッチを行うためにはマルチタッチスクリーンが必要になります。また、OSもWindows 7を用意するのがベストでしょう。
Private Sub OnPinchDelta(sender As System.Object,
e As Microsoft.Phone.Controls.PinchGestureEventArgs)
Call SetResult(String.Format("OnPinchDelta {0} {1}",
e.DistanceRatio,
e.TotalAngleDelta))
End Sube.DistanceRatioはPinchStartedイベント発生時点からの２本の指の間の距離の比率を表しています。1.0より小さければピンチであり大きければストレッチということになります。
e.TotalAngleDeltaはPinchStartedイベント発生時点からの回転角度になります。
タッチアンドホールド
タッチアンドホールドは、指をスクリーンに少し長めにおいておく操作です。そのため、Clickイベントは発生しませんが、Holdイベントを検出したあとに指を離したことをTapイベントとして検出します。
もし、タップとタッチアンドホールドを両方実装したいときは、タップの検出はClickイベントを使うのがいいでしょう。