ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. UpdatePanel 콘텐츠의 경우 애니메이션 프레임워크 UpdatePanelAnimation에 크게 의존하는 특수 확장기가 있습니다. 이 자습서에서는 UpdatePanel에 대해 이러한 애니메이션을 설정하는 방법을 보여줍니다.
개요
ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 의 UpdatePanel콘텐츠의 경우 애니메이션 프레임워크 UpdatePanelAnimation에 크게 의존하는 특수 확장기가 있습니다. 이 자습서에서는 에 대해 UpdatePanel이러한 애니메이션을 설정하는 방법을 보여줍니다.
단계
첫 번째 단계는 ASP.NET AJAX 라이브러리가 로드되고 제어 도구 키트를 사용할 수 있도록 페이지에 를 포함하는 ScriptManager 일반적인 단계입니다.
<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. 컨트롤 <Animations> 내에서 UpdatePanelAnimationExtender 요소는 애니메이션에 대한 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 내에서 포스트백이 발생할 때마다 패널의 새 내용이 원활하게 페이드됩니다.
다음 마법사 단계가 페이드인(전체 크기 이미지를 보려면 클릭)
