This is a control that I first saw in The XP Common Controls (XPCC). The XPCC control however lacked some of the features that I would have liked, one being a transparency effect. This control has the same basic principle as the XPCC version and that is to mimic the Microsoft Windows XP login screen. The controls will mimic that login affect of the login screen when a user clicks on the login button. Some features that I have included that were not included in the XPCC control include: menu account transparency, bitmap background support, welcome screen capabilities, and a choice of how the login control works. This article will go over various drawing routines and control principles used in the XP Logon Control.
There are two areas of the control that are painted:
XPLogonAccount. For the purpose of this article, we will start from the lowest to highest in what is painted. This will lead to the explanation of the
XPLogonControl is the basis for the entire control and gives the control the XP logon appearance. The
XPLogonControl is comprised of three rectangles:
footRect, each representing the header, footer, and center of the
XPLogonControl respectively. To calculate the regions for the rectangles, I have created a method called
ComputRects which will calculate the location and size of each rectangle based on properties set for the control. This method is called whenever the paint routine is called so that the painting is correct. To prevent any lines or rectangles interfering with each other, the order in which the parts of the control are painted are specific and are as follows:
centRect is painted using a
LinearGradientBrush with a
PathGradientBrush overlay. This gives that control the little circle in the upper left hand corner. Or if the
ShowBitmapBackground is set to
TextureBrush is used to paint the background.
Midline is painted behind the header and footer so that the line will not mess with either header or footer painting. The midline is drawn with a
Header is drawn using a
Header line is also drawn using a
- Since no other paint routines will be close to the header, the
headerText will be painted on the header.
Footer is drawn using a
Footer line is also drawn using a
- All other adornments are added depending on whether the
ControlText properties contain any data.
XPLogonAccount will be the key menu system for this control, and whenever you add a
LogonAccount in the
XPLogonAccount will be shown with the
LogonAccount data, hence the reason why a
LogonAccount is a parameter for the
XPLogonAccount initialization. The painting for this control adds an interesting twist to how you normally would paint to a
UserControl. For this control, I created a bitmap object the size of this control and all painting that I do is painted to this bitmap. The painting includes various values from the
LogonAccount class that were sent through the parameter. The items painted to the bitmap are:
Account_Subtext, logon button, and a white area where the completely transparent
RichTextBox is located (text is painted to this white area whenever the
RichTextBox's text property changes, this is to make so that the text that the
RichTextbox contains is partially transparent as well). Once everything is painted to the image, I then paint the image partially transparent to the control. I paint the image to the control using a
ColorMatrix and an
ImageAttribute which will allow the partial transparency. An example of how I do this is in the following code snippet.
currTrans is the current transparency setting for the control, and
b is the bitmap that everything is being drawn to. In the
ColorMatrix you can see the fourth float array is the array in which you can set the transparency for the
ColorMatrix, in this case full transparency is 255 and
currTrans is a value between 50 and 225, so to get the proper transparency for the control we divide the values.
ImageAttributes ia=new ImageAttributes();
ColorMatrix cm=new ColorMatrix(new float
e.Graphics.DrawImage(b,new Rectangle(0,0,b.Width,b.Height) ,
0, 0, b.Width, b.Height,
Accounts for the control are handled in a roundabout way. You add a
LogonAccount class to accounts collection of the
XPLogonControl. Then when the
LogonAccount is added, the control will invalidate. When the control is invalidated, a set of events is undertaken and are as follows:
- Paint routines are called
- All controls on the
XPLogonControl are cleared
ScrollableAccountPanels are added depending on the
LogonStyle of the control.
ScrollableControls that will collect and organize all controls that are put into it. All
XPLogonAccounts that are added to the
ScrollableAccountPanel will be organized and if all of them will not fit into the space provided, scrollbars will appear so that you can maneuver through the accounts.
XPLogonAccounts are added to the
These steps will repeat whenever there is a change in the accounts collection.
A few features have been added just for fun:
SetTheme property and method are located in the
XPLogonControl and whenever a value is changed with the method or property, then the colors of the
XPLogonControl will change to the specified theme. Themes included include:
TheCodeProject :) .
Whether you understood half of what this article has gone over :), I hope that this control will be useful to all programmers.
Final Note: All code is distributed under GPL.
- September 3, 2006
- April 27, 2006
I am currently a Database Administrator & Developer for the International Center at the University of Michigan. My expertise is GUI design with WinForms and WPF.