Solved

Creating custom UI for asp.net textboxes?

Posted on 2008-10-17
7
476 Views
Last Modified: 2013-11-08
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
0
Comment
Question by:jasonwsaz
  • 4
7 Comments
 
LVL 18

Expert Comment

by:carlnorrbom
ID: 22747920
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
 

Author Comment

by:jasonwsaz
ID: 22748663
wow, I wasn't expecting someone to show me all that!  only one problem...  My project is in C#?

-J
0
 
LVL 18

Accepted Solution

by:
carlnorrbom earned 500 total points
ID: 22748858
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
 
LVL 18

Expert Comment

by:carlnorrbom
ID: 22774072
Hi,

So, did this solve it for you?

/Carl.
0
 
LVL 18

Expert Comment

by:carlnorrbom
ID: 22911530
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

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now