ExControls Version 1.0

• Download source - 53.8 Kb
• Download demo - 896 Kb

Introduction

When I was looking for some fancy looking user controls for my .NET applications, I found many commercial custom user controls. And, I decided to implement my own custom looking user entry controls.

This is version 1.0 of ExControls. The next versions will contain extra controls, graphics enhancements, and features. Community support and input regarding what to be in version 2.0 will be so much appreciated.

If you have any difficulties downloading or running the demo, please contact me.

Background

To find all about the ExControls library, take a look at the Klik commercial user controls library.

ExControls Library

The ExControls library uses round rectangle effects to render the controls as show in the screenshots in the beginning of the article. The following controls have been implemented:

• LabelEntry
• TextEntry
• ComboBoxEntry
• ListBoxEntry
• DateTimePickerEntry
• LinkLabelEntry
• MaskedEditEntry
• MonthCalendarEntry
• PictureBoxEntry
• RoundCornerPanel
• RoundRectForm
• ExLabel
• ExTextBox

Each one of these control inherits from the BaseEntry user control. The BaseEntry control encapsulates the drawing and hosting of different controls.

The entry title label holds the title of the entry. The round panel is used to host other controls.

The relation between the controls and BaseEntry is described in the following diagram

BaseEntry

The base of all the Entry controls. The gradient drawing and sizing logic is encapsulated inside this base class. This class is an abstract and can't be instantiated.

Properties

• public string TitleText: The title label text
• public Font TitleFont: The title label font
• public Color TitleForeColor: The title label fore color
• public int TitleWidth: The title label width, this will affect the hosted control and the round panel size
• public Image TitleImage: The title label image
• public ContentAlignment TitleImageAlign: The title label image alignment
• public int TitleImageIndex: The title label image index, in case of using an image list
• public ImageList TitleImageList: The title label image list
• public ContentAlignment TitleTextAlign: The title label text alignment
• public RightToLeft TitleRightToLeft: The title label, right or left
• public Color NormalBackColor1: The control gradient start normal color
• public Color NormalBackColor2: The control gradient end normal color
• public Color HoverBackColor1: The control gradient start mouse over color
• public Color HoverBackColor2: The control gradient end mouse over color
• public Color ActiveBackColor1: The control gradient start focus color
• public Color ActiveBackColor2: The control gradient end focus color
• public Color DisabledBackColor1: The control gradient start disabled color
• public Color DisabledBackColor2: The control gradient end disabled color

LabelEntry

Simple label entry control.

Properties

• public Label LabelControl: The hosted label control
• public string EntryText: The Label text

TextEntry

Textbox entry control.

Properties

• public TextBox TextBoxControl: The hosted text control
• public string EntryText: The TextBox text.

MaskedEditEntry

Masked edit entry control.

Properties

• public MaskedTextBox MaskedTextBoxControl: the hosted MaskedEdit control
• public string EntryMaskedText: the MaskedTextBox text

ComboBoxEntry

Combo box entry control.

Properties

• public ComboBox ComboBoxControl: The hosted ComboBox control
• public object DataSource: The combo box data source, the attribute provider tells the form designer to use the IListSource to edit this property
• public string DataMember: The combo box data member property, the TypeConverter and Editor properties tell the form designer how to edit this property
• public string ValueMember: The combo box value member, the Editor properties tell the form designer how to edit this property
• public string LookupMember: The combo box selected value property

ListBoxEntry

List box entry control.

Properties

• public ListBox ListBoxControl: The hosted ListBox control
• public object DataSource: The list box data source, the attribute provider tells the form designer to use the IListSource to edit this property
• public string DataMember: The list box data member property, the TypeConverter and Editor properties tell the form designer how to edit this property
• public string ValueMember: The list box value member, the Editor properties tell the form designer how to edit this property
• public string LookupMember: The list box selected value property
• internal int TitleWidth: The TitleWidth property is hidden and can't be modified for this control

DateTimePickerEntry

Date-time picker entry control.

Properties

• public DateTimePicker DateTimePickerControl: The hosted DateTimePicker control
• public DateTime EntryDateTime: The entry date time value

MonthCalendarEntry

Calendar entry control.

Properties

• public MonthCalendar MonthCalendarControl: The hosted month calendar control
• public DateTime EntryTodayDate: The current date to show in the calendar
• internal int TitleWidth: The TitleWidth property is hidden and can't be modified for this control

