更改自定义控件的颜色答案

【问题标题】：Changing the color of a custom control更改自定义控件的颜色
【发布时间】：2014-11-13 14:21:47
【问题描述】：

我正在尝试设置自定义按钮的背景颜色。我通过覆盖 Render 方法从 HTML 构建该按钮。然后，我通过具有 Get 和 set 功能的客户覆盖的属性方法公开某些属性。这允许我在编译后更改自定义按钮的部分内容。

我想更改按钮 div 或 table 的颜色（我不在乎）。我该怎么做？

该按钮有一个表 - 如果我知道它的名称，我如何以编程方式获取该表；buttonTable.FindControl 不起作用，我得到“未设置为对象的实例”错误。

    Panel buttonPnl = new Panel(); //Declare and Init here in case you need it for changing background color at code compile and not run time
    System.Web.UI.WebControls.Image logoImg;
    System.Web.UI.WebControls.Image errorImg;
    TextBox mainTextTb;
    Label subTextLbl;

    protected override void CreateChildControls()
    {
        Controls.Clear();

        //init controls
        //buttonPnl.Width = Unit.Pixel(200);
        //buttonPnl.Height = Unit.Pixel(150);
        buttonPnl.ID = "buttonPnl";

        logoImg = new System.Web.UI.WebControls.Image();
        logoImg.ID = "logoImg";
        logoImg.Width = Unit.Pixel(75);
        logoImg.Height = Unit.Pixel(75);

        errorImg = new System.Web.UI.WebControls.Image();
        errorImg.ID = "errorImg";
        errorImg.Width = Unit.Pixel(50);
        errorImg.Height = Unit.Pixel(50);

        mainTextTb = new TextBox();
        mainTextTb.ID = "mainTextTb";
        mainTextTb.Text = "changed";
        mainTextTb.Font.Size = 20;
        mainTextTb.Width = Unit.Pixel(180);


        subTextLbl = new Label();
        subTextLbl.ID = "subTextLbl";
        subTextLbl.Text = "sub text";
        subTextLbl.Font.Size = 12;

        //add controls to parent control
        this.Controls.Add(logoImg);
        this.Controls.Add(errorImg);
        this.Controls.Add(mainTextTb);
        this.Controls.Add(subTextLbl);
        this.Controls.Add(buttonPnl);
    }

    protected override void Render(HtmlTextWriter writer)
    {
        //render controls
        buttonPnl.RenderControl(writer);
        AddAttributesToRender(writer);
        writer.RenderBeginTag(HtmlTextWriterTag.Div); //table start tag
        writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "5");
        writer.AddAttribute(HtmlTextWriterAttribute.Width, "200");
        writer.AddAttribute(HtmlTextWriterAttribute.Id, "buttonTable");
        writer.RenderBeginTag(HtmlTextWriterTag.Table); //table start tag
        writer.RenderBeginTag(HtmlTextWriterTag.Tr); //row start tag
        writer.RenderBeginTag(HtmlTextWriterTag.Td); // cell start tag
        logoImg.RenderControl(writer); //add logo image
        writer.RenderEndTag(); //cell end tag
        writer.RenderBeginTag(HtmlTextWriterTag.Td); //cell start tag
        errorImg.RenderControl(writer); //add error image
        writer.RenderEndTag(); //cell end tag
        writer.RenderEndTag(); //row end tag
        writer.RenderBeginTag(HtmlTextWriterTag.Tr); //row start tag
        writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%"); //make sure row width is 100% of parent
        writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2"); //make sure row spans 2 cells
        writer.RenderBeginTag(HtmlTextWriterTag.Td); //cell start tag
        mainTextTb.RenderControl(writer); //add main text box
        writer.RenderEndTag(); //cell end tag
        writer.RenderEndTag(); //row end tag
        writer.AddAttribute(HtmlTextWriterAttribute.Align, "right"); //make sure row width is 100% of parent
        writer.RenderBeginTag(HtmlTextWriterTag.Tr); //row start tag
        writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%"); //make sure row width is 100% of parent
        writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2"); //make sure row spans 2 cells
        writer.RenderBeginTag(HtmlTextWriterTag.Td); //cell start tag
        subTextLbl.RenderControl(writer); //add sub label
        writer.RenderEndTag();//cell end tag
        writer.RenderEndTag(); //row end tag
        writer.RenderEndTag(); //table end tag
        writer.RenderEndTag(); //div end tag
    }

    [Category("Appearance")]
    [Description("Gets or sets the panel colour")]
    public Color TimbusButtonColour
    {                

        get
        {
            EnsureChildControls();
            Table buttonTbl = (Table)this.FindControl("buttonTable");
            //return buttonPnl.BackColor;
            return buttonTbl.BackColor;
        }

        set
        {
            if (value != null)
            {
                Table buttonTbl = (Table)this.FindControl("buttonTable");
                //buttonPnl.BackColor = Color.FromArgb(value.R, value.G, value.B);
                buttonTbl.BackColor = Color.FromArgb(value.R, value.G, value.B);
            }
        }
    }

从页面源代码生成 HTML

</div><div id="Button1">
    <table cellpadding="5" width="200" id="buttonTable">
        <tr>
            <td><img id="Button1_logoImg" src="" style="height:75px;width:75px;" /></td><td><img id="Button1_errorImg" src="" style="height:50px;width:50px;" /></td>
        </tr><tr>
            <td width="100%" colspan="2"><input name="Button1$mainTextTb" type="text" value="changed" id="Button1_mainTextTb" style="font-size:20pt;width:180px;" /></td>
        </tr><tr align="right">
            <td width="100%" colspan="2"><span id="Button1_subTextLbl" style="font-size:12pt;">sub text</span></td>
        </tr>
    </table>
