UpdatePanel コントロールをアニメーションにする (VB)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 UpdatePanel のコンテンツには、アニメーション フレームワーク UpdatePanelAnimation に大きく依存する特別なエクステンダーが存在します。 このチュートリアルでは、UpdatePanel 用にそのようなアニメーションを設定する方法について説明します。
概要
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 UpdatePanel のコンテンツには、アニメーション フレームワーク UpdatePanelAnimation に大きく依存する特別なエクステンダーが存在します。 このチュートリアルでは、UpdatePanel 用にそのようなアニメーションを設定する方法について説明します。
手順
最初のステップは、通常どおり、ページに ScriptManager を含めることです。これにより、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit が使用できるようになります。
<asp:ScriptManager ID="asm" runat="server" />
このシナリオのアニメーションは、UpdatePanel にある ASP.NET Wizard Web コントロールに適用されます。 3 つの (任意の) 手順により、ポストバックをトリガーするための十分なオプションが提供されます。
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Wizard ID="Wizard1" runat="server">
<WizardSteps>
<asp:WizardStep runat="server" StepType="Start" Title="Ready!">
</asp:WizardStep>
<asp:WizardStep runat="server" StepType="Step" Title="Set!">
</asp:WizardStep>
<asp:WizardStep runat="server" StepType="Finish" Title="Go!">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanelAnimationExtender コントロールに必要なマークアップは、AnimationExtender に使用されるマークアップと非常によく似ています。 TargetControlID 属性には、アニメーションにする UpdatePanel の ID を指定します。UpdatePanelAnimationExtender コントロール内の <Animations> 要素は、アニメーションの XML マークアップを保持します。 ただし、違いが 1 つあります。AnimationExtender と比較して、イベントとイベント ハンドラーの量が制限されています。 UpdatePanels の場合、次の 2 つだけが存在します。
<OnUpdated>UpdatePanel が更新されたとき<OnUpdating>UpdatePanel が更新を開始したとき
このシナリオでは、(ポストバック後) の UpdatePanel の新しいコンテンツがフェードインします。 以下は、そのために必要なマークアップです。
<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<FadeIn Duration="1.0" Fps="24" />
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
これで、UpdatePanel 内でポストバックが発生するたびに、パネルの新しいコンテンツがスムーズにフェードインします。
次のウィザードステップはフェードインしています (クリックしてフルサイズの画像を表示します)
