in

CodePrairie .NET

South Dakota .NET User Group

I Hate Linux

WHS Dev Tip #12: QButton, ConsoleToolBar, and LineBox

Q: What are some of the other Home Server Controls that I can take advantage of in my add-in?

A: Three of the most commonly used controls are QButton, ConsoleToolBar and LineBox which individually behave virtually identical to existing controls, only draw themselves in a more Home Server-ish style.

QButton

Likely the most commonly used Home Server Control is the simple QButton control which gives you a Vista like button... unfortunately does not offer as many options as the standard Button control, things like:

  • Height is locked
  • Limited TextImageRelation functionality
  • Changing the following properties does nothing:
    • ForeColor
    • BackColor
    • BackgroundImage
    • TextAlignment

Despite these and other differences, the QButton is still a fantastic way to easily get a little more Home Server-ish styling in ones add-in.

ConsoleToolBar

One of the staples of most add-ins is the common use of the blue ConsoleToolBar control as seen the majority of Microsoft and third-party add-ins alike that try to stay with a WHS like theme:

ConsoleToolBarButton - Existing Example

To add one to a Home Server Add-in control, it's simply a matter of dragging it to the form and then using the designer to add new ConsoleToolBarButtons:

Add ConsoleToolBarButton

Note: you are free to add any other object that inherits from ToolStripItem, ConsoleToolBarButton is the only control that maintains the theme.

One problem with using the designer to do this is that when a user moves the mouse over the button, the font color does not change as it does with the Microsoft built tabs:

Default ConsoleToolBarButton

vs

Existing ConsoleToolBarButton

This is due to the default constructor (required for and used by the Forms Designer) of ConsoleToolBar does not add a pair of event handlers to change the font color, instead we must do so ourselves if we want the effect:

consoleToolBarButton1.MouseLeave += new System.EventHandler(consoleToolBarButtons_MouseLeave);
consoleToolBarButton1.MouseEnter += new System.EventHandler(consoleToolBarButtons_MouseEnter);
consoleToolBarButton2.MouseLeave += new System.EventHandler(consoleToolBarButtons_MouseLeave);
consoleToolBarButton2.MouseEnter += new System.EventHandler(consoleToolBarButtons_MouseEnter);
 
...
 
private void consoleToolBarButtons_MouseEnter(object sender, EventArgs e)
{
   ConsoleToolBarButton button = sender as ConsoleToolBarButton; 
 
   button.ForeColor = Color.Black;
} 
 
private void consoleToolBarButtons_MouseLeave(object sender, EventArgs e)
{
   ConsoleToolBarButton button = sender as ConsoleToolBarButton;
   button.ForeColor = Color.White;
} 

Once added we'll get this:


Colorized ConsoleToolBarButton


One possible issue that may arise using the above method is the text color not reverting if the button is disabled after the MouseEnter event, something that will keep a MouseLeave event from ever being fired. Instead it is good to be aware of this edge case and manually change the color when disabling the button.


Line


All throughout the Microsoft settings pages we see a style not often seen since Visual Basic 6 applications we all the rage: colored horizontal lines.


Right off the bat we can use the Line control by dragging it to the form, however it can be rather finicky as it is used best when only one pixel tall, however other heights are certainly possible:


Lines


Problems can quickly be had if one attempts to change the size in the designer (ie without using the Properties window) where the line can get very large and unwieldy.


Furthermore, when the line is only a pixel tall it is almost impossible to click on to select and then move around on the form.


There is however a better way to use this throwback to a simpler time...


LineBox


The most common use for the Line control is through the LineBox control which looks and acts just like a GroupBox (ie a container control), only doesn't have a visible border and instead has a stylish blue line along the top next to the header text:


LineBox1


Unfortunately LineBox is another one of those controls written without the designer in mind, something we see when we find we are unable to change the header text in the designer.


Instead LineBox exposes a member field named Header which is nothing but a custom label which controls what is actually displayed. To modify it in code it is as easy as:



lineBox1.Header.Text = "Some Text Goes Here";

One upshot of exposing the full control instead of just a Text property is that we can tweak it and make it even prettier... or uglier:


LineBox2


Of course we can avoid manually setting the text this way if we create our LineBox programmatically:



LineBox lineBox2 = new LineBox("Header Text");

A problem that you will likely encounter with LineBox is that you do not know at design time the actual height of the header which can easily lead to a child control being overlapped by the header:


LineBox Overlap


Examples


Once again I have created a couple of simple add-ins which demonstrate how QButton, ConsoleToolBar, and LineBox can be used:


HomeServerConsole with Controls Example 2


Downloads:



Conclusion


QButton, ConsoleToolBar and LineBox are three semi-new controls that provide a fantastic way for a Home Server add-in developer to get the same functionality they are used to with existing controls, but with the benefit of staying with the Windows Home Server style of design.


Next Time


Next week we'll discuss the MessageListBox control, the very control that is used to display messages in the Home Network Health dialog and messages and the available and installed Add-ins.


Tomorrow though as a special Christmas gift, a little tip that made me giggle like a little girl when I learned it.


Note: The information in this post is based on undocumented and at times deduced information on Windows Home Server and is not officially supported or endorsed by Microsoft and could very easily be wrong or subject to change in future, so please take it and everything else said on this blog with a grain of salt and use with caution.

Read the complete post at http://feeds.feedburner.com/~r/IHateLinux/~3/205766745/whs-dev-tip-12-qbutton-consoletoolbar.html

Published Dec 24 2007, 12:01 PM by I Hate Linux
Filed under:
Powered by Community Server (Commercial Edition), by Telligent Systems