38章:チュートリアル37:アニメーションのVBコード化 (VB)

    作成2013.04.05

     16章:チュートリアル15:アニメーションの作成 (VB) の一部をVBコードに置き換えてみました。。

  1. 参照元情報
     簡単 WebBrowser の作成は(Visual Basic ガイド ツアー)
    「アニメーションの作成」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. アニメーションのVBコード化
     アニメーション画面切り替えのため、一部をVBコードにかえてみました。
     ダウンロード後は解凍してから使用してください。
      [アニメーションのVBコード化]をダウンロードする。
     解凍すると「38WpfAnimation2」フォルダーがあります。
    注(1)「38WpfAnimation2」フォルダーの「WpfAnimation2.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「WpfAnimation2.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. WpfAnimation2.slnの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)空白のMainWindow画面が表示されます。
    (4)スタートボタンを押すとアニメーションが開始します。
    (5)ストップボタンを押すとアニメーションが停止します。
    (5)クローズボックスで終了します。


  4. プロジェクトの構成
    (1)XAMLコードとVBコードで構成されます。


  5. XAMLの全コード
    <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="379" Width="506">
        <Grid>
            <StackPanel  Name="StackPanel1"  Orientation="Horizontal" Height="30" VerticalAlignment="Top">
                <Button Content="スタート" Height="23" Name="Button1" Width="75" />
                <Button Content="ストップ" Height="23" Name="Button2" Width="75" />
            </StackPanel>
            <Canvas  Name="Canvas1" Margin="0,30,0,0">
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Canvas.Loaded">
                        <BeginStoryboard x:Name="myBoard">
                            <Storyboard Name="Storyboard1">
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>
            </Canvas>
        </Grid>
    </Window>
    


  6. XAMLのポイント
    (1) <StackPanel>内にButton1とButton2を設置します。
    (2)<Canvas>内に<Canvas.Triggers>と<EventTrigger>と<BeginStoryboard>と<Storyboard>を設置します。
    (3)これで、舞台が完成です。役者はVBコードで作成します。


  7. Class MainWindowクラスの全コード
     Imports System.Windows.Media.Animation
    Class MainWindow
        Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
            Dim myEllipse = New Ellipse()
    
            myEllipse.HorizontalAlignment = Windows.HorizontalAlignment.Left
            myEllipse.VerticalAlignment = Windows.VerticalAlignment.Top
            myEllipse.Stroke = Brushes.Aquamarine
            myEllipse.Width = 20
            myEllipse.Height = 20
            myEllipse.Fill = Brushes.Coral
            Canvas1.Children.Add(myEllipse)
    
            Dim myDoubleAnimation1 As DoubleAnimation = New DoubleAnimation
            myDoubleAnimation1.From = "-10"
            myDoubleAnimation1.To = "390"
            Dim duration1 As Duration = New Duration(TimeSpan.FromSeconds(0.3))
            myDoubleAnimation1.Duration = duration1
            myDoubleAnimation1.AutoReverse = True
            myDoubleAnimation1.RepeatBehavior = RepeatBehavior.Forever
            Storyboard1.Children.Add(myDoubleAnimation1)
            Storyboard.SetTargetProperty(myDoubleAnimation1, New PropertyPath("(Canvas.Left)"))
            Storyboard.SetTarget(myDoubleAnimation1, myEllipse)
    
    
            Dim myDoubleAnimation2 As DoubleAnimation = New DoubleAnimation
            myDoubleAnimation2.From = "-10"
            myDoubleAnimation2.To = "290"
            Dim duration2 As Duration = New Duration(TimeSpan.FromSeconds(0.5))
            myDoubleAnimation2.Duration = duration2
            myDoubleAnimation2.AutoReverse = True
            myDoubleAnimation2.RepeatBehavior = RepeatBehavior.Forever
            Storyboard1.Children.Add(myDoubleAnimation2)
            Storyboard.SetTargetProperty(myDoubleAnimation2, New PropertyPath("(Canvas.Top)"))
            Storyboard.SetTarget(myDoubleAnimation2, myEllipse)
            Storyboard1.Begin()
        End Sub
    
        Private Sub Button2_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button2.Click
            Storyboard1.Stop()
        End Sub
    End Class
    


  8. VBコードの解説
    (2)Dim myEllipse = New Ellipse()でボールを作成します。
    (3) Canvas1.Children.Add(myEllipse)でボールをCanvas1に設定します。
    (4)Dim myDoubleAnimation1 As DoubleAnimation = New DoubleAnimationでX軸方向のアニメーション条件を設定します。
    (5)Storyboard1.Children.Add(myDoubleAnimation1)でStoryboard1にmyDoubleAnimation1を加えます。
    (6)Storyboard.SetTargetProperty(myDoubleAnimation1, New PropertyPath("(Canvas.Left)"))でCanvas.Leftが基準であることを設定します。
    (7)Storyboard.SetTarget(myDoubleAnimation1, myEllipse)でアニメーション対象がmyEllipseであることを設定します。
    (8)Y方向も同様に設定します。
    (9)Storyboard1.Begin()でアニメーションを開始します。
    (10)Storyboard1.Stop()でアニメーションを停止します。


    感想:
    (1)舞台は固定でよいのですが、役者とストーリーは、いろいろと変化させたい!!こんなとき、このコードサンプルは役に立ちそうです。
    (2)スマートなアニメーションができそうです。






39章:チュートリアル38:WPFでの印刷(1) (VB) に行く。

トップページに戻る。