ExControls 版本 1.0

• 下载源代码 - 53.8 Kb
• 下载演示 - 896 Kb

引言

在我为我的 .NET 应用程序寻找一些花哨的用户控件时，我发现了许多商业自定义用户控件。于是，我决定自己实现自定义外观的用户输入控件。

这是 ExControls 的 1.0 版本。未来的版本将包含额外的控件、图形增强和功能。非常感谢社区的支持和关于 2.0 版本应该包含什么的建议。

如果您在下载或运行演示时遇到任何困难，请联系我。

背景

要了解 ExControls 库的全部内容，请查看 Klik 商业用户控件库。

ExControls 库

ExControls 库使用圆角矩形效果来渲染控件，如文章开头截图所示。已实现以下控件：

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

这些控件中的每一个都继承自 BaseEntry 用户控件。BaseEntry 控件封装了不同控件的绘制和托管。

条目标题标签显示条目的标题。圆角面板用于托管其他控件。

控件与 BaseEntry 之间的关系在以下图表中描述：

BaseEntry

所有 Entry 控件的基础。渐变绘制和大小调整逻辑封装在此基类中。此类是 abstract 的，无法实例化。

属性

• public string TitleText：标题标签文本
• public Font TitleFont：标题标签字体
• public Color TitleForeColor：标题标签前景色
• public int TitleWidth：标题标签宽度，这将影响托管控件和圆角面板的大小
• public Image TitleImage：标题标签图像
• public ContentAlignment TitleImageAlign：标题标签图像对齐方式
• public int TitleImageIndex：标题标签图像索引，如果使用图像列表
• public ImageList TitleImageList：标题标签图像列表
• public ContentAlignment TitleTextAlign：标题标签文本对齐方式
• public RightToLeft TitleRightToLeft：标题标签，右对齐或左对齐
• public Color NormalBackColor1：控件正常状态下的渐变起始颜色
• public Color NormalBackColor2：控件正常状态下的渐变结束颜色
• public Color HoverBackColor1：控件鼠标悬停时的渐变起始颜色
• public Color HoverBackColor2：控件鼠标悬停时的渐变结束颜色
• public Color ActiveBackColor1：控件获得焦点时的渐变起始颜色
• public Color ActiveBackColor2：控件获得焦点时的渐变结束颜色
• public Color DisabledBackColor1：控件禁用状态下的渐变起始颜色
• public Color DisabledBackColor2：控件禁用状态下的渐变结束颜色

LabelEntry

简单的标签条目控件。

属性

• public Label LabelControl：托管的标签控件
• public string EntryText：Label 文本

TextEntry

文本框条目控件。

属性

• public TextBox TextBoxControl：托管的文本控件
• public string EntryText：TextBox 文本。

MaskedEditEntry

掩码编辑条目控件。

属性

• public MaskedTextBox MaskedTextBoxControl：托管的 MaskedEdit 控件
• public string EntryMaskedText：MaskedTextBox 文本

ComboBoxEntry

组合框条目控件。

属性

• public ComboBox ComboBoxControl：托管的 ComboBox 控件
• public object DataSource：组合框数据源，属性提供程序告诉窗体设计器使用 IListSource 来编辑此属性
• public string DataMember：组合框数据成员属性，TypeConverter 和 Editor 属性告诉窗体设计器如何编辑此属性
• public string ValueMember：组合框值成员，Editor 属性告诉窗体设计器如何编辑此属性
• public string LookupMember：组合框选定值属性

ListBoxEntry

列表框条目控件。

属性

• public ListBox ListBoxControl：托管的 ListBox 控件
• public object DataSource：列表框数据源，属性提供程序告诉窗体设计器使用 IListSource 来编辑此属性
• public string DataMember：列表框数据成员属性，TypeConverter 和 Editor 属性告诉窗体设计器如何编辑此属性
• public string ValueMember：列表框值成员，Editor 属性告诉窗体设计器如何编辑此属性
• public string LookupMember：列表框选定值属性
• internal int TitleWidth：TitleWidth 属性已隐藏，无法为此控件修改

DateTimePickerEntry

日期时间选择器条目控件。

属性

• public DateTimePicker DateTimePickerControl：托管的 DateTimePicker 控件
• public DateTime EntryDateTime：条目日期时间值

MonthCalendarEntry

日历条目控件。

属性

• public MonthCalendar MonthCalendarControl：托管的月历控件
• public DateTime EntryTodayDate：要显示在日历中的当前日期
• internal int TitleWidth：TitleWidth 属性已隐藏，无法为此控件修改

LinkLabelEntry

链接标签条目控件

属性

• public LinkLabel LinkLabelControl：托管的 LinkLabel 控件
• public string EntryLinkText：LinkLabel 文本

PictureBoxEntry

图片框条目控件

属性

• public PictureBox PictureBoxControl：托管的 PictureBox 控件
• public Image EntryImage：PictureBox 图像
• internal int TitleWidth：TitleWidth 属性已隐藏，无法为此控件修改

RoundRectForm

一个无边框的圆角窗体。此窗体支持通过鼠标拖动，只需单击窗体上的任何位置即可。

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

一个带圆角的面板，用于托管其他控件。

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

一个带有圆角标签，并使用渐变填充背景。

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

一个在大小调整方面没有限制的文本框（AutoSize 属性已关闭）。

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

        this.AutoSize = false;
    }
}

辅助类

一个包含一些辅助函数的类，用于 ExControls 或其他任何组件。目前，RoundRectPath 功能已在辅助类中实现。

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;
    }
}

控件属性特性面板

开发 ExControls 1.0 时，控件属性特性是最令人头疼的部分。文档匮乏，资源稀少。因此，我添加了本节来描述我在 ExControls 1.0 中使用的一些特性。

DefaultBindingProperty("PropertyName")

用于指定绑定时默认使用的控件属性的特性。

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

用于指定将列表/组合框控件绑定到数据源的控件属性的特性。

DesignerSerializationVisibility(DesignerSerializationVisibility.Content)

此特性用于告知窗体设计器序列化具有内部属性的控件属性所做的所有更改。此特性与 TextBoxControlPropery、ComboBoxControl 等控件属性一起使用。如果省略此特性，对属性所做的任何更改都不会被保存。

Bindable(true)

指定控件属性是否可以绑定到数据源的特性。

数据绑定

这些控件可以像标准的 .NET 控件一样绑定到任何数据源。要使用 ExControls 从 VS 2005 数据源窗口进行绑定，请为要绑定的每个字段选择合适的 ExControl。例如：文本字段使用 TextEntry，只读字段使用 LabelEntry，依此类推。

也可以通过控件数据绑定属性进行手动绑定。

下一步

1. 支持更多控件（数字编辑、上下按钮、进度条、滑块等），欢迎其他建议。
2. 修复 bug
3. 进一步增强控件外观（针对 ComboBox 和 DateTimePicker）
4. 生成文档
5. 任何其他想法

历史

• 2006 年 10 月 11 日
  • 版本 1.0 发布
• 2006 年 10 月 18 日
  • 删除了强命名签名文件密码

参考文献

• 演练：创建支持简单数据绑定的用户控件
• 自定义窗体
• 各种自定义控件