DHJJ DHJJ [Hatsune's Journal Japan]

Windows Phone 7アプリを作成してみよう

Windows Phone 7 プロジェクトの新規作成

Windows Phone 7アプリのプロジェクトを新規に作成してみましょう。

[名前]フィールドには作成するアプリ名を英語で記述します。今回は「WankumaWP7Sample01」とつけることにしましょう。

このテンプレートで作成されるソリューション構成は次のようになります。先ほど入れた名前がソリューション名とプロジェクト名になっています。

今回はVisual BasicのWindows Phone 7テンプレートを使用しましたが、C#のときも基本的には同じソリューション構成になります。

ソリューションに含まれる「MainPage.xaml」がメイン画面のデザイン(XAML)ファイルです。このファイルにコントロールを貼りつけて画面デザインをしていきます。

でもその前に作成するアセンブリの情報をきちんと設定してしまいましょう。

アセンブリ情報の設定

プロジェクト「WankumaWP7Sample01」を右クリックしてプロパティメニューを選んだら[Application]タブの中にある[Title]欄を変更します。

初期状態ではプロジェクト名と同じ「WankumaWP7Sample01」となっていますので「わんくまさんぷる01」と変更します。

?

次に[アプリケーション]タブにある[アセンブリ情報]ボタンをクリックしてアセンブリ情報を設定します。ここの[タイトル]欄も初期状態はプロジェクト名になっているので先ほど入力したタイトルを入力します。

画面にタイトルをつけよう

プロジェクトを新規作成した直後のMainPage.xamlの内容は次のようになっています。


  
  
        
            
            
        

        
        
            
        

        
        
    

      

この状態でデバッグ実行すれば次のような表示がエミュレータに表示されます。

画面の一番上に「MU APPLICATION」と表示されていますので「わんくまさんぷる01」と表示するように変更しましょう。また、「page name」はとりあえずいらないので削除しちゃいましょう。

修正箇所はXAMLの中の次の部分です。


    
    

ここを次のように変更します。


    

では、変更した結果がどのように実行時の画面に反映されるかさっそく確認してみましょう。

アイコンを設定しよう

Windows Phone 7にアプリをインストールすると「アプリケーションリスト」にアイコン付でアルファベット順に並びます。

このアイコンは、プロジェクトのプロパティにある[Application]タブの[Icon]欄で指定(初期状態はApplicationIcon.pngファイル)しています。

アイコンの大きさは62ドットx62ドットの24色になります。icoフォーマットではなくpngフォーマットの画像ファイルになります。

ファイルのプロパティが次のようになっていることも確認してください。

スタート画面への表示画像を設定しよう

Windows Phoneではアプリケーションリストにあるアプリ名を長押しすると次のような操作選択が表示されます。

「pin to start」を選ぶとメトロデザインなスタート画面に表示されます。

このとき表示される画像は[Icon]欄に指定した画像ではなく、[Background]欄に指定している画像(初期状態はBackground.pngファイル)です。

画像の大きさは173ドット×173ドットの24色になります。

これでWindows Phone 7のスタート画面の画像も差し替え完了です。

アプリケーションバーを設定しよう

Windows Phone 7アプリは必要に応じて各種操作用のアイコンを画面下に表示して操作できるようにします。

この領域をアプリケーションバーといいSilverlight for Windows Phone 7ではXAML定義でアプリケーションバーをデザインできます。

アプリケーションバーには2種類の表現方法があります。

1つは「ApplicationBarIconButton」、もう一つは「ApplicationBarMenuItem」です。

ApplicationBarIconButtonは、アプリケーションバーにアイコンとして常に表示されますが、表示個数は4つまでと決まっています。そのため、本当に常に必要とする機能を割り当てます。

今回のサンプルでは、「最新」、「編集」、「写真」、「検索」の4つの機能を割り当てることにします。

ApplicationBarMenuItemは、アプリケーションバーには常に表示されないメニュー項目です。アプリケーションバーの一番右に表示されている「…」をタップすると表示されます。

アプリケーションバーに表示するアイコンをプロジェクトに追加する

Windows Phone Developer Toolsをインストールするとアプリケーションバーに使用するためのアイコン集も

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\dark

にインストールされます。

今回はこのフォルダにある

  • appbar.edit.rest.png
  • appbar.feature.camera.rest.png
  • appbar.feature.search.rest.png
  • appbar.refresh.rest.png

のアイコンをプロジェクトフォルダにIconsフォルダを作成してコピーします。

このとき画像ファイルのプロパティを次のように設定します。この設定を忘れるとアプリケーションバーにアイコンが表示されません。

アプリケーションバーのXAML定義

Windows Phone 7アプリのプロジェクトを新規作成したときにMainPage.xamlにはコメントアウトした形でアプリケーションバーの定義例が記述されています。

そのコメントを外して4つのApplicationBarIconButtonと2つのApplicationBarMenuItemを追記してみましょう。


    
        
        
        
        
        
            
            
        
    

たったこれだけの定義でアプリケーションバーの画面デザインが完成です。

さっそく実行してみましょう。

一番右側の「…」をタップしてみます。

するとアプリケーションバー領域が拡大されApplicationBarMenuItemに設定したメニュー項目が表示されます。また、ApplicationBarIconButtonにもキャプションが表示されます。

なお、ApplicationBarIconButtonに設定したアイコンはIDE上では表示されないので「XAMLを正しく記述したのに表示されない」とあわてたりしないようにしましょう。もし、実行時も表示されない場合はpngファイルのプロパティをプロパティウィンドウで再確認してみてください。

アプリケーションバーをクリックした時の動作を記述しよう

アプリケーションバーのアイコンやメニュー項目をクリックした時の処理を記述するにはApplicationBarIconButtonやApplicationBarMenuItemに対するClickイベントのイベントプロシージャを記述します。

イベントプロシージャーを記述する方法はいくつかありますが、該当するApplicationBarIconButtonのXAML定義にClick="Refresh_Button_Click"属性を追加してみましょう。

そして、そこにマウスを持っていき右クリックして[イベントハンドラーに移動]メニューをクリックすればMainPage.xaml.vbに次のようなコードが生成されます。

Private Sub Refresh_Button_Click(sender As System.Object,
                                 e As System.EventArgs)
End Sub

このサブプロシージャの中に「最新」ボタンをクリックした時の動作を記述します。

新しいページを追加しよう

Windows Phone 7では画面のことをページと呼びます。

現在表示しているページから他のページを表示するときは2つのページを一度には表示できないので、表示しているページから他のページに移動する事になります。

アプリケーションバーのメニューで[about]メニューを選択したときに[about]ページに移動するためのコードを考えてみましょう。

そのためにはまずは移動先の[about]ページをプロジェクトに追加してみましょう。

ソリューションエクスプローラーでプロジェクト名を右クリックして[追加]-[新しい項目]メニューを選択して[about]ページを追加します。

なおWindows Phone 7のデザインスタイルとして、初期設定値がpage nameということからも分かるようにページの名前の先頭は小文字のようです。

同時に[main]ページのXAMLファイル名やクラス名は「MainPage」なのでこちらは先頭が大文字で「Page」と後ろにつけていますので、[about]ページも同じような規則に従ってAboutPage.xamlとして追加います。

これで移動先のページができあがりました。

別のページを表示しよう

現在いるページから別のページの移動にはNavigationService.Navigateメソッドを使います。

Windows Phone 7で最初に表示されるのは[Main]ページですから、[main]ページから追加した[about]ページに移動していましょう。

[main]ページのアプリケーションバーに[about]ページに移動するためのメニューとして次のように(10行目)[about]メニューを追加します。


    
        
        
        
        
        
            
            
            
        
    

追加したメニューには「Click="About_Menu_Click"」とメニューをタップしたときに呼び出す関数名も記述します。

次に「About_Menu_Click」の文字のところにマウスをもっていって右クリックしてショートカットメニューを表示し[イベントハンドラーへ移動]メニューを選択します。

IDEの表示がデザイナウィンドウからコードウィンドウに切り替わって[About_Menu_Click]サブプロシージャーのコードに移動します。

[About_Menu_Click]サブプロシージャーに移動用のコードを記述してみましょう。

別のページへの移動は、NaviagetionService.Navigateメソッドで引数としてUri型でページの位置を指定します。

Uri型というのが少々曲者でNavigationService.Navigate(“/AboutPage.xaml”)とは指定できないということになります。

幸いなことにUriクラスのNewには引数として文字列で位置指定ができます。

そこで New Uri(“/AboutPage.xaml”, UriKind.Relative)のように指定して[about]ページのUriを指定します。

Private Sub About_Menu_Click(sender As System.Object,
                             e As System.EventArgs)
    Me.NavigationService.Navigate(New Uri("/AboutPage.xaml",
                                          UriKind.Relative))
End Sub

で出来上がりです。さっそく動かして確認して見ましょう。

前のページに戻ろう

Windows Phone 7のハードウェア基本仕様として左下に戻るボタンがあって1つ前のページに戻れるようになっています。

この戻るボタンと同じ機能を持っているのがNavigationService.GoBackメソッドです。

使い方はNavigationService.Navigateメソッドよりも簡単で、引数なしでメソッドを実行するだけです。

例えば[about]ページをどのページからでも呼び出せるようにした場合、呼出し元に戻りたいと思います。Windows Phone 7のハードウェアキーの戻るボタンで戻ればいいという話は無視してGUI的に戻る機能が欲しい!ということであったとしましょう。そのようなときは次のようなコードになります。

Private Sub Back_Button_Click(sender As System.Object,
                              e As System.Windows.RoutedEventArgs)
    Me.NavigationService.GoBack()
End Sub
戻る前に戻ろう

戻る前に戻ろうというのもなんだか不思議な話ですが、ブラウザで[戻る]ボタンで戻った後に使うことがある[進む]ボタンの動きを実現するためという説明でご理解頂けるでしょうか。

Windows Phone 7のハードウェアボタンにも割り当てられていないものなので実際はあまり使わないのかも知れませんがページを移動するという切り口の一つとして次のコードを覚えておくと良いかもしれません。

Me.NavigationService.GoBack()

画面操作で動きを変えてみよう

.NETを使ったプログラミングでは画面はコントロールと呼ばれる部品で作成されています。例えば、ButtonコントロールであるとListBoxコントロールなどです。

そして、例えばボタンをタップすれば、ButtonコントロールのClickイベントが発生するなど、画面での操作によってコントロールに対するイベントが検出され、そのイベントに割り当てたプロシージャの呼出しが行われます。

Windows Phone 7でもその仕組みは変わらず、画面操作ごとに発生するイベントを処理する事で画面操作に応じた動きをプログラミングできます。

Windows Phone 7で規定されている画面操作には次のようなものがあります。

  • タップ
    1本指でスクリーンをトンッと触り、すぐ指を離します。
  • ダブルタップ
    素早く2回タップします。
  • パン
    1本指でスクリーンを触ったまま動かして最後に指をスクリーンから離します。
  • フリック
    1本指でスクリーンを触り、任意の方向へその指をシュッと跳ね上げます。
  • ピンチ
    2本指でスクリーンを触り、スクリーンを触ったまま2本の指の間隔を狭くします。
  • ストレッチ
    2本指でスクリーンを触り、スクリーンを触ったまま2本の指の間隔を広くします。
  • タッチアンドホールド
    1本指でスクリーンを触り、そのまま動かさずにしばらく待ちます。

しかし、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で規定されている操作をどのように検出していくかを1つづつ確認してみましょう。

タップ

タップイベントは、ボタンコントロールのClickイベントでも検出できますし、GestureListenerでTapイベントでも検出できます。

両方のイベントでタップしたときに実行するプロシージャを指定してしまうとタップしたときにプロシージャを合計2回呼んでしまう事になるので注意してください。

ダブルタップ

ダブルタップは2回づつけてタップする操作になります。

ボタンコントロールのClickイベントはダブルタップそれぞれを別々のタップとして処理します。また、GestureListenerでは1つめのタップでTapイベント、2つめのタップでDoubleTapイベントとして認識します。

もし、タップとダブルタップを同時に実現するのであれば、タップして選択してもう1度タップしたときの動作=ダブルタップのときの動作として設計しボタンのClickイベントは使わずGestureListenerのTapイベントとDoubleTapイベントを使うようにしましょう。

例えば、1度タップすれば選択、もう一度タップしたら選択したアイテムを編集のような操作性であれば、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
ピンチとストレッチ

2本指で操作を行うとまず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 Sub

e.DistanceRatioはPinchStartedイベント発生時点からの2本の指の間の距離の比率を表しています。1.0より小さければピンチであり大きければストレッチということになります。

e.TotalAngleDeltaはPinchStartedイベント発生時点からの回転角度になります。

タッチアンドホールド

タッチアンドホールドは、指をスクリーンに少し長めにおいておく操作です。そのため、Clickイベントは発生しませんが、Holdイベントを検出したあとに指を離したことをTapイベントとして検出します。

もし、タップとタッチアンドホールドを両方実装したいときは、タップの検出はClickイベントを使うのがいいでしょう。

COPYRIGHT (C) 2008 初音玲 All rights reserved. / Running .NET Framework 4.0.30319.42000