Showing posts with label Custom Controls. Show all posts
Showing posts with label Custom Controls. Show all posts

Sunday, July 6, 2014

ASP.net ReadOnly TextBox get value on PostBack

Level: Intermediate

Knowledge Required:
  • ASP.net
  • Custom Controls

In ASP.net we have a problem, that if we set a TextBox control ReadOnly, then the value changed through JavaScript cannot be received back to Server on PostBack.

If we search on Google, we will find that a good solutions is to add readonly attribute on the Page_Load. For example,

protected void Page_Load(object sender, EventArgs e)
{
     TextBox1.Attributes.Add("readonly", "readonly");
}

So putting this code for every control and on every page is obviously a bit annoying. So a better way is to create your own TextBox control which implements this behaviour. But since we already have a good TextBox control available so we can just extend it

    public class ExtendedTextBox : System.Web.UI.WebControls.TextBox
    {
        public override bool ReadOnly
        {
            get
            {
                // We will always return ReadOnly false because internally control
                // is checking this property and it will start the same behaviour
                // if we return true, i.e. value will NOT be received on PostBack 
                return false;
            }
            set
            {
                // Here I have implemented a logic, if we you mark the control as
                // readonly then we will render it as background-color = light gray
                if (value)
                {
                    this.Attributes.Add("readonly", "readonly");
                    this.BackColor = System.Drawing.Color.WhiteSmoke;
                }
                else
                {
                    this.Attributes.Remove("readonly");
                    this.BackColor = System.Drawing.Color.White;
                }
            }
        }
    }

The point is, actually we do NOT set the ReadOnly property of control to true, just add the readonly attribute, so that ASP.net control will consider itself as normally rendered control, and will return the value correctly.

After this we can easily use this control on any web page, but before this we have to add the control reference in our web.config file as,

  <system.web>
    <pages>
      <controls>
        <add assembly="YourWebApplicationAssemblyName" namespace="NameSpaceWhereYouHaveThisExtendedClass" tagPrefix="asp"/>
      </controls>
    </pages>
  </system.web>

Saturday, February 14, 2009

Notification Bar Control For Windows Forms (Win Forms)

Here is simple Notification Bar control (like we see in Internet Explorer). Gives application a good look. Note that I haven't done much thing, you can customize is further if you like. It supports blinking too. Usage: ShowNotification() method to display the Notification. BlinkTimes property to set the Number of Times to blink. Download Source Code: Notificationbar.zip

Monday, January 26, 2009

DataGridView Custom Cell ToolTip

Level: Intermediate Knowledge Required:
  • DataGridView Control
  • Windows Forms
Description: We have a built-in ToolTip for each Cell in DataGridView control. Which is displayed when the text is long and cannot be displayed completely in Cell. But my requirement was to create a custom ToolTip (as displayed in above image). There were 2 main requirements, 1) ToolTip should be displayed permanently that is, it should NOT be disappeared automatically after sometime. 2) I want to have a fancy look of my ToolTip (again see the image). For this purpose we can also use the .net's built-in ToolTip control. Which can have a little fancy look by setting some of its properties like IsBubble, ToolTipIcon and ToolTipTitle. Also the ToolTip control can be more customized by using OwnerDraw mode. But still I would like to use my own ToolTip window. Because to me, this is more easier to do. Simply I implemented it by creating a new window for ToolTip and I show this window when mouse enters in a cell. But to make it more user friendly, I have used a Timer control. So that whenever mouse enters in a Cell I start timer and in Timer's Tick Event Handler, I display the ToolTip window. Few things to be considered here, 1) DataGridView's ShowCellToolTips property should be set to False 2) Decide where to display the ToolTip window So in my case I decided to display the ToolTip window just on the Cell. OK this is NOT just straight. We first need to get the Cell's actual Coordinate in DataGridView by executing DataGridView's GetCellDisplayRectangle() function. Then we need to convert these coordinates into Screen's Coordinates by calling the DataGridView's PointToScreen() function. Please note that, to display our own custom ToolTip window on our given position we need to set its property StartPosition = Manual, which I have discussed in my earlier post Setting Window / Form Position Programmatically Another thing I have added in the ToolTip window is the Close Button. Which is actually a NON Focusable button as I have discussed my previous post NOT Focusable / NOT Selectable Button Download Source: DataGridViewCustomCellToolTip.zip

Friday, January 23, 2009

NOT Focusable / NOT Selectable Button

Level: Intermediate

Knowledge Required:
User Controls

Description:
Few days back I was creating a user control like ComboBox. In ComboBox we have a Drop Down button at the right side, which cannot have focus. This button can only be clicked by mouse to open the Drop Down portion (Alt+Down is the shortcut).

Similarly my control also have a button on right. I decided to make that button just like the Drop Down button of ComboBox. For this purpose I added a plain Class in my project and then put the following Code,

