繪製 UpdatePanel 控制項的動畫 (VB)

作者 ：一個是一個

下載 PDF

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，而是將動畫新增至控制項的整個架構。 針對 UpdatePanel 的內容，有一個特別的擴充項依賴動畫架構：UpdatePanelAnimation。 本教學課程說明如何設定 UpdatePanel 的這類動畫。

概觀

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，而是將動畫新增至控制項的整個架構。 針對 的內容 UpdatePanel ，有一個特別擴充項存在，且高度依賴動畫架構： UpdatePanelAnimation 。 本教學課程示範如何設定 UpdatePanel 的這類動畫。

步驟

第一個步驟是像往常一樣包含在 ScriptManager 頁面中，以便載入 ASP.NET AJAX 程式庫，而且可以使用 Control Toolkit：

<asp:ScriptManager ID="asm" runat="server" />

此案例中的動畫會套用至 位於 中的 UpdatePanel ASP.NET Wizard Web 控制項。 三個 (任意) 步驟提供足夠的選項來觸發回傳：

<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 ，我們會提供 ID 的 UpdatePanel 來產生動畫效果;在 控制項內 UpdatePanelAnimationExtender ， <Animations> 元素會保存動畫的 XML 標記 () 。 不過，有一個差異：相較于 ，事件和事件處理常式的數量會受到限制 AnimationExtender 。 針對 UpdatePanels ，只有兩個存在：

• <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 內發生回傳時，面板的新內容就會順暢地淡入。

下一個精靈步驟會在 (按一下以檢視完整大小的影像)

上一個下一個