Click here to Skip to main content
15,395,698 members
Articles / Programming Languages / C#
Posted 12 Jan 2007


85 bookmarked

An Extended/Animated Header Control w/Design-time integration

Rate me:
Please Sign up or sign in to vote.
4.98/5 (25 votes)
19 Jan 2007CPOL5 min read
Animated, docking header control

Image 1


Need a way to visually design some impressive controls quickly?

The idea was to make it simple and fast to create a control that would attach itself to a windows control and show/hide contents by expanding and collapsing. I started out trying to add a header to ListBox control and found that I couldn't get it to do what I wanted so I proceded to write a generic header that you could associate with any windows control. I kept adding functionallity to it to make it truly generic and this is what I ended up with.

The ExtendedHeaderControl allows you to; dock your Header to a windows control such as a ListBox. Dock a Footer control to a windows control and have it follow the control when animating. Define custom corners (Ear Adornments) for the Header and Footer controls. Add Images, select borders, add Text, and configure Background color either solid or Gradient.


There are three main concepts in this control that I would like to discuss; the overall structure and workings of the control, the expanding/collapsing animated effect and the design-time integration functionality.

Overall Structure and Workings

The header class is derived from the Windows Control class and allows us to give the otherways drab control some personality. By overriding the OnPaint method we can make it visually appealing and aesthetically pleasing. (Always wanted to use that) The XPExtendedHeaderBase class does most of the work and the derived classes XPHeaderControl and XPFooterControl provide funtionality specific to there function.

To have the ability to expand/collapse the control we must have a reference to it. Once we have this reference we will use the controls height property to manipulate its size during animation. This is also true for the FooterControl to have the ability to follow the control.

Animating the Control

Actually the animation is not that difficult. I used two timers, one for expanding and one for collapsing. Probably could have gotten away with only one but the logic was a tad easier. (The old KISS theory) The logic here is to keep track of your position from the minimum height of the control, which is zero and the maixmum height. I use a counter for this that acts like a cursor and whose value represents the hieght of the control. The timers will increase or decrease this count depending on whether expanding or collapsing is taking place. When we get to either the min. or max. count we stop the timer and we are done. The only tricky part was if the user switched directions while animation was active. If we use the count field globally between the two timers and increase or decrease until the min. or max. value is reached before stopping timers the operation will continue until completed.

Design-time integration

I originally submitted this article without this feature because I figured it would be complicated, but I was wrong it turned out to be very intuitive and easy to do! You start by defining a property you wish to work with and asigning the following attribute to it;

[Editor(typeof(your-derived-editor), typeof(UITypeEditor))] 

Where your-derived-editor is an editor class, derived from UITypeEditor that provides the hook for us to customize the way in which the user makes the selection desired. The types of interaction available are none (default), drop down control or a modal form. I opted for the drop down window because it didn't require all the services that a form provided. I didn't try the modal form but according to my research its just as easy to implement.

In your editor you will need to override two methods;

public override UITypeEditorEditStyle <BR>                            GetEditStyle(ITypeDescriptorContext context) 

The context variable is a reference to the component issuing the request and this is where you determine what type of editor you want, in my case I return the UITypeEditorEditStyle.DropDown value. The second method is the

public override object EditValue(ITypeDescriptorContext context, <BR>                                 IServiceProvider provider, object value) 

The provider is the EditorService we are subscribing to, which in this case is the IWindowsFormsEditorService provider. The value is the current value of the property and is what we will return when we are done.

EarUIEditor dropDownEditor = new EarUIEditor(editorService); <BR><BR>dropDownEditor.TypeOfEar = (EarTypes) value; <BR><BR>editorService.DropDownControl(dropDownEditor); <BR><BR>return dropDownEditor.TypeOfEar; <BR>

The dropDownEditor we are instantciating above is the third step in this process. The EarUIEdtor is a class derived fromUserControl that is the template used here to add the header and buttons to. This provides a better looking and more user friendly manner in which to present to the user. Your derived class can be used just like any other type of control. The only things that you need to add to your editor code is a constructor with the provider parameter.

public EarUIEditor(IWindowsFormsEditorService ed) 
I use this reference to conclude this operation by dismissing the drop down control.

I've tried to provide adequate comments in the code so hopefully it will make better sense.

Using the code

To use this control go to Customize Toolbox and include the XPControlLib.dll in your project. Add a reference to it in you project using Solution Explorer. After you've done this you can drop XPHeaderControl and XPFooterControls onto your form and your ready to go!

There are a couple of properties to consider when configuring;

  • WorkingControl - This is a list of available controls that you may associate you Header control with.
  • DockWorkingControl - Positions the Header control above the Working control and takes on its width.
  • FooterControl - A list of available Footer controls to associate with this header. All this does is send a message to the footer telling it that it needs to move when Expanding or Collapsing.
  • WorkingControl - A list of available controls that may be used.
  • DockWorkingControl - Positions the Footer control below the Working Control and takes on its width.

Additionally in your code if you want the control to be collapsed initially call the controls CollapseControl public method.

Points of Interest

I learned quite a bit about custom controls and some of the tricks to gettiing them to work properly. I tried to add comments in the code where I thought it was needed, You are free to use this software but PLEASE follow the rule that "Give credit to others as you would have them give credit to you!"

I hope you will find this software helpful.


  • Version 1.0 1/1/2007 Initial distribution
  • Version 1.01 1/20/2007 Added design-time intgration


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mike Hankey
United States United States
Currently enjoying retirement and working on projects without pressure, deadlines or any kind of management.

Comments and Discussions

GeneralProblem with the Control Pin
Shof4-May-07 11:21
MemberShof4-May-07 11:21 
GeneralRe: Problem with the Control Pin
Mike Hankey4-May-07 12:46
professionalMike Hankey4-May-07 12:46 
Questiontablelayoutpanel full docked behaviour [modified] Pin
UltraWhack23-Jan-07 7:50
MemberUltraWhack23-Jan-07 7:50 
AnswerRe: tablelayoutpanel full docked behaviour Pin
Mike Hankey23-Jan-07 9:05
professionalMike Hankey23-Jan-07 9:05 
GeneralRe: tablelayoutpanel full docked behaviour Pin
UltraWhack24-Jan-07 0:44
MemberUltraWhack24-Jan-07 0:44 
GeneralVery very good job Pin
Member 198316822-Jan-07 5:43
MemberMember 198316822-Jan-07 5:43 
GeneralRe: Very very good job Pin
Mike Hankey23-Jan-07 8:32
professionalMike Hankey23-Jan-07 8:32 
GeneralImpressive Pin
shreekar17-Jan-07 0:30
Membershreekar17-Jan-07 0:30 
GeneralRe: Impressive Pin
Mike Hankey9-Feb-07 4:15
professionalMike Hankey9-Feb-07 4:15 
GeneralVery practical and professional Pin
2Nou17-Jan-07 0:10
Member2Nou17-Jan-07 0:10 
GeneralRe: Very practical and professional Pin
Mike Hankey9-Feb-07 4:16
professionalMike Hankey9-Feb-07 4:16 
GeneralNice work Pin
R%S16-Jan-07 23:25
MemberR%S16-Jan-07 23:25 
GeneralRe: Nice work Pin
Mike Hankey9-Feb-07 4:16
professionalMike Hankey9-Feb-07 4:16 
GeneralA much closer look is called for Pin
Ilíon16-Jan-07 7:11
MemberIlíon16-Jan-07 7:11 
GeneralRe: A much closer look is called for Pin
Mike Hankey9-Feb-07 4:18
professionalMike Hankey9-Feb-07 4:18 
QuestionHeader Control from Left to RIght & Right to Left? Pin
kresso13-Jan-07 1:26
Memberkresso13-Jan-07 1:26 
AnswerRe: Header Control from Left to RIght & Right to Left? Pin
Mike Hankey20-Jan-07 5:29
professionalMike Hankey20-Jan-07 5:29 
Generalgood job Pin
ahmed4513-Jan-07 1:15
Memberahmed4513-Jan-07 1:15 
GeneralRe: good job Pin
Mike Hankey9-Feb-07 4:19
professionalMike Hankey9-Feb-07 4:19 
GeneralNice! Pin
UnRusoDeCaracas12-Jan-07 17:10
MemberUnRusoDeCaracas12-Jan-07 17:10 
GeneralRe: Nice! Pin
Mike Hankey9-Feb-07 4:19
professionalMike Hankey9-Feb-07 4:19 
GeneralCongratulations for your job Pin
kresso12-Jan-07 16:24
Memberkresso12-Jan-07 16:24 
GeneralRe: Congratulations for your job Pin
Mike Hankey9-Feb-07 4:20
professionalMike Hankey9-Feb-07 4:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.