UpdatePanel コントロールをアニメーションにする (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 UpdatePanel のコンテンツには、アニメーション フレームワーク UpdatePanelAnimation に大きく依存する特別なエクステンダー コントロールが存在します。 このチュートリアルでは、UpdatePanel 用にそのようなアニメーションを設定する方法について説明します。

概要

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 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 内でポストバックが発生するたびに、パネルの新しいコンテンツがスムーズにフェードインします。

The next wizard step is fading in

次のウィザードステップはフェードインしています (クリックするとフルサイズの画像が表示されます)

前へ次へ