Click here to Skip to main content
Click here to Skip to main content

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

, 19 Jan 2007
Rate this:
Please Sign up or sign in to vote.
Animated, docking header control

Introduction

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.

Concepts

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.
editorService.CloseDropDown(); 

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.

History

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

License

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

About the Author

Mike Hankey
Retired
United States United States
I'm an old assembler and C programmer self taught in the object oriented languages and Web design. Upon graduating from Murray State University in 1983 I Started doing embedded systems for the automotive industry, got a wild hair and moved to Florida in 1986 and did some work on DEC PDP and MicroVax computers.
My latest project:
ToDoManager extension for VS2010 and Atmel Studio 6.1

Comments and Discussions

 
GeneralProblem with the Control PinmemberShof4-May-07 11:21 
GeneralRe: Problem with the Control PinmemberMike Hankey4-May-07 12:46 
Questiontablelayoutpanel full docked behaviour [modified] PinmemberUltraWhack23-Jan-07 7:50 
AnswerRe: tablelayoutpanel full docked behaviour PinmemberMikeh3221723-Jan-07 9:05 
GeneralRe: tablelayoutpanel full docked behaviour PinmemberUltraWhack24-Jan-07 0:44 
GeneralVery very good job PinmemberMember #198316822-Jan-07 5:43 
GeneralRe: Very very good job PinmemberMikeh3221723-Jan-07 8:32 
GeneralImpressive Pinmembershreekar17-Jan-07 0:30 
GeneralRe: Impressive PinmemberMike Hankey9-Feb-07 4:15 
GeneralVery practical and professional Pinmember2Nou17-Jan-07 0:10 
GeneralRe: Very practical and professional PinmemberMike Hankey9-Feb-07 4:16 
GeneralNice work PinmemberR%S16-Jan-07 23:25 
GeneralRe: Nice work PinmemberMike Hankey9-Feb-07 4:16 
GeneralA much closer look is called for PinmemberIlíon16-Jan-07 7:11 
GeneralRe: A much closer look is called for PinmemberMike Hankey9-Feb-07 4:18 
QuestionHeader Control from Left to RIght & Right to Left? Pinmemberkresso13-Jan-07 1:26 
AnswerRe: Header Control from Left to RIght & Right to Left? PinmemberMikeh3221720-Jan-07 5:29 
Generalgood job Pinmemberahmed4513-Jan-07 1:15 
GeneralRe: good job PinmemberMike Hankey9-Feb-07 4:19 
GeneralNice! PinmemberUnRusoDeCaracas12-Jan-07 17:10 
GeneralRe: Nice! PinmemberMike Hankey9-Feb-07 4:19 
GeneralCongratulations for your job Pinmemberkresso12-Jan-07 16:24 
GeneralRe: Congratulations for your job PinmemberMike Hankey9-Feb-07 4:20 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 20 Jan 2007
Article Copyright 2007 by Mike Hankey
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid