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
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,
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);
dropDownEditor.TypeOfEar = (EarTypes) value;
editorService.DropDownControl(dropDownEditor);
return dropDownEditor.TypeOfEar;
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
