40章:アニメーションのコード化

    作成2013.04.27

     ここでは、Windowsフォームアプリケーション用サンプルコードをWPFアプリケーション用コードに変換します。フォームアプリケーションからWPFアプリケーションへの変化が最近の主流のようです。
  1. 参照元情報
     簡単 WebBrowser の作成は(Visual Basic ガイド ツアー)
    「アニメーションの作成」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. アニメーションのコード化
     アニメーション画面切り替えのため、一部をコードにかえてみました。
     ダウンロード後は解凍してから使用してください。
      [アニメーションのコード化]をダウンロードする。
     解凍すると「40WpfAnimation2」フォルダーがあります。
    注(1)「40WpfAnimation2」フォルダーの「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. MainWindow.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)これで、舞台が完成です。役者はコードで作成します。


  7. MainWindow.xaml.csの全コード
    using System;
    using System.Windows;
    using System.Windows.Media;
    using System.Windows.Shapes;
    using System.Windows.Media.Animation;
    
    namespace WpfAnimation2
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void Button1_Click(object sender, RoutedEventArgs e)
            {
                Ellipse myEllipse = new Ellipse();
                myEllipse.HorizontalAlignment = HorizontalAlignment.Left;
                myEllipse.VerticalAlignment = VerticalAlignment.Top;
                myEllipse.Stroke = Brushes.Aquamarine;
                myEllipse.Width = 20;
                myEllipse.Height = 20;
                myEllipse.Fill = Brushes.Coral;
                Canvas1.Children.Add(myEllipse);
    
                DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
                myDoubleAnimation1.From = -10;
                myDoubleAnimation1.To = 390;
                Duration duration1 = 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);
    
                DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
                myDoubleAnimation2.From = -10;
                myDoubleAnimation2.To = 290;
                Duration duration2 = 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();
            }
    
            private void Button2_Click(object sender, RoutedEventArgs e)
            {
                Storyboard1.Stop();
            }
        }
    }
    


  8. コードの解説
    (2)Ellipse myEllipse = new Ellipse();でボールを作成します。
    (3) Canvas1.Children.Add(myEllipse);でボールをCanvas1に設定します。
    (4)DoubleAnimation myDoubleAnimation1 = 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)スマートなアニメーションができそうです。







41章:WPFでの印刷(1) (C#) に行く。

トップページに戻る。