背景色をじわじわ定期的に変えてみた。

WPF4が持つアニメーション系機能の習作。そのまま仕事で使えるわけでない。
背景色を青→白→青…。という感じで変わるだけ。

<Window x:Class="TwAnime1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TwAnime1" Height="300" Width="300">
<Grid>
<Grid.Resources>
<Style TargetType="Grid">
<Setter Property="Background" Value="SkyBlue"/>
</Style>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background.Color">
<ColorAnimation From="White" To="Blue"
Duration="0:0:3"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
</Grid>
</Window>

ここで初めて使うのがTrigger3人衆最後の1人であるEventTrigger。
プロパティである「RoutedEvent」は、その名の通り、RoutedなEventクラスしか指定できない。
今回は、起動時(Loaded)にアニメーションが実行されるように設定している。
アニメーションの設定は、
Grid.Triggers→EventTrigger.Actions→BeginStoryboard→Storyboard
と、階層の深いところが、なんとなく面倒くささを感じる。
StoryboardのTargetPropertyは、アニメーションさせるプロパティ。
最初、「Background」を設定してたんだけど、動かなかった。あれ?と思い、Loadedではなく、MouseEnterで試すと、以下のような例外を発生して落ちた。Orz

System.InvalidOperationException: 'System.Windows.Media.Animation.ColorAnimation' アニメーション オブジェクトは、互換性のない型 'System.Windows.Media.Brush' であるため、プロパティ 'Background' をアニメーションで表示するためには使用できません。

まあ、あれだ。Backgroundプロパティには使えないと。じゃあってんで、Background.Colorにしたら、動いた次第。
ColorAnimationは、色用のAnimationクラス。数値系ならDoubleAnimation。
数値系は、幅(Width)、高さ(Height)、透明度(Opacity)に使えそう。
このAnimation系には、色々な設定ができる。
○FromとTo:始まりの値と終了時の値。省略可能だったりする。
○Duration:FromからToに至るまでに掛ける時間。
 指定方式は、「H:m:s.f」(fはミリ秒)
○By:FromやToではなく、振れ幅で指定できる。
 From=50 By=50の場合は、50から始まり、100で終わる。
○AutoReverse:自動でFromに戻るかどうか。
 Trueにすると、1つのアニメーションに掛かる時間的コストが倍になる。
○RepeatBehavior:繰り返し回数あるいは、繰り返し時間。Foreverを設定すると、無限になる。

他にもあるけど、使ってみないとピンと来ないのがあったりする…。
Windows7でWPF4を使うと、TextBoxやButtonに結構アニメーションが使われている。
WPF Themesにあるリソース用XAMLにそれっぽいのがあるんだけど、あれ、いっぱい記述されてて、読む気になれない…。
スポンサーサイト
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: WPF4 | コメント: 0 | トラックバック: 0


この記事へのコメント

コメントの投稿

非公開コメント


サイドバー背後固定表示サンプル

当ブログに書かれたソースコードは流用自由です。

バグ、スペルミス等はありうる事です。

ご利用の際は自己責任でお願いしますm(_ _)m