14

丸みを帯びたボックスの外観を作成するために、いくつかの div などで囲まれていることを除いて、Panel コントロールとまったく同じように機能するカスタム コントロールを作成しようとしています。これを行う方法の適切な例を見つけることができませんでした。

コントロール内にテキストとコントロールを配置し、パネルを参照せずに直接アクセスできるようにする必要があります (まさに Panel コントロールの動作と同じです)。

誰にもこれの例はありますか？

4

8 に答える 8

15

これを行うには2つの方法があります。1つは、コントロールに実装INamingContainerすることであり、多くの労力を要します。

もう1つの方法は、Panelから継承し、RenderBeginTagメソッドとRenderEndTagメソッドをオーバーライドしてカスタムマークアップを追加することです。これは簡単。

public class RoundedCornersPanel : System.Web.UI.WebControls.Panel
{
    public override RenderBeginTag (HtmlTextWriter writer)
    {
        writer.Write("Your rounded corner opening markup");
        base.RenderBeginTag(writer);
    }

    public override RenderEndTag (HtmlTextWriter writer)
    {
        base.RenderEndTag(writer);
        writer.Write("Your rounded corner closing markup");                     
    }
}
于 2008-11-20T18:16:05.863 に答える
13

ここにはすでにかなりの数の回答がありますが、Panel クラスから継承せずに、これの最も基本的な実装を貼り付けたかっただけです。だからここに行く：

using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

[ToolboxData("<{0}:SimpleContainer runat=server></{0}:SimpleContainer>")]
[ParseChildren(true, "Content")]
public class SimpleContainer : WebControl, INamingContainer
{
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [TemplateContainer(typeof(SimpleContainer))]
    [TemplateInstance(TemplateInstance.Single)]
    public virtual ITemplate Content { get; set; }

    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        // Do not render anything.
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        // Do not render anything.
    }

    protected override void RenderContents(HtmlTextWriter output)
    {
        output.Write("<div class='container'>");
        this.RenderChildren(output);
        output.Write("</div>");
    }

    protected override void OnInit(System.EventArgs e)
    {
        base.OnInit(e);

        // Initialize all child controls.
        this.CreateChildControls();
        this.ChildControlsCreated = true;
    }

    protected override void CreateChildControls()
    {
        // Remove any controls
        this.Controls.Clear();

        // Add all content to a container.
        var container = new Control();
        this.Content.InstantiateIn(container);

        // Add container to the control collection.
        this.Controls.Add(container);
    }
}

次に、次のように使用できます。

<MyControls:SimpleContainer
    ID="container1"
    runat="server">
    <Content>
        <asp:TextBox
            ID="txtName"
            runat="server" />

        <asp:Button
            ID="btnSubmit"
            runat="server"
            Text="Submit" />
    </Content>
</MyControls:SimpleContainer>

コードビハインドから、次のようなことができます。

this.btnSubmit.Text = "Click me!";
this.txtName.Text = "Jack Sparrow";
于 2012-02-22T11:01:44.423 に答える
3

System.Web.UI.Controlを継承するクラスを作成し、Render（HtmlTextWriter）メソッドをオーバーライドします。このメソッドでは、周囲の開始タグをレンダリングしてから、子（RenderChildren）をレンダリングしてから、終了タグをレンダリングします。

protected override void Render ( HtmlTextWriter output )
{
  output.Write ( "<div>" );
  RenderChildren ( output );
  output.Write ( "</div>" );
}

丸みを帯びた角は、通常、CSSと、左上、右上、左下、右下の角の角の画像を使用して実現されます。これは、レイヤーとして機能する4つのネストされたdivを使用して実行できます。各divには、背景画像として1つのコーナー画像があります。

于 2008-11-20T18:19:43.360 に答える
2

コードプロジェクトには、興味を引く可能性のあるものがあります。PanelCurve Container-ASP.NET CustomControlNugget。私はあなたがコードで遊んで、あなたが望む振る舞いと見た目を持っていると確信しています。

代替テキスト

于 2008-11-20T18:22:16.523 に答える
2

Panel からではなく WebControl から直接継承したくない場合、これを行う最も簡単な方法は、クラスを属性で装飾することです[ParseChildren(false)]。一見すると、これは子を解析したくないことを示唆しているかもしれませんが、false実際には、子をプロパティとして扱いたくないということを示しています。代わりに、それらをコントロールとして扱いたいと考えています。

この属性を使用すると、実質的にすべての機能をすぐに利用できます。

[ToolboxData("<{0}:RoundedBox runat=server></{0}:RoundedBox>")]
[ParseChildren(false)]
public class RoundedBox : WebControl, INamingContainer
{
    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.Write("<div class='roundedbox'>");
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.Write("</div>");
    }
}

これにより、RoundedBox コントロールをページに追加し、div 内にレンダリングされる子 (asp.net コントロールまたは生の html) を追加できます。

もちろん、角丸ボックス クラスを正しくスタイル設定するために css が追加されます。

于 2014-12-03T20:35:46.200 に答える
0

もう 1 つ使用できるのは、ASP.Net ajax ツールキットにある角の丸いエクステンダーです。

ご要望どおりではないことは承知していますが、カスタム コードを記述する必要はありません。

それが役立つことを願っています!

于 2008-11-20T18:53:29.063 に答える
-1 
public class myCustomPanel : Panel
{
    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "top_left_corner");
        writer.RenderBeginTag(HtmlTextWriterTag.Div);
            base.RenderBeginTag(writer);
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
            base.RenderEndTag(writer);
        writer.RenderEndTag();
    }

}
于 2008-11-20T18:25:02.913 に答える