DrolC Control Extender

• Download demo project - 24.2 KB
• Download source - 42.0 KB

Introduction

This article's goal is to show developers how to improve and get a pretty good custom unified look and feel on Windows applications.

Background

I noticed PureComponent's (VisualExtender) format, where you get your regular Windows Forms controls laid out within a nice bar where you can set a title, title icon and a control icon to make it easier to understand for the user. I thought that couldn't be to hard to mimic and I was right. It took me a couple of hours to write the code we are going to discuss in this article.

Using the Code

First off, the only thing you need to do to get started using this control extender is to download the demo project and include DrolC.dll as a reference to your project. If you also want it in your toolbox, right click on the Toolbox page where you want to add it and select the menu item "Choose Items." Browse to the folder where you extracted the downloaded ZIP, navigate into the bin/Debug folder and select the DrolC.dll file. Then you just click OK and the control will appear in the toolbox.

Using the code, hm... It can't be any simpler than just dragging and dropping the control from the toolbox. Then just associate another Windows Forms control that derives from the Control class (TextBox, ListBox, ComboBox, etc) by selecting ControlEx in the Properties window and selecting the control you want. Then the control is ready for your use. Oh, and yeah. Add some color, some images, a title and ta-daa: your regular Windows Form control looks stunning.

The extra Properties you will find in the Properties window and on the Control are the following:

// 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

So, How Does the Layout Logic Work Then?

Well, there's only one really simple method that handles the layout and it's the DoLayout() method. In this method, we calculate the size for all of the controls and images. We also calculate the internal position for the controls. I think the code is more descriptive than if I were to write any more about it. :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();
}

Points of Interest

I will continue to write some more DrolC controls and Control Extenders. They will all be submitted to The Code Project.

The next step is to write a layout panel that automatically manages the DrolC controls it contains and auto-adjusts the label width, etc. between the controls to get an even easier way to extend and customize the Windows UI.

Just let me know if there are any bugs and/or performance issues and I will fix them. That's a promise. :)

For the ones that have been awake during this article, kudos! And yes, for all of you that have used my iBar control, it works great with the DrolC control, too. Check it out here, iBar (Code Project hosted), if you haven't already =)

History

• 23 August, 2007 -- This is release 1.0 of this control. More will be released as soon as I get some spare time.