LinkLabelEntry

Link label entry control

Properties

• public LinkLabel LinkLabelControl: The hosted LinkLabel control
• public string EntryLinkText: The LinkLabel text

PictureBoxEntry

Picture box entry control

Properties

• public PictureBox PictureBoxControl: The hosted PictureBox control
• public Image EntryImage: The PictureBox image
• internal int TitleWidth: The TitleWidth property is hidden and can't be modified for this control

RoundRectForm

A border-less form with round corners. This form supports dragging by mouse, by clicking any where over it.

public partial class RoundCornerForm : Form
{
    private bool isDrag = false;
    private Size mouseDistance;

    public RoundCornerForm()
    {
        InitializeComponent();
    }

    private void RoundRectForm_Resize(object sender, EventArgs e)
    {
        Rectangle rect = new Rectangle(0, 0, Width, Height);
        GraphicsPath path = Helper.GetRoundRectPath(rect, 8);
        this.Region = new Region(path);

    }

    private void RoundRectForm_MouseMove(object sender, 
                                      MouseEventArgs e)
    {
        if (isDrag)
        {
            this.Location = new Point(MousePosition.X - 
               mouseDistance.Width, MousePosition.Y - 
               mouseDistance.Height);
        }

    }

    private void RoundRectForm_MouseUp(object sender, 
                                    MouseEventArgs e)
            {
        isDrag = !(e.Button == MouseButtons.Left);
    }

    private void RoundRectForm_MouseDown(object sender, 
                                      MouseEventArgs e)
    {
        mouseDistance = new Size(MousePosition.X - 
           Location.X, MousePosition.Y - Location.Y);

        isDrag = e.Button == MouseButtons.Left;
    }
}

RoundCornerPanel

A panel with round corners to host other controls.

public partial class RoundCornerPanel : Panel
{
    public RoundCornerPanel()
    {
        InitializeComponent();
    }

    public RoundCornerPanel(IContainer container)
    {
        container.Add(this);

        InitializeComponent();
    }

    private void RoundCornerPanel_Resize(object sender, EventArgs e)
    {
        Rectangle rect = new Rectangle(0, 0, Width, Height);
        GraphicsPath path = Helper.GetRoundRectPath(rect, 8);
        this.Region = new Region(path);
    }
}

ExLabel

A label with round corners, and uses gradients to fill the background.

public partial class ExLabel : Label
{
    private Color backColorStart = Color.Orange;

    public Color BackColorStart
    {
        get { return backColorStart; }
        set 
        {
            if (!value.IsEmpty)
            {
                backColorStart = value;
            }
            else
            {
                backColorStart = Color.Orange;
            }
        }
    }
    private Color backColorEnd = Color.FromArgb(255, 206, 157);

    public Color BackColorEnd
    {
        get { return backColorEnd; }
        set 
        {
            if (!value.IsEmpty)
            {
                backColorEnd = value;
            }
            else
            {
                backColorEnd = Color.FromArgb(255, 206, 157);
            }
        }
    }

    public ExLabel()
    {
        InitializeComponent();

        SetStyle(ControlStyles.UserPaint, true);
    }



    private void ExLabel_Paint(object sender, PaintEventArgs e)
    {
        Rectangle rect = new Rectangle(0, 0, Width, Height);
        LinearGradientBrush b = new LinearGradientBrush(rect, 
                           BackColorStart, BackColorEnd, 90);
        GraphicsPath path = Helper.GetRoundRectPath(rect, 8);
        e.Graphics.FillPath(b, path);

        ContentAlignment align = this.TextAlign;

        StringFormat format = new StringFormat();

        switch (align)
        {
            case ContentAlignment.TopLeft:
                format.Alignment = StringAlignment.Near;
                format.LineAlignment = StringAlignment.Near;
                break;
            case ContentAlignment.TopCenter:
                format.Alignment = StringAlignment.Center;
                format.LineAlignment = StringAlignment.Near;
                break;
            case ContentAlignment.TopRight:
                format.Alignment = StringAlignment.Far;
                format.LineAlignment = StringAlignment.Near;
                break;
            case ContentAlignment.MiddleLeft:
                format.Alignment = StringAlignment.Near;
                format.LineAlignment = StringAlignment.Center;
                break;
            case ContentAlignment.MiddleCenter:
                format.Alignment = StringAlignment.Center;
                format.LineAlignment = StringAlignment.Center;
                break;
            case ContentAlignment.MiddleRight:
                format.Alignment = StringAlignment.Far;
                format.LineAlignment = StringAlignment.Center;
                break;
            case ContentAlignment.BottomLeft:
                format.Alignment = StringAlignment.Near;
                format.LineAlignment = StringAlignment.Far;
                break;
            case ContentAlignment.BottomCenter:
                format.Alignment = StringAlignment.Center;
                format.LineAlignment = StringAlignment.Far;
                break;
            case ContentAlignment.BottomRight:
                format.Alignment = StringAlignment.Far;
                format.LineAlignment = StringAlignment.Far;
                break;
        }
        
        rect.Inflate(-10, 0);


        e.Graphics.DrawString(Text, Font, 
           new SolidBrush(ForeColor), rect, format);
    }
}

