１６章：チュートリアル15:アニメーションの作成 (VB)

作成2013.03.11

参照元情報
　簡単 WebBrowser の作成は（Visual Basic ガイドツアー）
「アニメーションの作成」にジャンプする
　作成方法の詳細は上記を参照願います。
アニメーションの作成の完成ファイル
　アニメーションの作成の解説とおりに作業を実施すると、プロジェクトファイル群が完成します。
　完成ファイルは以下からダウンロードできます。
　ダウンロード後は解凍してから使用してください。
　 [アニメーションの作成]をダウンロードする。
　解凍すると「WpfAnimation」フォルダーがあります。
注（１）「WpfAnimation」フォルダーの「WpfAnimation.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
注（２）メニューの「ウインド」＿「ウインドレイアウトのリセット」で標準に戻ります。
注（３）「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
注（４）メニューの「表示」＿「コード」を選択するとコードが表示されます。
注（５）「LayoutSample.sln」の動作確認は「デバッグ」＿「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。
WpfAnimationの実行
（１）「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
（２）「デバッグ」＿「デバッグ開始」を選択します。
（３）MainWindow画面が表示されます。
（４）画面のボールは自動的に移動します。
（５）クローズボックスで終了します。
新規プロジェクトの作成
（１）新規プロジェクト
　新規プロジェクトを作成すると「デザイナー」にはとXAMLが自動生成されます。

（２）XAMLコードの作成
　サンプルのXAMLコードをコピーして、ペーストすると完成します。

（３）クラスコード
Class MainWindow
End Class
が自動生成されます。

（４）その他
　サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、内容の詳細が理解できません。できるだけデザイナーを使用して、XAMLコードを自動生成すると理解が深まります。
　ただし、デザイナーの操作だけでは、完全なコードが生成できないようです。最終的にはXAMLコードの仕組みを理解して、コードの修正が必要になるようです。
　学習のため、XAMLコードを少し変更してみました。

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="370" Width="450">

    <Canvas Width="400" Height="300" Background="#FFABDBAB">
    <!-- 背景色の設定 -->
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <!-- ボールのアニメーション -->
            <BeginStoryboard x:Name="myBoard">
                <Storyboard>
                <!-- 縦方向の移動 -->
                <DoubleAnimation From="-10" To="290" Duration="0:0:0.7" Storyboard.TargetName="myEllipse" Storyboard.TargetProperty="(Canvas.Top)" AutoReverse="True" RepeatBehavior="Forever" />
                <!-- 横方向の移動 -->
                <DoubleAnimation From="-10" To="390" Duration="0:0:0.5" Storyboard.TargetName="myEllipse" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="True" RepeatBehavior="Forever" />
                <!-- 横方向の移動R-->
                <DoubleAnimation From="-20" To="380" Duration="0:0:2" Storyboard.TargetName="Ellipse1" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        </Canvas.Triggers>
        <!-- 赤いボールの記述 -->
        <Ellipse x:Name="myEllipse" Fill="Red"  Width="20" Height="20"  Canvas.Left="-10" Canvas.Top="-10" />
        <!-- 青いボールの記述 -->
        <Ellipse Canvas.Left="76" Canvas.Top="179" Height="40" Name="Ellipse1" Width="40">
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#FFC341DB" Offset="0.3" />
                    <GradientStop Color="#FF1E8CEB" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Canvas>
</Window>

XAMLの階層構造
```
<Window>階層1
    <Canvas>階層2-1
       <Canvas.Triggers>階層3-1
           <EventTrigger>階層4-1
               <BeginStoryboard>階層5-1
                   <Storyboard>階層6-1
                      <DoubleAnimation />階層7-1
                      <DoubleAnimation />
                      <DoubleAnimation />
                </Storyboard>
               </BeginStoryboard>
           </EventTrigger>
        </Canvas.Triggers>
        <Ellipse/>階層3-2
        <Ellipse >階層3-3
            <Ellipse.Fill>階層4-2
                <RadialGradientBrush>階層5-2
                    <GradientStop />階層6-2
                    <GradientStop  />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Canvas>
</Window>
```
（１）XAMLを理解するには、まずXAMLの階層構造を理解する必要があります。（サンプルは上記のようになります。）
（２）階層1：x:Class="MainWindow"を定義、Title="MainWindow" Height="370" Width="450"を定義します。
（３）階層2-1：
VBの全コード
　VBのコードはありません。

感想：
　アニメーションはCanvasクラスを使用したとき、うまく動作します。TriggersプロパティはDockPanelクラスとStackPanelクラスにも存在します。このため、”Canvas”と”DockPanel”あるいは”StackPanel”置換してもXAMLコードにはエラーが発生しません。
　しかし、”DockPanel”あるいは”StackPanel”置換の場合は、アニメーションが動作しません。どうもアニメーションはCanvasクラスが必須のようです。
　VBコードを使用しないで、アニメーションができるのはすごい！！

１７章：チュートリアル16:コントロールのテンプレート化と再利用(VB)に行く。

トップページに戻る。