１８章：10 行でズバリ!! アニメーションの作成 (C#)

作成2013.04.15

　10 行でズバリ!! アニメーションの作成 (C#)は下記の参照元情報からほぼ完全な作成方法の説明と解説を参照できます。

参照元情報
　10 行でズバリ!! アニメーションの作成 (C#)は
 「10 行でズバリ!! レイアウトの作成」にジャンプする
　作成方法の詳細は上記を参照願います。
10 行でズバリ!! アニメーションの作成 (C#)の完成ファイル
　10 行でズバリ!! アニメーションの作成 (C#)の作成の解説とおりに作業を実施すると、C#プロジェクトファイル群が完成しますが、　ここでは、VBで作成したプログラムをC＃言語に変換を基本とします。
　完成ファイルは以下からダウンロードできます。
　ダウンロード後は解凍してから使用してください。
　 [10 行でズバリ!! アニメーションの作成 (C#)]をダウンロードする。
　解凍すると「18WpfAnimation」フォルダーがあります。
注（１）「18WpfAnimation」フォルダーの「WpfAnimation.sln」ファイルをダブルクリックすると「Express 2012 for Windows Desktop」が起動します。
注（２）メニューの「ウインド」＿「ウインドレイアウトのリセット」で標準に戻ります。
注（３）「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」が表示されます。
注（４）メニューの「表示」＿「コード」を選択するとコードが表示されます。
注（５）「LayoutSample.sln」の動作確認は「デバッグ」＿「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。
WpfAnimation.slnの実行
（１）「Express 2012 for Windows Desktop」のデバッグ機能を使用します。
（２）「デバッグ」＿「デバッグ開始」を選択します。
（３）操作画面が表示されます。
（４）動作確認はありません。
（６）クローズボックスで終了します。
新規プロジェクトの作成
（１）MainWindow.xamlのデザイン設定
　新規プロジェクトを作成すると「デザイナー」にはMainWindow.xamlが自動生成されます。MainWindow.xamlのデザイン設定はVBのMainWindow.xamlのコピー＆ペーストで完成します。

（２） MainWindow.xaml.csコード
　基本コードが自動生成されます。

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="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>

MainWindow.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：
MainWindow.xaml.csの全コード
MainWindow.xaml.csのコードはありません。
MainWindow.xaml.csコードの解説
MainWindow.xaml.csのコードはありません。

感想：
（１）この章はVBとC#は共通の練習となります。

１９章：10 行でズバリ!! コントロールのテンプレート化と再利用 (C#)に行く。

トップページに戻る。