ExTextBox

A text box with no restriction in sizing (AutoSize property turned off).

public partial class ExTextBox : TextBox
{
    public ExTextBox()
    {
        InitializeComponent();

        this.AutoSize = false;
    }
}

Helper class

A class with some helper functions to be used with ExControls or any other. Currently, the RoundRectPath functionality is implemented in the helper class.

public class Helper
{
    private Helper()
    {
    }

    public static GraphicsPath 
           GetRoundRectPath(RectangleF rect, float radius)
    {
        return GetRoundRectPath(rect.X, rect.Y, 
              rect.Width, rect.Height, radius);
    }
    public static GraphicsPath GetRoundRectPath(float X, 
       float Y, float width, float height, float radius)
    {

        GraphicsPath gp = new GraphicsPath();

        gp.AddLine(X + radius, Y, X + width - (radius * 2), Y);
        gp.AddArc(X + width - (radius * 2), Y, radius * 2, 
                  radius * 2, 270, 90);
        gp.AddLine(X + width, Y + radius, X + width, 
                   Y + height - (radius * 2));
        gp.AddArc(X + width - (radius * 2), Y + height - (radius * 2), 
                  radius * 2, radius * 2, 0, 90);
        gp.AddLine(X + width - (radius * 2), 
                   Y + height, X + radius, Y + height);
        gp.AddArc(X, Y + height - (radius * 2), 
                  radius * 2, radius * 2, 90, 90);
        gp.AddLine(X, Y + height - (radius * 2), X, Y + radius);
        gp.AddArc(X, Y, radius * 2, radius * 2, 180, 90);
        gp.CloseFigure();
        return gp;
    }
}

Control Properties Attributes Pain

The controls property attributes was the most pain while developing the ExControls 1.0. The documentation is poor, and the resources are little. So I added this section to describe some of the attributes I used in ExControls 1.0.

DefaultBindingProperty("PropertyName")

Attribute to specify which control property to be used by default when binding.

LookupBindingProperties("DataSource", "DataMember", "ValueMember", "LookupMember")

Attribute to specify which control properties to bind list/combo control to data source.

DesignerSerializationVisibility(DesignerSerializationVisibility.Content)

Attribute to tell the form designer to serialize all the changes done by the control property that has internal properties. This attribute is used with control properties like: TextBoxControlPropery, ComboBoxControl. If this attribute is omitted, any changes you do to the property will not be saved.

Bindable(true)

Attribute to specify whether the control property can be bound to the data source or not.

Data Binding

The controls can be bound to any data source like the standard .NET controls. To use ExControls for binding from VS 2005 Data Sources window, select the appropriate ExControl for each field you want to bind to. For example: TextEntry for text fields, LabelEntry for read only fields, etc..

Manual binding is also available via the Controls data binding properties.

What's Next

1. Support more controls (numeric edit, spin up/down, progress, slider, etc..), other suggestions are welcome.
2. Fix bugs
3. Enhance control appearance more (for ComboBox and DateTimePicker)
4. Generate documentation
5. Any other ideas

History

• 11-Oct-2006
  • Version 1.0 release
• 18-Oct-2006
  • Removed strong name signing file password

References

• Walkthrough: Creating a User Control that Supports Simple Data Binding
• Custom Forms
• Varieties of Custom Controls