How to render an embedded image at design-time?

[Justin M. Keyes]

Hi,

I have a custom web server control, specifically a composite control,
that includes an image button. The image button takes an ImageUrl
property that renders at _runtime_, but at design-time the image does
not render unless the user chooses an image.

I would like to display a default image at design-time (or _at_least_
reduce the size of the "missing image" icon that Visual Studio
displays--it is too big**[see footnote]**).

The ImageUrl property can only point to a path, obviously, which means
I must depend on the user to have an image at a certain path. Also, I
cannot access the Request object (thus neither the
Request.ApplicationPath) at design-time, so I can't even get a valid
path at design-time anyways.

Therefore, I would like to use an embedded resource (an image included
in the Visual Studio project, with 'Build Action' marked as "Embedded
Resource") at runtime.

But from what I can tell, System.Web.UI.Design.ControlDesigner only
allows me to really affect the HTML at design-time via
GetDesignTimeHtml(). But I cannot display an embedded resource with
HTML...

Here are relevant parts of my code:

---------------------------------------------

public class PopupCalendar : System.Web.UI.WebControls.WebControl,
INamingContainer {
private TextBox textBox;
private Image image;

....

protected override void CreateChildControls() {
this.Controls.Clear();
textBox = new TextBox();
this.Controls.Add(textBox);
textBox.ID = "TextBox";

image = new Image();
this.Controls.Add(image);
image.ID = "Image";
}

....

}

---------------------------------------------

public class PopupCalendarDesigner : WebDesign.ControlDesigner {
public override string GetDesignTimeHtml () {
PopupCalendar popcal = (PopupCalendar)this.Component;

return "<input type=\"text\" style=\"width: " + popcal.Width + "px\"
/><img style=\"width: 16px; height: 16px;\">";
}
}

---------------------------------------------

**[footnote]**
I have tried putting "image.Width = Unit.Pixel(16); image.Height =
Unit.Pixel(16);" in CreateChildControls(), but that means that only
16x16 images can be used, because this affects _both_ design-time and
run-time.

Thank you very much for your help!

- Justin

[Michael Baltic]

Use the embedded resource to create a relative path to your image. The same
way you would at runtime. Use the getdesigntimehtml method to display the
path to your embedded image.

Do you have the embedded image included in your solution directory? If so,
then just point the getdesigntimehtml method to this file. If not, then use
the above method.
--
Staff Consultant II
Enterprise Web Services
Cardinal Solutions Group

Future Business Model
Loan Origination Services
National City Mortgage


"Justin M. Keyes" wrote:

> Hi,
>
> I have a custom web server control, specifically a composite control,
> that includes an image button. The image button takes an ImageUrl
> property that renders at _runtime_, but at design-time the image does
> not render unless the user chooses an image.
>
> I would like to display a default image at design-time (or _at_least_
> reduce the size of the "missing image" icon that Visual Studio
> displays--it is too big**[see footnote]**).
>
> The ImageUrl property can only point to a path, obviously, which means
> I must depend on the user to have an image at a certain path. Also, I
> cannot access the Request object (thus neither the
> Request.ApplicationPath) at design-time, so I can't even get a valid
> path at design-time anyways.
>
> Therefore, I would like to use an embedded resource (an image included
> in the Visual Studio project, with 'Build Action' marked as "Embedded
> Resource") at runtime.
>
> But from what I can tell, System.Web.UI.Design.ControlDesigner only
> allows me to really affect the HTML at design-time via
> GetDesignTimeHtml(). But I cannot display an embedded resource with
> HTML...
>
> Here are relevant parts of my code:
>
> ---------------------------------------------
>
> public class PopupCalendar : System.Web.UI.WebControls.WebControl,
> INamingContainer {
> private TextBox textBox;
> private Image image;
>
> ....
>
> protected override void CreateChildControls() {
> this.Controls.Clear();
> textBox = new TextBox();
> this.Controls.Add(textBox);
> textBox.ID = "TextBox";
>
> image = new Image();
> this.Controls.Add(image);
> image.ID = "Image";
> }
>
> ....
>
> }
>
> ---------------------------------------------
>
> public class PopupCalendarDesigner : WebDesign.ControlDesigner {
> public override string GetDesignTimeHtml () {
> PopupCalendar popcal = (PopupCalendar)this.Component;
>
> return "<input type=\"text\" style=\"width: " + popcal.Width + "px\"
> /><img style=\"width: 16px; height: 16px;\">";
> }
> }
>
> ---------------------------------------------
>
> **[footnote]**
> I have tried putting "image.Width = Unit.Pixel(16); image.Height =
> Unit.Pixel(16);" in CreateChildControls(), but that means that only
> 16x16 images can be used, because this affects _both_ design-time and
> run-time.
>
> Thank you very much for your help!
>
> - Justin
>
>

[Justin M. Keyes]

> Use the embedded resource to create a relative path to your image.

How? Write it to the filesystem and reference the resulting path? I
don't know of another way and this seems like a kludge.

> Do you have the embedded image included in your solution directory?

The image is embedded in the *webcontrol* assembly. Each project that
wishes to use the webcontrol should not have to include the image in
its own assembly/project/solution.

Even if I did do that, I know no way of getting the project path at
design-time (Request.ApplicationPath is not available at design-time).

Thanks for your help.

Justin

[Michael Baltic]

I've never known a control to embed it's images into the assembly for a web
control. You might want to do this to protect the code/resources from theft,
but being the web, everything is downloaded to the user anyways.

The Infragistics controls all have the associated images stored in the
inetpub/wwwroot/aspnet_client/infragistics/ folders for each version/control.
That way, you can change the images without having to recompile the control.

This makes the control dependant on the images being deployed with to the
server. The same thing happens when you are trying to deploy JavaScripts as
well.

If the images are independant of the dll, then you would be able to
reference the aspnet_client folder for the image url.

If they are tied to the dll, then you can stream the image to the designer.
The same way you would stream an image during runtime.

The point is really moot anyways. Design time html is never going to look
the same as runtime html. The visual studio browser renders out html
completely different than the latest version of IE, Mozilla, Firefox, etc.
Also, if you have XP installed, then they will be way different!
--
Direct Email: [email]Michael.Baltic@RemoveCharactersUpTo#NCMC.Com[/email]

Staff Consultant II
Enterprise Web Services
Cardinal Solutions Group


"Justin M. Keyes" wrote:

> > Use the embedded resource to create a relative path to your image.

>
> How? Write it to the filesystem and reference the resulting path? I
> don't know of another way and this seems like a kludge.
>

> > Do you have the embedded image included in your solution directory?

>
> The image is embedded in the *webcontrol* assembly. Each project that
> wishes to use the webcontrol should not have to include the image in
> its own assembly/project/solution.
>
> Even if I did do that, I know no way of getting the project path at
> design-time (Request.ApplicationPath is not available at design-time).
>
> Thanks for your help.
>
> Justin
>
>

[Justin M. Keyes]

I'll deploy it as you recommend. Thanks for your direction.

Justin