Using Animations with the PopupControlExtender

I was looking for a solution to provide a “fly-in” form when a user would click on a particular button. I found it with the PopupControlExtender. The documentation for Animations with controls is poor so with some testing, I finally got a solution working for me. I added a button and a panel on my page. I set the panel below the button and set the style to:


.myPanel { background-color: white; border: 1px solid black; z-index: 99; width: 0px; height: 0px; }


My panel was then setup like so:


<asp:Panel ID=”MyTestPanel” runat=”server” CssClass=”myPanel” >
<asp:RadioButtonList ID=”TestRadioButtonList” runat=”server” AutoPostBack=”true”>

<asp:ListItem Text=”Item 1″ />

<asp:ListItem Text=”Item 2″ />

</asp:RadioButtonList><br /><br />

 

<asp:Button ID=”MyTestButton” runat=”server” Text=”Close” />

</asp:Panel>


Then, I added the PopupControlExtender like so:



<ajax:PopupControlExtender ID=”MyTestPopupControlExtender” runat=”server”

TargetControlID=”TestButton” PopupControlID=”MyTestPanel” Position=”Bottom”>

<Animations>

<OnShow>

<Sequence>

<HideAction Visible=”true” />

<Parallel Duration=”.2″>

<Resize Height=”200″ Width=”300″ />

</Parallel>

</Sequence>

</OnShow>

<OnHide>

<Sequence>

<StyleAction Attribute=”overflow” Value=”hidden”/>

<Parallel Duration=”.2″>

<Resize Height=”0″ Width=”0″ />

</Parallel>

<HideAction Visible=”false” />

</Sequence>

</OnHide>

</Animations>

</ajax:PopupControlExtender>


The panel and the actions are hidden when the button is clicked, so we needed to add <HideAction Visible=”true” /> to the OnShow animation sequence. During the OnHide animation, we’ll need to set the visible property to false. We’ll also want to add <StyleAction Attribute=”overflow” Value=”hidden”/> just in case the user clicks on another button or form item that postbacks. This hides the contents of the panel.


Happy programming!

Life with Visual Studio 2008

Wally McClure, a Microsoft MVP and ASPInsider, has put together a group of posts regarding “his life with Visual Studio 2008.” It’s great that someone has time to blog about their experience with VS 2008. Seriously though, Wally does a great job explaining his experiences and working through the bugs that I have no patience to deal with.