Right-click somewhere on the page or picture.
<%@ Page %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Register TagPrefix="ecd" TagName="Header" Src="../../Controls/Header.ascx"%>
<%@ Register TagPrefix="ecd" TagName="Footer" Src="../../Controls/Footer.ascx"%>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ASP.NET Menu : ExpertMenu Demo : Element-Bound Context Menu</title>
<link href="../../style.css" type="text/css" rel="stylesheet">
</HEAD>
<body xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
<form id="Form1" method="post" runat="server">
<ecd:Header runat=server ID="Header1"></ecd:Header>
<DIV class=prompt>Right-click somewhere on the page or picture.</div>
<img id="PictureCtx" src="images/Cats.jpg" width="130" height="85">
<ec:ExpertPageContextMenu runat="server" id="ExpertMenu1" Skin="WindowsXPGray" EnableViewState="false">
<TopGroup Look-Base="Group" Look-Expand-Effect="GlideTopLeftToBottomRight" Look-Collapse-Effect="GlideBottomRightToTopLeft">
<Items>
<ec:MenuItem DualIconLook-Base="Item" Text="Cut" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_cut.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_cut_over.gif" />
<ec:MenuItem DualIconLook-Base="Item" Text="Copy" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_copy.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_copy_over.gif" />
<ec:MenuItem DualIconLook-Base="Item" Text="Paste" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_paste.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_paste_over.gif" />
<ec:MenuItem DualIconLook-Base="Item" Text="Delete" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_delete.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_delete_over.gif" />
<ec:MenuSeparator />
<ec:MenuItem DualIconLook-Base="ParentItem" Text="IntelliSense">
<SubMenu Look-Expand-Effect="GlideTopLeftToBottomRight" Look-Collapse-Effect="GlideBottomRightToTopLeft">
<Items>
<ec:MenuItem DualIconLook-Base="Item" Text="List Members" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_listMembers.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_listMembers_over.gif" />
<ec:MenuItem DualIconLook-Base="Item" Text="Parameter Info" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_parameterInfo.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_parameterInfo_over.gif" />
<ec:MenuItem DualIconLook-Base="Item" Text="Complete Word" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_completeWord.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_completeWord_over.gif" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuSeparator />
<ec:MenuItem DualIconLook-Base="Item" Text="Add New Item" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_addNewItem.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_addNewItem_over.gif" />
<ec:MenuItem DualIconLook-Base="Item" Text="Add Existing Item" DualIconLook-InitLook-LeftIcon-ImageUrl="images/icon_addExistingItem.gif" DualIconLook-HoveredLook-LeftIcon-ImageUrl="images/icon_addExistingItem_over.gif" />
</Items>
</TopGroup>
</ec:ExpertPageContextMenu>
<ec:ExpertContextMenu runat="server" id="ExpertContextMenu1" ContextElementId="PictureCtx" >
<Looks>
<ec:MenuGroupLook Id="CtxtGroup" ItemSpacing="1" Background-Color="White" Border-Width="1px" Border-Style="Solid" Border-Color="Gray" BindStrategy="AutoBind" Shadow-Color="Gray" />
<ec:MenuItemTextLook Runat="Server" Id="CtxtItem" BindStrategy="AutoBind">
<InitLook Background-Color="White" ForeColor="Black" Padding-Top="2px" Padding-Bottom="2px" Padding-Left="5px" Padding-Right="5px" Font-Name="MS Sans Serif, Verdana" Font-Size="10px" Border-Style="Solid" Border-Width="1px" Border-Color="White" Cursor="Default" />
<HoveredLook Background-Color="Silver" ForeColor="Black" Border-Style="Solid" Border-Width="1px" Border-Color="#888888" />
</ec:MenuItemTextLook>
<ec:ImageLook Id="CtxtSeparator" BindStrategy="AutoBind" ImageResourceUrl="XP.Gray.Separator.gif" Height="1px" Width="100%" Padding-Left="3px" Padding-Right="3px" />
</Looks>
<TopGroup>
<Items>
<ec:MenuItem Text="Load Cats.jpg" OnClientAfter-Click="document.getElementById('PictureCtx').src='images/Cats.jpg'" />
<ec:MenuItem Text="Load Butterfly.jpg" OnClientAfter-Click="document.getElementById('PictureCtx').src='images/Butterfly.jpg'" />
<ec:MenuItem Text="Load Lions.jpg" OnClientAfter-Click="document.getElementById('PictureCtx').src='images/Lions.jpg'" />
<ec:MenuItem Text="Load Tiger.jpg" OnClientAfter-Click="document.getElementById('PictureCtx').src='images/Tiger.jpg'" />
<ec:MenuSeparator />
<ec:MenuItem Text="Reset Image" OnClientAfter-Click="document.getElementById('PictureCtx').src='images/Cats.jpg'" />
</Items>
</TopGroup>
</ec:ExpertContextMenu>
<br>
<ecd:DescriptionView runat="server" IconUrl="../../images/kv.gif" ID="Descriptionview1">
<ecd:Description runat="server" ID="Description1">This page contains 2 context menus.</ecd:Description>
<ecd:Description runat="server" ID="Description2">One of them is a page context menu.</ecd:Description>
<ecd:Description runat="server" ID="Description3">Another menu is bound to the image.</ecd:Description>
<ecd:Description runat="server" ID="Description4">To create a context menu and bound it to an html
element just use the <B>ExpertContextMenu</B> control instead of <B>ExpertMenu</B> control and set the value
of <B>ContextElementId</B> property to a context element's id.</ecd:Description>
<ecd:Description runat="server" ID="Description5"><b>ExpertContextMenu</b> is a subclass of <B>ExpertMenu</B>
and, therefore, contains all parent's functionality.</ecd:Description>
</ecd:DescriptionView>
<ec:CodeViewTab id="CodeViewTab1" runat="server" ImagesBaseUrl="../../images/tab/">
<ec:TabItem runat="server" Text="aspx">
<pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" OutputFile="default.aspx" />
</pre>
</ec:TabItem>
</ec:CodeViewTab>
<ecd:Footer runat=server ID="Footer1"></ecd:Footer>
</form>
</body>
</HTML>