ItemSubMenuOffset.FirstItemX Property

Gets or sets the horizontal offset of a submenu relative to its parent menu item which is the first item at its menu level.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.2.dll

Declaration

C#

[DefaultValue(0)]
public int FirstItemX { get; set; }

VB.NET

<DefaultValue(0)>
Public Property FirstItemX As Integer

Property Value

Type	Default	Description
Int32	0	An integer value specifying the horizontal offset of a submenu.

Remarks

Use the FirstItemX property to specify the horizontal offset of a submenu displayed for the first menu item at a menu level. This offset is specified by the number of pixels to shift a submenu horizontally relative to its parent menu item.

Example

This part of the Tabbed Menu demo illustrates how to customize the ASPxMenu control as a hierachical menu (with popped out submenus) which looks like a set of tabs.

Gradient borders for the menu’s root items (tabs) are drawn by using the RootItemTextTemplate property. The control’s style settings are defined via the ASPxMenuBase.ItemStyle property, ASPxMenuBase.SubMenuStyle property,etc.

ASPX

...
<dxm:ASPxMenu EnableTheming="False" ID="ASPxMenu1" CssClass="TabbedMenu" 
runat="server" AppearAfter="0" DataSourceID="XmlDataSource1" ItemSpacing="0px" 
SeparatorHeight="28px" SeparatorWidth="1px" ShowSubMenuShadow="False" 
BorderBetweenItemAndSubMenu="HideRootOnly" Font-Names="Tahoma" Font-Size="8pt" 
Font-Underline="False" ForeColor="Black" AutoPostBack="True" SyncSelectionMode="None" 
ClientInstanceName="tabbedMenu" AllowSelectItem="True" SelectParentItem="True">
     <ItemStyle CssClass="rootItem" Wrap="False">
         <BackgroundImage ImageUrl="~/Menu/Images/TabbedMenu/RootItemSeparator.gif" 
         Repeat="NoRepeat" HorizontalPosition="right" />
         <Paddings Padding="0px" />
         <HoverStyle CssClass="rootItemHover">
         </HoverStyle>
         <SelectedStyle CssClass="rootItemSelected">
         </SelectedStyle>
     </ItemStyle>
     <Paddings Padding="0px" />
     <Border BorderStyle="None" />
     <RootItemSubMenuOffset X="-1" Y="-2" FirstItemX="-1" FirstItemY="-2" LastItemX="-1"
         LastItemY="-2" />
     <SubMenuStyle GutterWidth="0px" ItemSpacing="0px" BackColor="White" CssClass="menu">
         <Paddings Padding="1px" />
         <Border BorderColor="#919191" BorderStyle="Solid" BorderWidth="1px" />
     </SubMenuStyle>
     <SubMenuItemStyle Wrap="False">
         <HoverStyle BackColor="#EDEDED">
             <Border BorderWidth="0px" />
         </HoverStyle>
         <Paddings Padding="5px" PaddingLeft="7px" PaddingRight="7px" />
     </SubMenuItemStyle>
     <VerticalPopOutImage Height="5px" Url="~/Menu/Images/TabbedMenu/ItemArrow.gif" 
     Width="4px" />
     <ItemSubMenuOffset X="-1" Y="-2" FirstItemY="-3" LastItemY="-2" />
     <LinkStyle Color="Black">
         <Font Underline="False"></Font>
     </LinkStyle>
     <RootItemTextTemplate>
         <div><table cellpadding="0" cellspacing="0" border="0"><tr>
         <th class="WhiteBorderRight">
         <dxe:ASPxLabel ID="lblText" runat="server" EnableTheming="False" Text='<%# Eval("Text") %>' />
         </th></tr></table></div>
     </RootItemTextTemplate>
 </dxm:ASPxMenu>
...