ストーリーボードを使い画像をY軸を中心に立体的に回転させるには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（10）（3/3 ページ）

古（いにしえ）からのVBでWindows 8.1向けのさまざまな機能のアプリを開発する手順やコツを解説していく。今回は、Expression Blendを使い、表示された画像をY軸を中心に立体的に回転させる方法をサンプルを交えて解説する。

[薬師寺国安，PROJECT KySS]

選択したフォルダー内の画像を表示して、マウスの移動で、画像を、Y軸を中心に回転させたり、ImageShowStoryboardを実行する処理

　今回のアプリの肝となる処理だ。ストーリーボード処理をプログラムから行っている。

Private Async Function DataShow() As Task
        For Each result In myImageCollections
            myBmp = New BitmapImage
            myBmp.SetSource(Await result.OpenReadAsync)
            myImage = New Image
            With myImage
                .Width = 160
                .Height = 120
                .Source = myBmp
                .Stretch = Stretch.Uniform
            End With
            Dim fileNameTextBlock As New TextBlock
            With fileNameTextBlock
                .Width = 160
                .FontSize = 18
                .TextAlignment = TextAlignment.Center
                .TextWrapping = TextWrapping.Wrap
                .Text = result.Name
            End With
            Dim myStackPanel As New StackPanel
            myStackPanel.Margin = New Thickness(3)
            myStackPanel.Children.Add(myImage)
            myStackPanel.Children.Add(fileNameTextBlock)
            GridView1.Items.Add(myStackPanel)
            AddHandler myImage.PointerEntered, Sub(mySender As Object, myArgs As PointerRoutedEventArgs)
                    Dim _myImage = DirectCast(mySender, Image)
　　　　　　　　　　　　　　‘これより以下が、このアプリの肝。ストーリーボード処理をプログラム上で行う。
                    Dim myStoryBoard As New Storyboard
             　      myStoryBoard.Stop()
                    Dim myPlaneProjection As PlaneProjection = DirectCast(_myImage.Projection, PlaneProjection)
              　　    If _myImage.Projection Is Nothing = True Then
                          myPlaneProjection = New PlaneProjection
                         _myImage.Projection = myPlaneProjection
                    End If
                   Dim myDoubleAnimation As New DoubleAnimation
                   With myDoubleAnimation
                      .From = 0
                      .To = 360
                      .Duration = New Duration(TimeSpan.FromSeconds(3))
                 　 End With
                   Storyboard.SetTarget(myDoubleAnimation, myPlaneProjection)
                Storyboard.SetTargetProperty(myDoubleAnimation, "myPlaneProjection.RotationY")
                   myStoryBoard.Children.Add(myDoubleAnimation)
                   myStoryBoard.Begin()
                        AddHandler _myImage.DoubleTapped, Sub()
                            Image1.Visibility = Windows.UI.Xaml.Visibility.Visible
                            Image1.Source = _myImage.Source
                           _StoryBoard = New Storyboard
                           _StoryBoard = DirectCast(Me.Resources("ImageShowStoryboard"), Storyboard)
                           _StoryBoard.Begin()
                                End Sub
                  End Sub
        Next
        ProgressRing1.IsActive = False
        ProgressRing1.IsEnabled = False
    End Function

　以降、上記コードの中身を詳細に見ていこう。

　まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。

　次に、指定したフォルダー内の画像を保持している、メンバーコレクション変数myImageCollections内のファイルを、変数resultに格納しながら、以下の処理を行う。

　新しいBitmapImageのインスタンスmyBmpオブジェクトを作成する。SetSourceメソッドに、「Await result.OpenReadAsync」と指定して、各画像に対して、ランダムアクセス用のストリームを開く。SetSourceメソッドは、ストリームにアクセスしてBitmapSourceのソースイメージを設定するメソッドだ。

　Imageクラスの新しいインスタンスmyImageオブジェクトを作成する。Widthに「160」、Heightに「120」と指定し、SourceプロパティにmyBmpオブジェクトを指定する。Stretchプロパティには「Uniform」を指定しておく。

　TextBlockの新しいインスタンスfileNameTextBlockオブジェクトを作成する。Widthに「180」、文字サイズに18、文字位置は中央揃え、文字の折り返しは可能と指定する。［Text］プロパティには、Nameでファイル名拡張子を含む項目の名前を取得して、指定する。

