Custom Control Embedded CSS

[Chuck P]

I have a control that has an embedded CSS file.
I override the OnPreRender event and put in the following code:

HtmlLink cssLink = new HtmlLink();
..... get the resource, create the link
Page.Header.Controls.Add(cssLink);
base.OnPreRender(e);

This works fine at runtime.
However at design time the CSS does not get applied.

Whats the best way to get the CSS applied at design time?

thanks,

 

[Walter Wang [MSFT]]

Hi Chuck,

This is a quick note to let you know that I am performing research on this
issue and will get back to you as soon as possible. I appreciate your
patience.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Chuck P]

I guess OnPreRender doesn't fire in design mode.

http://www.manuelabadia.com/blog/PermaLink,guid,8cdc7001-bca7-4ea6-a3f8-0fb2861548f6.aspx

 

[Walter Wang [MSFT]]

Hi Chuck,

Yes my test also verified that OnPreRender is not called in design-time.
I'm also tried other approaches but still no luck, I'm currently consulting
this question within our internal discussion list. I'll keep you posted.
Thank you for your patience.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Walter Wang [MSFT]]

Hi Chuck,

It seems we will have to use a custom control designer to make the
stylesheet work at design-time, and we must use inline style instead:

public override string GetDesignTimeHtml()
{
return "<style> .highlight {background-color: yellow} </style>"
+ base.GetDesignTimeHtml();
}

This is not very elegant but so far this seems the only way to make the
stylesheet works at design-time.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Chuck P]

Thanks Walter,
I wasn't aware of that event.
I did something similar with checking for Design mode in the render event
and putting in a link to an embedded style sheet.

private string GetCssLink()
{
string strFooterCssLocation = CssLocation; //empty unless user
overrides location from the embedded style sheet

if (string.IsNullOrEmpty(strFooterCssLocation))
strFooterCssLocation =
Page.ClientScript.GetWebResourceUrl(this.GetType(),
@"Util_Controls.LanlFooter.css");

return strFooterCssLocation;
}


protected override void RenderContents(HtmlTextWriter output)
{
if (DesignMode)
{ //at runtime PreRender is fired and we put the link in the head
output.Write(" <link href=\"" + GetCssLink() + "\"
rel=\"stylesheet\" type=\"text/css\" />");
}

 

[Walter Wang [MSFT]]

Hi Chuck,

Thanks for sharing your solution here. I think it's better than having to
write a custom control designer.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[samuel.m.smith]

Hi Chuck,

Thanks for sharing your solution here. I think it's better than having to
write a custom control designer.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

I also overcame the problem you guys are describing by including a
link tag for the designer in the RenderContent method. However, I
still have a problem where my background images in the css aren't
appearing (even though the other styles are working). I'm starting to
think that the server tags in it aren't working even though I have the
meta tag PerformSubstitution = true. The control renders Great in the
browser but crappy in the designer. An example of my css is

..tabpanel .bar .tab .center_area
{
background-image: url('<%=
WebResource("SMS.TabPanelControl.skins.vista.normal_centerArea.gif")
%>');
background-repeat: repeat-x;
padding: 0px 6px;
width: auto;
white-space: nowrap;
border: 1px solid #898C95;
}

I'm not quite sure what might be causing the problem. I'm adding the
style sheet right now in the RenderControl method where I have a
statement like

if (DesignMode)
{
writer.Write("<link href=\"" + GetSkinUrl() +
"\" rel=\"stylesheet\" type=\"text/css\" />");
}


I can see several of the styles applied in the designer but not any of
the background images. Just to see if the images would load at all I
appended one of the background images in the RenderContent method for
the designer and it appeared. This is the same background-image that
doesn't appear from the css. I then changed the style attributes of a
div I am using and manually set the background-image there and it
appeared. So, I don't get it. The background-images all appear and
work great in the browser but it looks like crap (since the background-
images don't appear) in vs2005 designer. Anybody have any ideas? I
somehow wonder if the tags that should be interpreted in the css
aren't being interpreted in the designer even though I have a meta tag
with the PerformSubstitution = true for interpreting it.

Any ideas would be much appreciated. I've searched many forums about
the issue and haven't seen anyone write a solution.

 

[Tim Jarvis]

I know this is an old post but I had the same problem and found a soltuion

You need to add an attribute to the end of the declaration of the CSS
resource.

[assembly: WebResource("Resources.CSS.stylesheet.css", "text/css",
PerformSubstitution = true)]

 

[Sam]

Tim,

I appreciate the reply. That was quite a while ago. I'm actually still
trying to figure this out (recently started working on an old project).

My previous code had

[assembly:
WebResourceAttribute("SMS.WebControls.TabPanelControl.skins.blue.tabpanelskin.css", "text/css", PerformSubstitution = true)]
[assembly:
WebResourceAttribute("SMS.WebControls.TabPanelControl.skins.blue.normal_centerArea.gif", "image/gif")]

So it had the PerformSubstitution = true part like you had mentioned.
Inside my css I have a class that looks like:

..tabpanel .bar .tab .center_area
{
background-image: url('<%=
WebResource("SMS.WebControls.TabPanelControl.skins.blue.normal_centerArea.gif") %>');
background-repeat: repeat-x;
padding: 3px 9px;
width: auto;
}

The part thats interesting is that this code displays fine in the browser
(background-image using that css class is correctly change at runtime).
However, if you view this control in the designer then the background-image
will not appear.

At first you might think it wouldn't appear because the css wasn't loaded.
This isn't true, however, since other styles from the css are present (and I
include the <link> tag like the previous posts talk about).

So.. ya, stuck.

 

[Sam]

Found the answer!! see http://forums.asp.net/p/1234887/2531259.aspx .
Basically you have to read in the css (open up a stream to the resource,
etc...). After you do this you have to search through the css yourself and
do the substitution yourself.

The post explains it all. Also, transparencies in the images don't work (or
so they say). I'm ecstatic to try it out, just thought I'd share back here
since this post became "live" again.