Click here to Skip to main content
15,667,847 members
Articles / Programming Languages / C#
Posted 29 Apr 2006


81 bookmarked

XP Logon Control

Rate me:
Please Sign up or sign in to vote.
4.48/5 (12 votes)
3 Sep 2006GPL35 min read
An XPLogonControl that mimics the Windows XP Logon Interface
Sample screenshot


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: XPLogonControl and 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 first.


The XPLogonControl is the basis for the entire control and gives the control the XP logon appearance. The XPLogonControl is comprised of three rectangles: centRect, headRect, and 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:

  1. 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 true a TextureBrush is used to paint the background.
  2. 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 LinearGradientBrush with ColorBlending.
  3. Header is drawn using a LinearGradientBrushHeader line is also drawn using a LinearGrad<code>ientBrush and ColorBlend routine.
  4. Since no other paint routines will be close to the header, the headerText will be painted on the header.
  5. Footer is drawn using a LinearGradientBrushFooter line is also drawn using a LinearGradientBrush and ColorBlend routine.
  6. All other adornments are added depending on whether the ControlImage or ControlText properties contain any data.


The XPLogonAccount will be the key menu system for this control, and whenever you add a LogonAccount in the XPLogonControl, an 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_Name, Account_Image, 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[][]
            {new float[]{1,0,0,0,0}, 
            new float[]{0,1,0,0,0}, 
            new float[]{0,0,1,0,0}, 
            new float[]{0,0,0,(float)currTrans/255,0}, 
            new float[]{0,0,0,0,1}}); 

e.Graphics.DrawImage(b,new Rectangle(0,0,b.Width,b.Height) , 
            0, 0, b.Width, b.Height, 
            GraphicsUnit.Pixel,ia); b.Dispose();

Account Management

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:

  1. Paint routines are called
  2. All controls on the XPLogonControl are cleared
  3. ScrollableAccountPanels are added depending on the LogonStyle of the control.  ScrollableAccountPanels are 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.
  4. XPLogonAccounts are added to the ScrollableAccountPanels.

These steps will repeat whenever there is a change in the accounts collection.

Other Notes

A few features have been added just for fun:

  • A 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: XPBlue, XPGreen, XPSilver, Darkness, Desert, and 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
    • Password masking added
  • April 27, 2006
    • Initial version


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Written By
Software Developer University of Michigan-Flint
United States United States
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.

Comments and Discussions

GeneralHighlighting the User Name and Password field when focused Pin
ajalilqarshi16-Mar-10 13:49
ajalilqarshi16-Mar-10 13:49 
Generalaccounts Pin
mojimoj2-Oct-09 19:56
mojimoj2-Oct-09 19:56 
Questionhow to use this control? Pin
Member 407499317-May-08 12:24
Member 407499317-May-08 12:24 
AnswerRe: how to use this control? Pin
Thomas Stockwell17-May-08 16:21
professionalThomas Stockwell17-May-08 16:21 
GeneralRe: how to use this control? Pin
shansanju21-Oct-08 1:27
shansanju21-Oct-08 1:27 
GeneralRe: how to use this control? Pin
Thomas Stockwell21-Oct-08 2:00
professionalThomas Stockwell21-Oct-08 2:00 
Generaldrawstring graphics dc when not yet logged in. Pin
RRRRRyan8-Jun-07 5:32
RRRRRyan8-Jun-07 5:32 
GeneralRe: drawstring graphics dc when not yet logged in. Pin
Thomas Stockwell8-Jun-07 8:02
professionalThomas Stockwell8-Jun-07 8:02 
GeneralNeed help Pin
Driftware23-Nov-06 3:14
Driftware23-Nov-06 3:14 
GeneralRe: Need help Pin
Thomas Stockwell23-Nov-06 14:43
professionalThomas Stockwell23-Nov-06 14:43 
GeneralRe: Need help Pin
Driftware24-Nov-06 7:18
Driftware24-Nov-06 7:18 
GeneralPassword Pin
Niiiissssshhhhhuuuuu4-Sep-06 18:16
Niiiissssshhhhhuuuuu4-Sep-06 18:16 
Generalpassword char Pin
Nacino1-Sep-06 12:13
Nacino1-Sep-06 12:13 
GeneralRe: password char Pin
Thomas Stockwell2-Sep-06 4:00
professionalThomas Stockwell2-Sep-06 4:00 
GeneralRe: password char Pin
Thomas Stockwell3-Sep-06 16:19
professionalThomas Stockwell3-Sep-06 16:19 
QuestionGreat Control Pin
Jackinabox801-Sep-06 9:15
Jackinabox801-Sep-06 9:15 
AnswerRe: Great Control Pin
Thomas Stockwell2-Sep-06 4:00
professionalThomas Stockwell2-Sep-06 4:00 
AnswerRe: Great Control Pin
Thomas Stockwell3-Sep-06 16:19
professionalThomas Stockwell3-Sep-06 16:19 

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.