連載
» 2011年10月03日 00時00分 公開

Windows PhoneのMetro UIをタッチでジェスチャ操作Silverlightベースで作るWP7アプリ開発入門(4)(3/3 ページ)

[泉本優輝,WP Arch]
前のページへ 1|2|3       

Flickを利用するには

 Flickを利用するには、WPToolkitを参照に追加します。

WPToolkitを参照に追加 WPToolkitを参照に追加

 WPToolkitを追加したら、ネームスペースにtoolkitの利用を宣言します。

<phone:PhoneApplicationPage
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 WPToolkitを利用すると、GestureServiceでジェスチャを利用できます。ボタンをGestureServiceを使うように書き換えます。

<Button Content="Button" Margin="76,39,72,297">
  <toolkit:GestureService.GestureListener>
    <toolkit:GestureListener
        Tap="Button_Tap"
        DoubleTap="Button_DoubleTap"
        Hold="Button_Hold"
        Flick="Button_Flick"
        DragDelta="Button_DragDelta"
        PinchStarted="Button_PinchStarted"
        PinchDelta="Button_PinchDelta"
    />
  </toolkit:GestureService.GestureListener>
</Button>

 次に処理を書きましょう。デフォルトのジェスチャではSystem.Windows.Input.GestureEventArgsを使っていましたが、WPToolkitではMicrosoft.Phone.Controls.GestureEventArgsになります。

 書き換え忘れるとビルドは通りますが、アプリは起動しないので注意しましょう。

private void Button_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    text.Text="Tapしました";
}
 
private void Button_DoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    text.Text="Double Tapしました";
}
 
private void Button_Hold(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    text.Text="Holdしました";
}
 
private void Button_Flick(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    text.Text="Flickしました";
}
 
private void Button_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
    text.Text="Panしました";
}
 
private void Button_PinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    text.Text="Pinchをはじめました";
}
 
private void Button_PinchDelta(object sender, PinchGestureEventArgs e)
{
    text.Text+="Pinchをしています。";
}

 実行してみましょう。今回紹介した6種類のジェスチャが利用できると思います。

Surface SDKでマルチタッチをエミュレート

 実機があれば、アプリをデプロイすれば実行できるでしょう。しかしエミュレータにはマルチタッチの挙動を試す方法がありません。ここではSurface SDKを使って、エミュレータでマルチタッチを試す方法をご紹介します。

 まず、ダウンロードーページからSurfaceSDK.msiをダウンロードしインストールします。

 インストールできたら、[スタート]→[Microsoft Surface 2.0 SDK]→[Tools]→[Input Simulator]を起動します。すると、以下のウィンドウが起動します。

Input Simulator Input Simulator

 起動時はマウスモードになっているので、タッチモードに切り替えます。すると、クリックがタッチ扱いになります。

 ではWindows Phoneでマルチタッチのデバッグを試してみましょう。1つ目のポイントで、左クリックしながら右クリックをします。すると、1つ目のポイントが固定されます。

固定された1つ目のポイント 固定された1つ目のポイント

 この状態で2つ目のポイントをドラッグしてみましょう。Pinchのジェスチャが実行されます。これで実機がなくても、エミュレータでマルチタッチが試せます。

エミュレータ上でのマルチタッチ エミュレータ上でのマルチタッチ

 固定した1つ目のポイントを解除するには、1つ目の近くで左クリック+右クリックをすれば解除されます。

次回は、Windows Phoneアプリのプロトタイピング

 これまで、Windows Phoneの色使いやMetro UI、PanoramaやPivotなど、フロントエンドのWindows Phoneらしさを紹介してきました。

 次回は、Windows Phoneのプロトタイピングについて紹介します。プロトタイピングにはSketchFlowを用います。

著者紹介

Windows Phone Arch代表

泉本優輝

UIデザインからプログラミング、表現までやりたい、自称クリエイティブデザイナ

“さわってみたい”を創ることが目標。フィジカルコンピューティングなどの試作を行う傍ら、コミュニティ活動ではExpression Blendを中心としたセッションを行っている



前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。