Theme + asp:menu + ImageUrl = Help

[Guest]

Hi, I'm using images in my menu control. I have my menu setup based on this
example:
http://msdn2.microsoft.com/en-US/li...ols.menuitembinding.imageurlfield(VS.80).aspx

I have a theme and right now, the theme structure looks like...

App_Themes
--Authenticated
----Images
------Menu
--------Item.jpg
--------Item2.jpg
--------Item3.jpg
--------etc.jpg

In my menu.xml file I have my nodes defined as follows:


<MapHomeNode NavigateUrl="~/ProjectBackground/default.aspx"
ImageUrl="~/App_Themes/Authenticated/Images/Menu/application_home.png"
Title="Project Background"
Description="Project Background"
ToolTip="Project Background">
</MapHomeNode>

My problem is that I can't seem to get the ImageUrl to funcion with the
themes. I've tried:
ImageUrl="Images/Menu/application_home.png"
ImageUrl="/Images/Menu/application_home.png"
ImageUrl="~/Images/Menu/application_home.png"

I would expect the first one to work, but it doesn't!

Both of these work just fine (they both render the same way)
ImageUrl="~/App_Themes/Authenticated/Images/Menu/application_home.png"
ImageUrl="App_Themes/Authenticated/Images/Menu/application_home.png"

I feel that I'm well versed in 1.1, but 2.0 remains egnigmatic. I'm sure
that I'm overlooking the obvious, would someone please help me out?

Thanks,

 

[Steven Cheng[MSFT]]

Hi Bennett,

Welcome to the MSDN newsgroup.

Regarding on the Menu control with databinding xml source and Theme
question, based on my understanding, if you're wantting to both use XML
DataSource's attribute as databind source for ImageUrl , but also use Theme
(folder) specific path , that is not supported currently. This is because
the Theme specific path is only available to those setting which is defined
in the Theme file(skin file) which is compiled into certain control at
runtime (at the initialize time). For databinding , it occur after the
theme is applied, so it won't be able to utilize the Theme specific path
interpreting.

I've just performed some tests on my side and we can make our Node use the
theme specific path through those default properties instead of databinding
field(since these properties can be set in the skin file that can be
compiled at theme initialize time). For example:

========in skin file=================

<asp:Menu SkinID="Main" runat="server" >
<DataBindings>
<asp:MenuItemBinding DataMember="MapHomeNode" FormatString="({0})"

Target="_self" TextField="Title" ToolTipField="ToolTip"
ValueField="Description"
ImageUrl="Images/Menu/item.jpg"
/>
<asp:MenuItemBinding DataMember="MapNode" FormatString="[{0}]"
Target="_blank" TextField="Title"
ToolTipField="ToolTip" ValueField="Description"
Depth="1" ImageUrl="Images/Menu/item1.jpg"/>
<asp:MenuItemBinding DataMember="MapNode" FormatString="|{0}|"
Target="_blank" TextField="Title"
ToolTipField="ToolTip" ValueField="Description"
Depth="2" ImageUrl="Images/Menu/item2.jpg"/>
</DataBindings>
</asp:Menu>
=============================

======== in aspx page=========

<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1"
SkinID="Main">

</asp:Menu>
=========================

We can see that we use "ImageUrl" property to specify theme specific path
for the Node and let other field still utilize databinding fields from xml
datasource.

Hope this helps.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

 

[Guest]

Ok, since dynamically configured ImageUrl's cannot be themed and I'm new to
2.0, is it possible to determine the current Theme directory to perform a
manual string concat in MenuItemDataBound?

 

[Guest]

Ben,
How about trying Skins?

DWS

 

[Steven Cheng[MSFT]]

Thanks for your response Ben,

I think your idea is really cool, I did missed the "MenuItemDataBound"
event, I've tested it and we can do this as long as we know the sub folder
structure under each Theme's folder. And the page's current Theme can be
got through Page.Theme property. For example, we can add our code in Menu's
MenuItemDatabound event handler as below:

=====================

protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
{
string path;

switch(e.Item.Depth)
{
case 0:
path = Page.ResolveUrl("~/App_Theme/" +Page.Theme +
"/Images/Menu/item.jpg");
break;
case 1:
path = Page.ResolveUrl("~/App_Theme/" +Page.Theme +
"/Images/Menu/item1.jpg");
break;
case 2:
path = Page.ResolveUrl("~/App_Theme/" +Page.Theme +
"/Images/Menu/item2.jpg");
break;

e.Item.ImageUrl = path;
}

}
======================

BTW, you can also consider the approach in my last reply which make each
Theme's MenuItem databinding setting in the Theme also.

Hope this helps.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)