　新しいStackPanelのインスタンスmyStackPanelオブジェクトを作成する。Marginプロパティに「3」を指定して余白を設ける。AddメソッドでmyImageとfileNameTextBlocオブジェクトを追加する。最後にGridView1にAddメソッドでmyStackPanelオブジェクトを追加する。これで、画像の下にファイル名が表示されて、GridView1に画像の一覧が表示される。

　AddHandlerステートメントで、myImageオブジェクトのヒットテスト領域にポインターが入ったときに発生する、PointerEnteredイベントにイベントハンドラーを追加する。イベントハンドラー内では以下の処理を行う。

　オブジェクト変数mySenderに格納されているImageオブジェクトを取得し、_myImageで参照しておく。

　新しいStoryboardのインスタンスmyStoryBoardオブジェクトを作成する。

　_myImageオブジェクトのPlaneProjectionを取得し、変数myPlaneprojectionで参照しておく。PlaneProjectionはオブジェクトに対する遠近法変換を表すクラスだ。

　このサンプルでは、プログラムコードで_myImage(Image)オブジェクトを作成しているため、_myImageオブジェクトにProjectionプロパティが設定されていない場合の処理が必要になる。

　新しいDoubleAnimationのインスタンスmyDoubleAnimationオブジェクトを作成する。Y軸に沿ってオブジェクトを一回転させるため、Fromに「0」を指定し、Toに「360」、Durationに「3秒」を指定する。3秒かかって画像がY軸を中心に360度回転することになる。

　SetTargetメソッドでタイムラインにDoubleAnimationのインスタンスであるmyDoubleAnimationオブジェクトを指定し、タイムラインの対象となるオブジェクトに、PlaneProjectionのインスタンスであるmyPlaneProjectionを指定する。

　SetTargetPropertyメソッドで、タイムラインにDoubleAnimationのインスタンスmyDoubleAnimationオブジェクトを指定し、パスに"myPlaneProjection.RotationY"と指定する。

　StoryboardのインスタンスmyStoryBoardオブジェクトにAddメソッドでmyDoubleAnimationオブジェクトを追加する。Beginメソッドでアニメーションを開始する。

　AddHandlerステートメントで、_myImageオブジェクトがダブルタップされたときのイベントDoubleTappedに、イベントハンドラーを追加する。イベントハンドラー内では以下の処理を行う。

　Image1を表示し、SourceプロパティにImageオブジェクトの「_myImage.Source」の値を指定する。

　新しいStoryboardのインスタンス_StoryBoardオブジェトを作成する。XAML内の内に記述している、ImageShowStoryboardを取得し、Beiginメソッドでアニメーションを開始する。ProgressRing1の動作を停止する。

　以上のコードで、画像一覧の上にマウスカーソルを乗せると、画像がY軸を中心に回転し、任意の画像をダブルタップすると画像が回転しながら表示され、小さくなって消えていく。

ImageShowStoryboardのアニメーションが完了したときの処理（_StoryBoard_Completedメソッド処理）

    Private Sub _StoryBoard_Completed()
        Image1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
        _StoryBoard.Stop()
    End Sub

　ここでは、Image1を非表示にし、アニメーションを停止している。

終わりに

　今回で10回にわたった、Windowsストアアプリ開発の解説は終了です。長い間のお付き合いを感謝いたします。1つの完成されたアプリの中で、アプリの作成方法をメインに解説してきましたが、いかがだったでしょうか？

　この連載が、皆さまのWindowsストアアプリ開発の助けになれば、筆者としてはうれしい限りです。どうもありがとうございました。また、お会いできる日まで……。

著者プロフィール

PROJECT KySS 薬師寺 国安（やくしじ くにやす）

1950年生まれ。フリーVBプログラマ。高級婦人服メーカーの事務職に在職中、趣味でVBやActiveXに取り組み、記事を執筆。2003年よりフリー。.NETやRIAに関する執筆多数。Windowsストアアプリも多数公開中（約270本）。

　

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）。

PROJECT KySSは、1997年に薬師寺聖と結成したコラボレーション・ユニット