繪製 UpdatePanel 控制項的動畫 (VB)
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" />
此案例中的動畫會套用至 ASP.NET Wizard
網頁控制項,其位於 UpdatePanel
中。 三個 (任意) 步驟提供足夠的選項來觸發回傳:
<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 標記。 不過有一個差異:相較於 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 內發生回傳時,面板的新內容就會順暢地淡入。
下一個精靈步驟即將淡出 (點按以檢視完整大小的影像)