Creating custom UI for asp.net textboxes?

Was wondering how I can make asp.net textbox controls look similar to the provided screenshot.  Ideally through the use of themes but I can figure that out once I find out how to just make a single textbox look this way.



Thanks,
J
screen-capture.png
jasonwsazAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

carlnorrbomCommented:
Hi,

I can't tell you how to do this with themes, but I guess You can create a usercontrol to suit your needs, please have a look at the attached code snippets and images for reference. Create a folder called "ucImg" in your web root directory (or the dir where you put the user control) and copy the images to that folder. Drag and drop the user control onto your design surface, then in your page_init event add:

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        ucStyledTextBox1.Height = 15
        ucStyledTextBox1.Width = 250
        ucStyledTextBox1.Text = "Trying out styled textbox..."
    End Sub

That should do it!

/Carl.
ucStyledTextBox.ascx:
 
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucStyledTextBox.ascx.vb" Inherits="ucStyledTextBox" %>
<asp:table ID="constructTable" runat="server" CellPadding="0" CellSpacing="0" BorderWidth="0">
    <asp:TableRow ID="topConstructRow" runat="server">
        <asp:TableCell ID="topLeftConstructCell" runat="server">
            <asp:Image ID="ul" ImageUrl="~/ucImg/ul.gif" runat="server" />
        </asp:TableCell>
        <asp:TableCell ID="topConstructCell" runat="server">
            <asp:Image ID="u" ImageUrl="~/ucImg/t.gif" runat="server" />
        </asp:TableCell>
        <asp:TableCell ID="topRightConstructCell" runat="server" >
            <asp:Image ID="ur" ImageUrl="~/ucImg/ur.gif" runat="server" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow ID="middleConstructRow" runat="server">
        <asp:TableCell ID="leftConstructCell" runat="server">
            <asp:Image ID="l" imageUrl="~/ucImg/l.gif" runat="server" />
        </asp:TableCell>
        <asp:TableCell ID="centerConstructCell" runat="server">
            <asp:TextBox ID="txtContent" Style="background-color: #FFFFFF;font: Arial;font-size: 10pt; border:solid 0px White;" runat="server" />
        </asp:TableCell>
        <asp:TableCell ID="rightConstructCell" runat="server">
            <asp:Image ID="r" ImageUrl="~/ucImg/r.gif" runat="server" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow ID="bottomConstructRow" runat="server">
        <asp:TableCell ID="lowerLeftConstructCell" runat="server">
            <asp:Image ID="ll" ImageUrl="~/ucImg/ll.gif" runat="server" />
        </asp:TableCell>
        <asp:TableCell ID="lowerConstructCell" runat="server">
            <asp:Image ID="b" ImageUrl="~/ucImg/b.gif" runat="server" />
        </asp:TableCell>
        <asp:TableCell ID="lowerRightConstructCell" runat="server">
            <asp:Image ID="br" ImageUrl="~/ucImg/br.gif" runat="server" />
        </asp:TableCell>
    </asp:TableRow>
</asp:table>
 
ucStyledTextBox.ascx.vb:
 
 
Partial Class ucStyledTextBox
    Inherits System.Web.UI.UserControl
 
    Private _normHeight As System.Web.UI.WebControls.Unit = 7
    Private _normWidth As System.Web.UI.WebControls.Unit = 7
    Private _height As System.Web.UI.WebControls.Unit = 0
    Private _width As System.Web.UI.WebControls.Unit = 0
    Private _fontHeight As System.Web.UI.WebControls.FontSize = 0
 
    Public Property Height() As System.Web.UI.WebControls.Unit
        Get
            Return _height
        End Get
        Set(ByVal value As System.Web.UI.WebControls.Unit)
            _height = value
        End Set
    End Property
 
    Public Property Width() As System.Web.UI.WebControls.Unit
        Get
            Return _width
        End Get
        Set(ByVal value As System.Web.UI.WebControls.Unit)
            _width = value
        End Set
    End Property
 
    Public Property FontHeight() As System.Web.UI.WebControls.FontSize
        Get
            Return _fontHeight
        End Get
        Set(ByVal value As System.Web.UI.WebControls.FontSize)
            _fontHeight = value
        End Set
    End Property
 
    Public Property Text() As String
        Get
            Return txtContent.Text.ToString
        End Get
        Set(ByVal value As String)
            txtContent.Text = value
        End Set
    End Property
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not _height = 0 Then
            txtContent.Height = _height
        Else
            txtContent.Height = 15
        End If
        If Not _width = 0 Then
            txtContent.Width = _width
        Else
            txtContent.Width = 200
        End If
        If Not _fontHeight = 0 Then
            txtContent.Font.Size = _fontHeight
        Else
            txtContent.Font.Size = 15
        End If
        l.Height = txtContent.Height.Value + 4
        l.Width = _normWidth
        r.Height = txtContent.Height.Value + 4
        r.Width = _normWidth
        u.Width = txtContent.Width.Value + 2
        u.Height = _normHeight
        b.Width = txtContent.Width.Value + 2
        b.Height = _normHeight
    End Sub
End Class

Open in new window

ucImages.zip
0
jasonwsazAuthor Commented:
wow, I wasn't expecting someone to show me all that!  only one problem...  My project is in C#?

-J
0
carlnorrbomCommented:
Hi,

Sorry, see attached snippet for C# equivalent code. In the ascx file, change the CodeFile declaration to:

CodeFile="ucStyledTextBox.ascx.cs"

and the Language declaration to:

Language="C#"

That should do it.

/Carl.
partial class ucStyledTextBox : System.Web.UI.UserControl 
{ 
    
    private System.Web.UI.WebControls.Unit _normHeight = 7; 
    private System.Web.UI.WebControls.Unit _normWidth = 7; 
    private System.Web.UI.WebControls.Unit _height = 0; 
    private System.Web.UI.WebControls.Unit _width = 0; 
    private System.Web.UI.WebControls.FontSize _fontHeight = 0; 
    
    public System.Web.UI.WebControls.Unit Height { 
        get { return _height; } 
        set { _height = value; } 
    } 
    
    public System.Web.UI.WebControls.Unit Width { 
        get { return _width; } 
        set { _width = value; } 
    } 
    
    public System.Web.UI.WebControls.FontSize FontHeight { 
        get { return _fontHeight; } 
        set { _fontHeight = value; } 
    } 
    
    public string Text { 
        get { return txtContent.Text.ToString; } 
        set { txtContent.Text = value; } 
    } 
    
    protected void Page_Load(object sender, System.EventArgs e) 
    { 
        if (!(_height == 0)) { 
            txtContent.Height = _height; 
        } 
        else { 
            txtContent.Height = 15; 
        } 
        if (!(_width == 0)) { 
            txtContent.Width = _width; 
        } 
        else { 
            txtContent.Width = 200; 
        } 
        if (!(_fontHeight == 0)) { 
            txtContent.Font.Size = _fontHeight; 
        } 
        else { 
            txtContent.Font.Size = 15; 
        } 
        l.Height = txtContent.Height.Value + 4; 
        l.Width = _normWidth; 
        r.Height = txtContent.Height.Value + 4; 
        r.Width = _normWidth; 
        u.Width = txtContent.Width.Value + 2; 
        u.Height = _normHeight; 
        b.Width = txtContent.Width.Value + 2; 
        b.Height = _normHeight; 
    } 
} 

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
carlnorrbomCommented:
Hi,

So, did this solve it for you?

/Carl.
0
carlnorrbomCommented:
Hi,

No feedback from You on my provided solution, can you please close out the question and reward points if the solution was what you needed? Thx.

/Carl.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.