</div>

【问题讨论】：

你不能设置 buttonPnl 的背景并将所有其他控件添加到该面板吗？这将在渲染时成为一个 div，并设置背景颜色。
你不应该期望找到你没有创建的东西。用id="buttonTable" 渲染的div 不会神奇地变成控件树中的Table 控件。
@patrick 你能详细说明一下吗 - 你的意思是像 buttonPanel.Controls.Add(controlsXXX); 这样将控件添加到面板中吗？然后 this.add(buttonPanel);我不能这样做，因为我需要在面板中放置控件，所以我通过使用 div 而不是面板的 Render 方法来做到这一点或者你的意思是将面板添加到 html 中，如 buttonPnl.RenderControl(writer);？问题是我如何关闭面板标签？
@Igor 该表称为 buttonTable，不涉及任何魔法。我在结果页面 sourceCode 中检查了它。
好吧，不要......使用组件的属性，例如边距、填充、宽度和高度，看看会发生什么。你会得到一个更干净的控件类，因为你只在一个地方改变了外观。

标签： c# asp.net custom-controls findcontrol

【解决方案1】：

你应该使用类似这样的函数：

public static Control FindControlRecursive(Control ctl, string id) {
    if (!ctl.HasControls())
        return null;
    Control res = null;
    foreach(Control c in ctl.Controls) {
        if (c.ID == id) {
            res = c;
            break;
        } else {
            res = FindControlRecursive(c, id);
            if (res != null)
                break;
        }
    }
    return res;
}

这样：

Table buttonTbl = (Table)FindControlRecursive(this.Page, "buttonTable");

你肯定会找到你的控制权。

【讨论】：

递归搜索与OP的问题无关。他正在寻找一个根本不存在的控件。
@SmartDev 这是个好主意，我在暴露的属性 TimbusButtonColour 中仍然遇到同样的错误 - 'ObjectReference not set to an instance of an object' 我认为这可能是表在其中声明TimbusButtonColour，但我将它移到顶部，仍然是同样的问题。救命！
@Igor - 我怎样才能控制表格 html 标签？
@Fearghal - 您需要了解 ASP.NET 中的“因果” - 不会因为您将某些内容渲染到 html 而无法控制。将Table 类型的成员添加到您的类定义中，并在CreateChildControls 中创建此Table 以及TableRows 和TableCells。
你能详细说明一下吗？那我该怎么办？

【解决方案2】：

Thx Igor 和 Patrick 等人，很好的反馈让我回到了正确的道路上，即创建控件而不是直接动态编写 html。看起来很明显，但你去吧。

    protected override void CreateChildControls()
    {
        Controls.Clear();

        //init controls
        buttonTbl = new Table();
        buttonPnl.ID = "buttonPnl";

        logoImg = new System.Web.UI.WebControls.Image();
        logoImg.ID = "logoImg";
        logoImg.Width = Unit.Percentage(100);//100% of cell width
        logoImg.Height = Unit.Percentage(100);//100% of cell width

        errorImg = new System.Web.UI.WebControls.Image();
        errorImg.ID = "errorImg";
        errorImg.Width = Unit.Percentage(50);//50% of cell width
        errorImg.Height = Unit.Percentage(50);//50% of cell height

        mainTextTb = new TextBox();
        mainTextTb.ID = "mainTextTb";
        mainTextTb.Text = "changed";
        mainTextTb.Font.Size = 20;
        mainTextTb.Width = Unit.Percentage(100);

        subTextLbl = new Label();
        subTextLbl.ID = "subTextLbl";
        subTextLbl.Text = "sub text";
        subTextLbl.Font.Size = 12;

        //format table
        buttonTbl.Width = 200;
        buttonTbl.Height = 150;
        buttonTbl.CellPadding = (int)Unit.Percentage(5).Value;
        //add the 3 rows
        buttonTbl.Rows.Add(imgRow);
        buttonTbl.Rows.Add(mainTextRow);
        buttonTbl.Rows.Add(subTextRow);
        //add the cells
        imgRow.Cells.Add(logoImgCell);
        imgRow.Cells.Add(errorImgCell);
        mainTextRow.Cells.Add(mainTextCell);
        subTextRow.Cells.Add(subTextCell);
        //add controls to their cells
        logoImgCell.Controls.Add(logoImg);
        errorImgCell.Controls.Add(errorImg);
        mainTextCell.Controls.Add(mainTextTb);
        subTextCell.Controls.Add(subTextLbl);
        //position cells
        logoImgCell.HorizontalAlign = HorizontalAlign.Right;
        logoImgCell.VerticalAlign = VerticalAlign.Top;
        errorImgCell.HorizontalAlign = HorizontalAlign.Right;
        errorImgCell.VerticalAlign = VerticalAlign.Top;
        mainTextCell.ColumnSpan = 2;
        subTextCell.ColumnSpan = 2;
        subTextCell.HorizontalAlign = HorizontalAlign.Right;

        this.Controls.Add(buttonTbl);
    }

    protected override void Render(HtmlTextWriter writer)
    {
        //render controls
        buttonTbl.RenderControl(writer);
    }

    [Category("Appearance")]
    [Description("Gets or sets the panel colour")]
    public Color TimbusButtonColour
    {                
        get
        {
            EnsureChildControls();
            return buttonTbl.BackColor;
        }

        set
        {
            if (value != null)
            {
                buttonTbl.BackColor = Color.FromArgb(value.R, value.G, value.B);
            }
        }
    }

【讨论】：

您省略了为变量 imgRow、mainTextRow 等赋值的代码。
添加了bgcolor属性暴露方法