繪製 UpdatePanel 控制項的動畫 (C#)

作者 ：擷取 Wenz

下載 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 ，我們提供 UpdatePanelID 的 以動畫顯示;在 控制項內 UpdatePanelAnimationExtender ， <Animations> 元素會保存動畫的 XML 標記， (s) 。 不過，有一個差異：與 相較 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 內發生回傳時，面板的新內容就會順暢地淡入。

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

上一個下一個