Hi!

I've been doing some work in the new Visual Studio, and i've encounter some problems in the reference of images when using a Theme.

I've got this directory structure in my web project:

root\
  App_Theme\
    Default\
      Images\
        Controls\
          Tree\
            Tree.Gif
  Docs\
    DOcuments.aspx
  MainMasterPage.Master
  DocsMasterPage.Master

I've got the "DocsMasterPage.Master"  Inherits from the MainMasterPage.Master. And the "Documents.aspx" inherits from the "DocsMasterPage.Master".

I've got a TreeView control in the "DocsMasterPage.Master", and i need to reference the image inside the theme folder to a node. Something like this..

You want to use the "~/" format, but you'll need to specify the complete path, which in your case would look like "~/App_Theme/Default/Images/Controls/Tree/Tree.gif".

Hope this helps!

Oh, sorry, I glossed over the themes aspect of the question.

After reading more closely I set up a web like yours and was able to get the image to display by setting ImageUrl="Images/controls/tree/tree.gif".  I put the skin file for the default theme in the Default directory.  Is that where yours is?

I also just noticed that in your web structure the image file is listed as "tree.gif", but the treenode is trying to use a "root.gif".  If that's not a type in the post, that could be the source of the problem.

IluDeR wrote:

Hi, thank you for your reply...

Hmm...i've understand that now, but how can i set a skinid to a speficic treenode?

Thank you.

taniam wrote:

You want to use the "~/" format, but you'll need to specify the complete path, which in your case would look like "~/App_Theme/Default/Images/Controls/Tree/Tree.gif".

 

Hope this helps!

jcasp:

The way you're explicitly referencing the Image sub-directory within the App_Theme goes counter to how Theme should be used.  Instead, you should be defining a SkinFile(s) under the App_Theme directory (another subdirectory for the skin) that contains the definition for the control involved (minus the ID or other page specific attributes) so that changing the Theme value later makes everything portable (contained within each Theme directory).  Any other resources that are not related to Theme should not be kept under the App_Theme directory in order to avoid the exact issue you're facing. 

Took me quite a while to realise that what Star said actually alludes to the solution (though it doesn't state it outright).

If you reference an image from a content page or master page using ImageUrl it simply will not work.  It assumes you are referencing a file in the root directory rather than converting that reference according to the currently applied theme for the content page.

The only way to reference images in a theme from any page (without hardcoding a reference to "App_Themes/MyTheme/resource.bmp", which COMPLETELY defeats the point of themes and is a fairly pointless exercise) is to create a skin that defines the url of various types of images and apply them on the page by declaring an <asp:Image ...> object with the appropriate SkinID reference.

So, for a structure of:

 root\
  App_Theme\
    Default\
      skin file goes here under theme root directory
      Images\
            imagename1.Gif
            imagename2.Gif

  Docs\
    DOcuments.aspx
  MainMasterPage.Master
  ContentPage.aspx

Create the .skin file with

<asp:Image runat="server" ImageUrl="images/imagename1.gif" SkinID="imageTypeID1" />

<asp:Image runat="server" ImageUrl="images/imagename2.gif" SkinID="imageTypeID2" />
 

Then apply the theme in the content page and set up the images using the following markup in the content/master page:

<asp:Image runat="server" SkinID="imageTypeID1" />

<asp:Image runat="server" SkinID="imageTypeID2" />

I have a GridView with two columns.

In the first column I will show an Item's Description. In the second column I will show an Item's current Status represented by an image.

Using your "SkinID" approach I think I could get the Status Image using the Current Theme.

But how can I set a "Themed" image on the column header? The "HeaderTemplate" comes with a "HeaderImageUrl" property, but it comes without any "SkinID".

<asp:GridView ID="gv" runat="server">
    <Columns>
	<asp:BoundField HeaderText="Item Description" DataField="Description" >
        <asp:TemplateField HeaderText="Item Status" HeaderImageUrl="??? HOW CAN I MAKE THIS PATH THEMEABLE ???">
            <ItemTemplate>
                <asp:Image ID="imgItemStatus1" runat="server" SkindId="imgSkinItemStatus1" Visible='<%# Eval("ItemStatus") == 1 %>' />
                <asp:Image ID="imgItemStatus2" runat="server" SkindId="imgSkinItemStatus2" Visible='<%# Eval("ItemStatus") == 2 %>' />
		<asp:Image ID="imgItemStatus2" runat="server" SkindId="imgSkinItemStatus3" Visible='<%# Eval("ItemStatus") == 3 %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Does somebody have any ideas on how to accomplish this without using server side code?

Thanks in advance.

Please, don't worry about this.

A coworker helped me to realize that I could simply use a "<HeaderTemplate>" the same way I use the "<ItemTemplate>".