コントロールを拡大、縮小する方法とコントロールの利用可能、不可能を設定する方法（サンプル5）
アニメーションの中には一定の比率による変更ができるScale Animationがあります。また、アニメーションの中にはコントロールの利用可能、不可能の設定を行うEnableActionがあります。
サンプル5概要
ページ上にButtonコントロール2つとCalendarコントロールを配置します。プロパティ設定はButton1のTextプロパティに［拡大］、Button2のTextプロパティに［縮小］と設定してください（図24）。
Button1がクリックされた時にCalendarコントロールを倍の大きさに拡大し、Button2がクリックされた時にCalendarコントロールを縮小するコードは、次のようになります。このサンプルではボタンなどのコントロールの2度押しなどを防ぐことが可能なEnableActionも利用しています。［拡大］ボタン、［縮小］ボタンがクリックされた際にそれぞれのアニメーションが動作している間は利用不可能にし、アニメーションが終了した段階で利用可能な設定に戻しています。
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1"> <Animations> <OnClick> <Sequence> <EnableAction Enabled="false" /> <Scale AnimationTarget="Calendar1" scaleFactor="2." Unit="px" ScaleFont="true" FontUnit="px" /> <EnableAction Enabled="true" /> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Button2"> <Animations> <OnClick> <Sequence> <EnableAction Enabled="false" /> <Scale AnimationTarget="Calendar1" scaleFactor=".5" Unit="px" ScaleFont="true" FontUnit="px" /> <EnableAction Enabled="true" /> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender>
実行時の画面は図25のようになります。［拡大］ボタンをクリックしている時の画面が図26で、拡大処理終了後の画面が図27のようになっています。また、［縮小］ボタンをクリックしている時の画面が図28のようになり、縮小処理終了後の画面が図29のようになります。
Scale Animationを利用して拡大縮小を行うには、scaleFactorプロパティの設定を行うことで可能になります。0.5で半分のサイズに、1で標準サイズ、2.0で倍の大きさに拡大縮小が可能になります。また、ScaleFontがTrueに設定されている場合は文字も拡大縮小されます。Unitプロパティは対象のターゲットの比率が変更される際の単位です。デフォルトの設定ではpxです。FontUnitはScaleFontがTrueの時に文字の拡大縮小を可能にします。デフォルトの設定ではptです。Unitプロパティ、FontUnitプロパティそれぞれのデフォルトの単位が違う点に注意してください。
EnableActionのEnabledプロパティはtrueに設定すると利用可能に、Enabledプロパティをfalseに設定すると利用不可能になります。日々の中で使うパターンとして考えられるのは、ボタンなどがクリックされた際に2度押しをさせないために、クリックした段階で対象のコントロールを利用不可能にすることなどが挙げられます。
