Displaying a Fixed Panel with the AlwaysVisible Control Extender
In this tutorial, you learn how to use an AlwaysVisible control extender to cause a Panel control to appear statically in a page. There are four steps: (1) Add a ToolkitScriptManager (2) Add a Panel (3) Add an AlwaysVisible control extender (4) Add Cascading Style Sheet styles.To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.
Add a ToolkitScriptManager
Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager>
Add a Panel
Next, you need to add a standard ASP.NET Panel control to the page. The Panel control contains the content that you want to appear statically<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Panel1"CssClass="staticPanel"runat="server"><h2>Hello World!</h2></asp:Panel>
Add the AlwaysVisible Control Extender
Next, in order to cause the Panel control to be always visible at the top-right corner of your page, add an AlwaysVisible control extender to the page. Notice that the TargetControlID property of the AlwaysVisible control points at the Panel control.<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Panel1"CssClass="staticPanel"runat="server"><h2>Hello World!</h2></asp:Panel><asp:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"TargetControlID="Panel1"VerticalSide="Top"VerticalOffset="10"HorizontalSide="Right"HorizontalOffset="10"runat="server"/>
Add Styles
Finally, in order to improve the appearance of the Panel control, you should style the Panel control with Cascading Style Sheet styles.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="AlwaysVisible_Simple" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Simple AlwaysVisible</title><styletype="text/css"> html { background-color: #cccccc; } .staticPanel { width: 150px; background-color: White; border: solid 1px black; padding: 10px; } </style></head><body><formid="form1"runat="server"><div><asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"></asp:ToolkitScriptManager><asp:PanelID="Panel1"CssClass="staticPanel"runat="server"><h2>Hello World!</h2></asp:Panel><asp:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"TargetControlID="Panel1"VerticalSide="Top"VerticalOffset="10"HorizontalSide="Right"HorizontalOffset="10"runat="server"/><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p><p> Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p><p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. </p></div></form></body></html>
The final result looks like this:
Click here to see the final result