Displaying a Fixed Panel with the AlwaysVisible Control Extender

Modified on 2010/05/04 19:33 by Stephen Walther — Categorized as: Uncategorized

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:ToolkitScriptManager ID="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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:Panel ID="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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:Panel ID="Panel1" CssClass="staticPanel" runat="server">
    <h2>Hello World!</h2>
</asp:Panel>

<asp:AlwaysVisibleControlExtender 
    ID="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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple AlwaysVisible</title>
    <style type="text/css">
        html {
            background-color: #cccccc;   
        }
        
        .staticPanel {
             width: 150px;
             background-color: White;  
             border: solid 1px black;
             padding: 10px; 
        }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
            
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

    <asp:Panel ID="Panel1" CssClass="staticPanel" runat="server">
        <h2>Hello World!</h2>
    </asp:Panel>

    <asp:AlwaysVisibleControlExtender 
        ID="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: