locked
Skin not applied to CompositeControl at design time RRS feed

  • Question

  • User1872783393 posted

    Hi there,  

    I am using Visual Studio 2008 and I have a very simple custom web server control class named TestControl. The class inherits from CompositeControl, with two child controls: Label myLabel and TextBox myTextBox. In my TestWebForm the Theme attribute is set appropriately to a Theme where I have defined skins with font attributes for "regular" Label and TextBox controls and for the TestControl class.  At run time everything is fine: the skin (font attributes) is applied to child controls, but I cannot force the ASP.NET VS designer to apply skin attributes at design time!

    Actually, I have found two ways to apply the skin to child controls:

    • skins for "regular" asp:Label ans asp:TextBox controls have to be defined in the skin file and that's all
    • skin for custom TestControl has to be defined in the skin file and font attributes have to be mapped in CreateChildControl() (eg. myTextBox.Font.Size = this.Font.Size;)

    I have tried also:

    • to set StylesheetTheme in the @page directive, instead of Theme attribute and to call ApplyStyleSheetSkin() method for child controls in CreateChildControls()
    • to manually apply SkinID for TestControl
    • to map Style attributes of child controls in CreateChildControls(), instead of font attributes (eg. myLabel.Style[HtmlTextWriterStyle.FontSize] = this.Font.Size.ToString();)

    Nothing helps! The only way I have managed to get child controls font attributes displayed somehow at design time, is to set Font.Name and Font.Size in the TestControl constructor or to manually set these properties in the designer's property grid. But it is not what I really need. Another interesting thing is that when I inherit a control from eg. TextBox control, not CompositeControl, the designer applies the skin (if skin is defined for custom TextBox control, not for "regular" TextBox). Is it possible to get the design time behavior as I expect? Please, help! Here is the source code (there is no code in TestWebForm codebehind class):

     

    SKIN FILE

    <%@ Register assembly="Calculus.Web" namespace="Calculus.Web.UI.WebControls._TestControls" tagprefix="ctc" %>

    <asp:Label runat="server" Font-Names="Tahoma" Font-Size="11px" />

    <asp:TextBox runat="server" Font-Names="Tahoma" Font-Size="11px" />

    <ctc:TestControl runat="server" Font-Names="Tahoma" Font-Size="11px" />

     

    TEST WEBFORM

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestWebForm1.aspx.cs" Inherits="Calculus.ProximoWeb._TestPages.TestWebForm1" StylesheetTheme="DefaultTheme" %>

    <%@ Register assembly="Calculus.Web" namespace="Calculus.Web.UI.WebControls._TestControls" tagprefix="ctc" %>

    <!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>Test Web Form 1</title>

    </head>

    <body>

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

    <div>

    <br />

    <ctc:TestControl ID="TestControl1" runat="server" />

    <br />

    <br />

    </div>

    </form>

    </body>

    </html>

     

     

    TEST CONTROL

    using System;

    using System.Collections.Generic;

    using System.ComponentModel;

    using System.Linq;

    using System.Text;

    using System.Web;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    namespace Calculus.Web.UI.WebControls._TestControls

    {

    [
    ToolboxData("<{0}:TestControl runat=server></{0}:TestControl>")]

    public class TestControl : CompositeControl

    {

    private Label myLabel = new Label();private TextBox myTextBox = new TextBox();

     

    public TestControl()

    {

    }

    protected override void CreateChildControls()

    {

    this.Controls.Clear();

    myLabel.Text = "My Label";

    myLabel.Font.Name = this.Font.Name;

    myLabel.Font.Size = this.Font.Size;

    myTextBox.Text = "Some text";

    myTextBox.Width = 100;

    myTextBox.BackColor = System.Drawing.
    Color.White;

    myTextBox.Font.Name = this.Font.Name;

    myTextBox.Font.Size = this.Font.Size;

    Controls.Add(myLabel);

    Controls.Add(myTextBox);

    }

    }

    }

    Wednesday, April 2, 2008 6:44 PM

Answers

  • User-16411453 posted

    Your right , SkinID, my bad.

    If you go into designer view, and click on your control, you can access the properties of that control.   Just like a regular control such as textbox.

    In the list of properties, you'll see SkinID. Type in the name or ID of your SkinID and set the value. 

    In your Control code, you can grab the SkinID value.  In vb, It's [SkinID] with the square brackets. I don't know what it is in CSharp off the top of my head.

    myTextBox.SkinID = [SkinID] 'for VB

    myTextBox.CssStyle = [CssStyle]

    This is how you can grab predefined values from the property box, and use them in your control. 

    This is just help on the Control Side issue of your post. I'm not offering help on the skin side issue of your post. I don't do skins.

     I've messed around with skins, but ended up using themes.  The themes were merely CSS Style collections that could be changed on the fly through code.  The skins were system wide in which all Label, TextBox, Button, etc would acquire that look and feel. If I made cooler looking sites such as gaming sites, or music sites, I would use skins. I stopped using themes, because of the large amount of time it takes to create good looking themes.

     


     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, April 6, 2008 2:12 PM

All replies

  • User-16411453 posted
     You have to turn on theming like on a regular control on a webform

    myTextBox."Turn on theming" , whatever intellisense tells you, then select the skin or theme

    I don't remember the exact syntax for it in CS

    this.Font.Name, Font.Name needs a value

    myTextBox.Font.Name = "Tahoma" or whatever is presented by the intellisense

     


     

    Friday, April 4, 2008 6:18 PM
  • User1872783393 posted

    Thank you jkirkerx, nice try! I have found what you meant, I suppose:

    myTextBox.EnableTheming = true;
    myTextBox.ApplyStyleSheetTheme(Page);

    Doesn't help! [:(] Anyone could try my example, please?

     

    Friday, April 4, 2008 8:20 PM
  • User-16411453 posted

     It's not a complete fix, just the next step you needed to make it work. But you on the right track.

    Now you need to grab the property element for styles in your control property panel, and apply the actual style to it.

    You can manually apply the style = "MyStyle" to test first, and then apply the property value later after you confirm that it works. 

     

    Saturday, April 5, 2008 1:17 PM
  • User1872783393 posted

    Thank you again, but I am a little confused whit this answer. How do you think "to grab the property element for styles in your control property panel, and apply the actual style to it"? There are properties: CssClass, which is not the skin, SkinID which is not working and a bunch of style properties like BorderColor, BorderStyle, Font etc. What do you mean with "the property element for styles"?

    Nevertheless, I think this is not the point. I repeat: the skin is applied to the main composite control (its span tag is properly rendered), but the skin is not applied to the CHILD CONTROLS. I don't want to programmatically apply each skin attribute for each child control (this is not theming and skinning) and I even don't know how would it be possible (there is no way to grab the skin properties from the skin files anyhow).

    Sunday, April 6, 2008 4:55 AM
  • User-16411453 posted

    Your right , SkinID, my bad.

    If you go into designer view, and click on your control, you can access the properties of that control.   Just like a regular control such as textbox.

    In the list of properties, you'll see SkinID. Type in the name or ID of your SkinID and set the value. 

    In your Control code, you can grab the SkinID value.  In vb, It's [SkinID] with the square brackets. I don't know what it is in CSharp off the top of my head.

    myTextBox.SkinID = [SkinID] 'for VB

    myTextBox.CssStyle = [CssStyle]

    This is how you can grab predefined values from the property box, and use them in your control. 

    This is just help on the Control Side issue of your post. I'm not offering help on the skin side issue of your post. I don't do skins.

     I've messed around with skins, but ended up using themes.  The themes were merely CSS Style collections that could be changed on the fly through code.  The skins were system wide in which all Label, TextBox, Button, etc would acquire that look and feel. If I made cooler looking sites such as gaming sites, or music sites, I would use skins. I stopped using themes, because of the large amount of time it takes to create good looking themes.

     


     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, April 6, 2008 2:12 PM
  • User373823370 posted

     Hi,

     I has the same problem as you and after I google for a while I found a solution. In design time "theme" doesn't work but "styleSheetTheme" works. You can edit following line in web.config to apply theme in design time.

    <pages pageBaseType="PageBase" styleSheetTheme="YourThemeName" />
    You can read more from http://blogs.msdn.com/markjo/archive/2006/09/22/766048.aspx
     or http://forums.asp.net/p/905541/1000300.aspx

     

    Sunday, May 3, 2009 10:19 AM