HOW TO: Show Right-to-Left arrows in Menu Controls, for ASP.NET 2.0
Applies to
- Microsoft ASP.NET 2.0
- Microsoft Visual Studio 2005
Summary
Details
Step-by-Step
References
Summary
Microsoft ASP.NET 2.0 introduces the Menu control, which can be used to represent hierarchical data. This step-by-step article describes how to display the Menu control pop-out arrow correctly, when you display a right-to-left (rtl) page. When you set your page to rtl orientation the Menu arrows remain to point to the right, even though the items are correctly placed on the left of the root items.
You can download the rtl arrow and use it directly in your Web page.
Details
The default appearance of the Menu control is appropriate for displaying a navigation menu for a Web page. By default, the Menu control displays a vertical oriented menu.
When you simply set the orientation of the page or the <div> to rtl, the menu control automatically aligns to the right and the pop-up items appear on the left. However, the arrows remain pointing to the right.
The below code shows how to add simple static elements to the menu control:
<html dir=rtl>
<body>
<form id="form1" runat="server">
<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Text="ألوان" Value="ألوان">
<asp:MenuItem Text="أحمر" Value="أحمر"></asp:MenuItem>
<asp:MenuItem Text="أزرق" Value="أزرق"></asp:MenuItem>
<asp:MenuItem Text="أخضر" Value="أخضر"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="أشكال" Value="أشكال">
<asp:MenuItem Text="دائرة" Value="دائرة"></asp:MenuItem>
<asp:MenuItem Text="مربع " Value="مربع"></asp:MenuItem>
<asp:MenuItem Text="مثلث " Value="مثلث"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</form>
</body>
</html>
|
As you can see, figure 1 shows the menu items are correctly displayed to the left of the root items but the arrows are still pointing to the right.
 |
| Figure 1 |
To fix this, you need to follow the steps below and your code should be as follows:
<html dir=rtl>
<body>
<form id="form1" runat="server">
<asp:MenuID="Menu1" runat="server"StaticPopOutImageUrl ="~/Menu_Popout.gif" DynamicPopOutImageUrl ="~/Menu_Popout.gif">
<Items>
<asp:MenuItem Text="ألوان" Value="ألوان">
<asp:MenuItem Text="أحمر" Value="أحمر"></asp:MenuItem>
<asp:MenuItem Text="أزرق" Value="أزرق"></asp:MenuItem>
<asp:MenuItem Text="أخضر" Value="أخضر"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="أشكال" Value="أشكال">
<asp:MenuItem Text="دائرة" Value="دائرة"></asp:MenuItem>
<asp:MenuItem Text="مربع " Value="مربع"></asp:MenuItem>
<asp:MenuItem Text="مثلث " Value="مثلث"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</form>
</body>
</html>
|
Browse your ASP.NET page and you can now view your rtl Menu correctly, check figure 2.
 |
| Figure 2 |
Step-by-Step
You can customize the pop-out images to show your rtl pop-out, by following these simple steps.
- Capture the pop-out arrow and using an image editor, "flip –horizontal" to point to the left. Don't forget to set your background to transparent to avoid unwanted colors.
Or
- Download the correct arrow from here (recommended).
-
Add your new pop-out image to your Web application.
- Right-click on the web project.
- Select "Add Existing Item"
- Select your arrow image, for example, menu_popout.gif.
-
Finally set Menu.StaticPopOutImageURL= Menu_Popout.gif & Menu. DynamicPopOutImageUrl = Menu_Popout.gif. More details above.
References
Middle East MSDN
ASP.NET Menu Control Overview
|
