DrolC 控件扩展器

• 下载演示项目 - 24.2 KB
• 下载源代码 - 42.0 KB

引言

本文的目标是向开发人员展示如何改进 Windows 应用程序的外观和感觉，使其更美观、更统一。

背景

我注意到 PureComponent 的 (VisualExtender) 格式，它让您可以将常规 Windows Forms 控件放置在一个漂亮的栏中，您可以在其中设置标题、标题图标和控件图标，以便用户更容易理解。 我认为模仿起来不会太难，我是对的。 我花了几个小时编写我们将在本文中讨论的代码。

Using the Code

首先，要开始使用此控件扩展器，您只需下载演示项目，并将 *DrolC.dll* 作为引用添加到您的项目中。 如果您还想将其放在工具箱中，请右键单击要添加它的工具箱页面，然后选择菜单项“选择项”。 浏览到您解压缩下载的 ZIP 的文件夹，导航到 bin/Debug 文件夹，然后选择 *DrolC.dll* 文件。 然后，您只需单击“确定”，控件就会出现在工具箱中。

使用代码，嗯... 没有比直接从工具箱中拖放控件更简单的了。 然后，只需在“属性”窗口中选择“ControlEx”，然后选择您想要的控件，即可关联另一个派生自 Control 类的 Windows Forms 控件（TextBox、ListBox、ComboBox 等）。 然后控件就可以使用了。 哦，对了。 添加一些颜色、一些图像、一个标题和 ta-daa：您的常规 Windows Form 控件看起来令人惊叹。

您将在“属性”窗口和控件上找到的额外属性如下

// This is the "Actual" control that is attatched to 

// the DrolC Control

public Control ControlEx

// This is the second (2) background color so we can make 

// a nice Linear Gradient on the control

public Color FadeBgColor

// This is the value that is used when drawing the 

// Linear Gradient with BackColor and FadeBgColor

public float FadeAngel

// This is the Icon attatched to the Left side icon

public Image LabelIcon

// This is the Icon that is attatched to the right of the ControlEx 

// control

public Image ControlIcon

// This value tells the control how mutch we are going to round the 

// corners for the DrolC control

public float CornerRadius

// Tells the DrolC layout code how mutch spacing we are going to apply 

// between the controls.

public int LayoutSpacing

// The border color of the control

public Color BorderColor

// The width to use for the border, default is set to 2

public int BorderWidth

// This is the text we apply to our label that describes what 

// the ControlEx input 

// is supposed to be. Ex. "Enter First Name"

public string Title

// THIS value is the most important value in the control. It 

// describes in procent (%) 

// how mutch space the Label will take. All other space will be 

// assigned between 

// the ControlEx and the Images (if any images)

public float TitleWidthProcent

// Describes the Font for the Label

public Font TitleFont

// Describes with color the border will have when the DrolC control has Focus

public Color ActiveBorderColor

那么，布局逻辑是如何工作的呢？

嗯，只有一个非常简单的方法可以处理布局，那就是 DoLayout() 方法。 在此方法中，我们计算所有控件和图像的大小。 我们还计算控件的内部位置。 我认为代码比我写更多关于它的内容更具有描述性。 :o)

private void DoLayout()
{
    if( this._textLabel == null )
        return;

    int y = 0;
    this.SuspendLayout();

    this._textLabel.Location = new Point( _layoutSpacing, 0 );
    this._textLabel.Height = this.Height;
    this._textLabel.Width = 
        (int)( this.Width * ( _titleWidthProcent / 100 ) );
    if( this._textLabel.Width < 50 )
        this._textLabel.Width = 50;

    int controlExWidth = 
        ( this.Width - ( this._layoutSpacing * 2 ) ) - this._textLabel.Width;
    if( this._labelIcon != null )
    {
        controlExWidth -= this._labelIcon.Width;
        y = ( this.Height / 2 ) - ( this._labelIcon.Height / 2 );
        _labelIconRC = 
            new Rectangle( _textLabel.Width + _textLabel.Location.X,
            y, _labelIcon.Width, _labelIcon.Height );
    }

    y = ( this.Height / 2 ) - ( this._actualControl.Height / 2 );
    this._actualControl.Location = 
        new Point( this._layoutSpacing + this._textLabel.Location.X + 
        this._textLabel.Width + 
        ( _labelIcon != null ? _labelIcon.Width : 0 ), y );

    if( this._controlIcon != null )
    {
        controlExWidth -= 
            ( this._controlIcon.Width + this._layoutSpacing * 2 );
        y = ( this.Height / 2 ) - ( this._controlIcon.Height / 2 );
        _controlIconRC = 
            new Rectangle( this._layoutSpacing + controlExWidth + 
            _actualControl.Location.X,
             y, _controlIcon.Width, 
             this._controlIcon.Height );
    }
    else
    {
        controlExWidth -= (int)this._cornerRadius;
    }

    this._actualControl.Width = controlExWidth;
    this.ResumeLayout( false );

    Refresh();
}

关注点

我将继续编写更多的 DrolC 控件和控件扩展器。 它们都将提交给 The Code Project。

下一步是编写一个布局面板，该面板自动管理它包含的 DrolC 控件，并自动调整控件之间的标签宽度等，以便更容易地扩展和自定义 Windows UI。

如果存在任何错误和/或性能问题，请告诉我，我会修复它们。 这是一个承诺。 :)

对于在本文中保持清醒的人，恭喜！ 是的，对于所有使用过我的 iBar 控件的人来说，它与 DrolC 控件配合使用也很棒。 如果您还没有看过，请在此处查看 iBar (Code Project hosted) =)

历史

• 2007 年 8 月 23 日 -- 这是此控件的 1.0 版本。 一旦我有空闲时间，就会发布更多版本。