Public Class NotSelectableButton
Inherits Button

Public Sub New()
MyBase.New()
' following line will make this button Not Focusable
SetStyle(ControlStyles.Selectable, False)
End Sub
End Class

Monday, July 28, 2008

Draw Focus Rectangle using ControlPaint Class

Level: Beginner

Knowledge Required:
GDI+

Description:
Sometimes while creating a User Control from scratch. It is required to display the Focus Rectangle (the dotted border). This can be easily achieved by using

System.Windows.Forms.ControlPaint

E.g.:
Private Sub Form1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Click
    Dim g As Graphics
    g = Me.CreateGraphics
    ControlPaint.DrawFocusRectangle(g, New Rectangle(10, 10, 100, 100))
End Sub


ControlPaint class contains other useful routines for control drawing you can explore the list using intellisense.

Monday, July 14, 2008

Custom Tab Control Layout

Level: Intermediate Knowledge Required:
  • Tab Control
  • GDI+
Description: In previous post, Custom Tab Control We have discussed how to change the Tab Control layout so that we can make it more attractive by changing the background color and tab buttons' color. As I have mentioned in that post that there are some other techniques too, so in this post we shall see a simple way. By default Tab Control's Tab Buttons are Aligned Top, So first we are going to change its alignment to Left, by setting the property: Alignment = Left If you have XP themes turned on then you may notice the weird layout of Tab Control. Don't worry we will make it fine. As you may have noticed that Tabs are vertical, and our requirement is horizontal. So we can change the size of Tabs. But before we can do this we have to set the SizeMode property as, SizeMode = Fixed Now we can change the size by using the ItemSize property, ItemSize = 30, 120 Width = 30 and Height = 120 After setting the Alignment = Left, Tab control rotates the Tabs which causes the Width and Height seem to be reversed. That is why when we increase Height, we see that width is increasing and when we increase width the height is effected. Now Text will also be displaying, but vertically. Unfortunately there is no simple way to resolve this issue. For this purpose we have to write the Text by ourselves. To do this we will first set the DrawMode DrawMode = OwnerDrawFixed Now its our job to display the Text on Tabs. Since we have set the DrawMode property = OwnerDrawFixed, therefore we can use the DrawItem event as,
Private Sub TabControl1_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles TabControl1.DrawItem
    Dim g As Graphics
    Dim sText As String
    Dim iX As Integer
    Dim iY As Integer
    Dim sizeText As SizeF
    Dim ctlTab As TabControl

    ctlTab = CType(sender, TabControl)

    g = e.Graphics

    sText = ctlTab.TabPages(e.Index).Text
    sizeText = g.MeasureString(sText, ctlTab.Font)
    iX = e.Bounds.Left + 6
    iY = e.Bounds.Top + (e.Bounds.Height - sizeText.Height) / 2
    g.DrawString(sText, ctlTab.Font, Brushes.Black, iX, iY)
End Sub
Download Source: CustomTabControlLayout.zip

Customized Tab Control

Level: Intermediate Knowledge Required:
  • Custom Controls
  • Tab Control
  • Inheritance
  • GDI+
Description: In this post we will discuss how can we customize a Tab Control, as shown in above figure. There are different ways to customize a Tab Control. One way is to use Custom Painting by overriding the OnPaint method of Tab Control. We will use the same way here. We will create a control, inherited from Tab Control. Then in the New() method (constructor), we will set style as,
Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
Me.SetStyle(ControlStyles.UserPaint, True)
The 2nd line tells the Tab Control NOT to use its own Control Drawing, instead use the OnPaint method to draw the contents of control. Note that the Tab Pages will be rendered by themselves, we don't need to handle them. In the OnPaint Method we will perform as, 1) Create the Background of Tab Control 2) Draw the Tab Buttons For drawing the Tab Buttons we will use the GetTabRect() method, which returns the bounds of Tab Button to be displayed. That is the core customization. Additionally I have added other properties,
PropertiesDescription
BackColorControl's background color
HeaderWidthWidth of Tab Buttons
HeaderHeightHeight of Tab Buttons
HeaderAlignmentText Alignment in the Tab Button
HeaderPaddingPadding of Text in the Tab Button
HeaderBorderColorTab Button Border Color
HeaderFontFont of Tab Button
HeaderBackColorBackground Color of Tab Button
HeaderForeColorText Color of Tab Button
HeaderSelectedBackColorBackground color of Selected Tab Button
HeaderSelectedForeColorText Color of Selected Tab Button
Download the Source: CustomTabControl.zip

Wednesday, April 23, 2008

DataGridView Custom Percentage/Progress Bar Column


Description:
This is a smart as well as simple Custom Progress Bar Column for DataGridView Control, which is used to display the Percentage Graphically.

Here is the Source

DataGridViewPercentageColumn.zip