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:
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
- Support more controls (numeric edit, spin up/down, progress, slider, etc..), other suggestions are welcome.
- Fix bugs
- Enhance control appearance more (for
ComboBox and DateTimePicker)
- Generate documentation
- Any other ideas
History
- 11-Oct-2006
- 18-Oct-2006
- Removed strong name signing file password
References
