This is a migrated thread and some comments may be shown as answers.

Get embedded icon from telerik.dll

4 Answers 194 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

Accepted

answered on 18 Aug 2011, 09:50 AM

Hi Michael,

To retrieve the embedded image from the Forest skin, you can use the following method:

dockImg.ImageUrl = Page.ClientScript.GetWebResourceUrl(typeof(RadDock), "Telerik.Web.UI.Skins.Forest.Dock.CommandSprite.gif");

This will assign the embedded resource URL (retrieved through an HTTP Resource handler) to your asp:Image control.

To use this image sprite to change the state of buttons, however, you need to employ a different technique called "CSS sprites". Here a few useful links on the topic to get you started:

A List Apart
CSS-Tricks
10 Must See CSS Sprite Tutorials

To setup a CSS sprite with an image embedded in an assembly, you can use inline CSS with a server expression to retrieve the URL of the image. Here is a complete working page that shows the implementation of a pin button with 4 states:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

#pin

{

display:inline-block;

width:19px;

height:19px;

cursor:pointer;

border:1px solid green;

/*CSS sprites related*/

background-color:transparent;

background-repeat:no-repeat;

background-attachment:scroll;

background-image:url('<%= Page.ClientScript.GetWebResourceUrl(typeof(Telerik.Web.UI.RadDock), "Telerik.Web.UI.Skins.Forest.Dock.CommandSprite.gif") %>');

background-position: 0 -38px;

}

/*Hovered image*/

#pin:hover { background-position: -19px -38px; }

/*Pinnded image*/

#pin.pinned { background-position: 0 -57px; }

/*Pinned hovered image*/

#pin.pinned:hover { background-position: -19px -57px; }

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

An animated pin with CSS sprites:

<div id="pin" onclick="togglePin(this, event);">

</div>

<script type="text/javascript">

function togglePin(pin, args) {

if (pin.className.indexOf("pinned") > -1) {

pin.className = "";

}

else {

pin.className = "pinned";

}

</script>

</div>

</form>

</body>

</html>

Veli
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 18 Aug 2011, 03:53 PM

Thanks, Veli.

I was able to reproduce your code sample and successfully modify images, sprites, etc.

However, I would prefer the following snippet be contained in styles.css
<style type="text/css">

#pin 

             ...  

 </style>



When I copy the style (excluding the tags) to styles.css, no image is displayed behind green square. 



How do I change the line below for use in styles.css?

   

background-image:url('<%= Page.ClientScript.GetWebResourceUrl ( typeof(Telerik.Web.UI.RadDock), "Telerik.Web.UI.Skins.Default.Dock.CommandSprite.gif" ) %>');

answered on 19 Aug 2011, 10:39 AM

Unfortunately, you cannot use code expressions in external CSS files. Under very specific circumstances (e.g. your .css file is embedded in an assembly), you can use the substitution feature as described in the following MS knowledge base article and have expressions like <%=WebResource(...)%> in your CSS. When your CSS file is loaded from a folder, however, you cannot use ASP.NET expressions to retrieve server values.

Veli
the Telerik team