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:

1

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

My panel was then setup like so:

1
2
3
4
5
6
7

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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!