| About the demo |
 |
This demo creates a custom looking menu that demonstrates a number of available features.
|
|
With ExpertMenu you can define a number of Looks - objects that contain only
decoration and layout properties (borders, fonts, paddings, cursors, alignment, shadows, icons etc.)
- and then inherit one of those looks in an item, group or separator :
<ec:MenuItem Text="Show All Files" DualIconLook-Base="Item" />.
Here a menu item's private DualIconLook inherits a base "Item" look.
|
|
Looks inheritance behaves much the same as class inheritance in OOP. It allows you to define
entities only in one place and avoid unnecessary duplication.
|
|
Looks also introduce Model-View separation. You build a menu hierarchy (model) separately from its
view. A model object (an item, a group, or a separator) contains a reference to its private look,
which can inherit another look, which, in turn, can inherit another look etc. An object's private look can also
redefine a number of properties making object's appearance distinctive.
|
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Page %>
<%@ 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 : Yellow Vertical</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" />
<div style="MARGIN-LEFT:100px">
<ec:ExpertMenu runat="server" id="ExpertMenu1" EnableViewState="False" Skin="Custom">
<Looks>
<ec:MenuGroupLook Id="Group" RawStyle="filter:progid:DXImageTransform.Microsoft.Shadow(color='#838354', Direction=135, Strength=5)"
ItemSpacing="1" Orientation="Vertical" CascadeCollapse="True" Border-Style="Solid" Border-Width="1px"
Border-Color="#90903C" Background-Color="#FFFFBB" Offset-Horizontal="-6" Offset-Vertical="6" />
<ec:MenuItemDualIconLook Id="Item">
<InitLook Cursor="Pointer" Border-Style="Solid" Border-Width="1px" Border-Color="#FFFFBB">
<RightIcon Width="18px" Height="18px" />
<TextSection ForeColor="Black" Wrap="False" Padding-Left="10px" Padding-Top="2px" Padding-Right="10px"
Padding-Bottom="2px" Font-Name="Verdana" Font-Size="12px" />
</InitLook>
<HoveredLook Cursor="Pointer" Border-Style="Solid" Border-Width="1px" Border-Color="#90903C"
Background-Color="#D8D884" />
<ExpandedLook Cursor="Pointer" Border-Style="Solid" Border-Width="1px" Border-Color="#A2A252"
Background-Color="#E3E39A" />
</ec:MenuItemDualIconLook>
<ec:MenuItemDualIconLook Id="TopItem" Base="Item" InitLook-LeftIcon-Width="18px" InitLook-LeftIcon-Height="18px" />
</Looks>
<TopGroup Look-Base="Group">
<Items>
<ec:MenuItem Text="File" DualIconLook-Base="TopItem" DualIconLook-InitLook-RightIcon-ImageResourceUrl="ArrowRightBlack.gif">
<SubMenu>
<Look Base="Group" Orientation="Horizontal" Expand-Effect="GlideLeftToRight" Collapse-Effect="GlideRightToLeft" />
<Items>
<ec:MenuItem Text="New" DualIconLook-Base="Item" DualIconLook-InitLook-RightIcon-ImageResourceUrl="ArrowUpBlack.gif">
<SubMenu>
<Look Base="Group" ExpandDirection="AboveRight" Expand-Effect="GlideBottomToTop" Collapse-Effect="GlideTopToBottom"
Offset-Horizontal="-2" Offset-Vertical="2" />
<Items>
<ec:MenuItem Text="Project" DualIconLook-Base="Item" />
<ec:MenuItem Text="File" DualIconLook-Base="Item" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Open" DualIconLook-Base="Item" DualIconLook-InitLook-RightIcon-ImageResourceUrl="ArrowDownBlack.gif">
<SubMenu>
<Look Base="Group" ExpandDirection="BelowRight" Expand-Effect="GlideTopRightToBottomLeft"
Collapse-Effect="GlideBottomLeftToTopRight" Offset-Horizontal="-2" Offset-Vertical="-1" />
<Items>
<ec:MenuItem Text="File" DualIconLook-Base="Item" />
<ec:MenuItem Text="File From Web" DualIconLook-Base="Item" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Save" DualIconLook-Base="Item" />
<ec:MenuItem Text="Save As..." DualIconLook-Base="Item" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Edit" DualIconLook-Base="TopItem" DualIconLook-InitLook-RightIcon-ImageResourceUrl="ArrowRightBlack.gif">
<SubMenu>
<Look Base="Group" ExpandDirection="RightUp" Expand-Effect="GlideBottomLeftToTopRight"
Collapse-Effect="GlideTopRightToBottomLeft" Offset-Horizontal="-6" Offset-Vertical="-9" />
<Items>
<ec:MenuItem Text="Cut" DualIconLook-Base="Item" />
<ec:MenuItem Text="Copy" DualIconLook-Base="Item" />
<ec:MenuItem Text="Paste" DualIconLook-Base="Item" />
<ec:MenuItem Text="Find and Replace" DualIconLook-Base="Item" DualIconLook-InitLook-RightIcon-ImageResourceUrl="ArrowDownBlack.gif">
<SubMenu>
<Look Base="Group" Orientation="Horizontal" ExpandDirection="BelowLeft" Expand-Effect="GlideTopToBottom"
Collapse-Effect="GlideTopToBottom" Offset-Horizontal="6" Offset-Vertical="-2" />
<Items>
<ec:MenuItem Text="Find" DualIconLook-Base="Item" />
<ec:MenuItem Text="Replace" DualIconLook-Base="Item" />
<ec:MenuItem Text="Find Symbol" DualIconLook-Base="Item" />
</Items>
</SubMenu>
</ec:MenuItem>
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="View" DualIconLook-Base="TopItem" DualIconLook-InitLook-LeftIcon-ImageResourceUrl="ArrowLeftBlack.gif">
<SubMenu>
<Look Base="Group" ExpandDirection="LeftUp" Expand-Effect="GlideRightToLeft" Collapse-Effect="GlideRightToLeft"
Offset-Horizontal="6" Offset-Vertical="-9" />
<Items>
<ec:MenuItem Text="Open" DualIconLook-Base="Item" />
<ec:MenuItem Text="Open With" DualIconLook-Base="Item" />
</Items>
</SubMenu>
</ec:MenuItem>
<ec:MenuItem Text="Project" DualIconLook-Base="TopItem" DualIconLook-InitLook-RightIcon-ImageResourceUrl="ArrowRightBlack.gif">
<SubMenu Look-Base="Group" Look-Expand-Effect="GlideTopLeftToBottomRight" Look-Collapse-Effect="GlideBottomRightToTopLeft">
<Items>
<ec:MenuItem Text="Copy Project..." DualIconLook-Base="Item" />
<ec:MenuItem Text="Exclude From Project" DualIconLook-Base="Item" />
<ec:MenuItem Text="Show All Files" DualIconLook-Base="Item" />
</Items>
</SubMenu>
</ec:MenuItem>
</Items>
</TopGroup>
</ec:ExpertMenu>
</div>
<br>
<ecd:DescriptionView runat="server" IconUrl="../../images/kv.gif" id="DescriptionView1">
<ecd:Description id="Description1" runat="server">
This demo creates a custom looking menu that demonstrates a number of available features.
</ecd:Description>
<ecd:Description id="Description2" runat="server">
With <b>ExpertMenu</b> you can define a number of <b>Looks</b> - objects that contain only
decoration and layout properties (borders, fonts, paddings, cursors, alignment, shadows, icons etc.)
- and then inherit one of those looks in an item, group or separator :
<ecd:SyntaxHighlight runat="server" ContentType="ASPX"><ec:MenuItem Text="Show All Files" DualIconLook-Base="Item" /></ecd:SyntaxHighlight>.
Here a menu item's private <b>DualIconLook</b> inherits a base <b>"Item"</b> look.
</ecd:Description>
<ecd:Description id="Description3" runat="server">
Looks inheritance behaves much the same as class inheritance in OOP. It allows you to define
entities only in one place and avoid unnecessary duplication.
</ecd:Description>
<ecd:Description id="Description4" runat="server">
Looks also introduce Model-View separation. You build a menu hierarchy (model) separately from its
view. A model object (an item, a group, or a separator) contains a reference to its private look,
which can inherit another look, which, in turn, can inherit another look etc. An object's private look can also
redefine a number of properties making object's appearance distinctive.
</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>
<br>
<ecd:Footer runat="server" ID="Footer1"></ecd:Footer>
</form>
</body>
</HTML>