winforms app written in win7 looks different on win xp. why? - winforms

Question

I have written a simple app in winforms (.net 4.0) on win 7. Application looks how I want but when I tried it on windows xp everything looks different.
I have created a sample example to show how it looks on win 7 and xp.
What can I do to have the same look on both systems?
The problem is not only with the background and font color but with the controls too. Here I show how the numericupdown looks but with table layout I have problem too.
private void InitializeComponent()
{
this.numericUpDown1 = new System.Windows.Forms.NumericUpDown();
this.groupBox1 = new System.Windows.Forms.GroupBox();
((System.ComponentModel.ISupportInitialize)(this.numericUpDown1)).BeginInit();
this.SuspendLayout();
//
// numericUpDown1
//
this.numericUpDown1.DecimalPlaces = 2;
this.numericUpDown1.Increment = new decimal(new int[] {
1,
0,
0,
131072});
this.numericUpDown1.Location = new System.Drawing.Point(21, 26);
this.numericUpDown1.Maximum = new decimal(new int[] {
1,
0,
0,
0});
this.numericUpDown1.Name = "numericUpDown1";
this.numericUpDown1.Size = new System.Drawing.Size(54, 22);
this.numericUpDown1.TabIndex = 0;
//
// groupBox1
//
this.groupBox1.Location = new System.Drawing.Point(21, 82);
this.groupBox1.Name = "groupBox1";
this.groupBox1.Size = new System.Drawing.Size(226, 99);
this.groupBox1.TabIndex = 1;
this.groupBox1.TabStop = false;
this.groupBox1.Text = "groupBox1";
//
// Form1
//
this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.BackColor = System.Drawing.SystemColors.ActiveCaption;
this.ClientSize = new System.Drawing.Size(407, 331);
this.Controls.Add(this.groupBox1);
this.Controls.Add(this.numericUpDown1);
this.Name = "Form1";
this.Text = "Form1";
((System.ComponentModel.ISupportInitialize)(this.numericUpDown1)).EndInit();
this.ResumeLayout(false);
}
I have no modified the xp color themes.
I have the same result on two diffrent computers with win xp.

Answer 1

this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.BackColor = System.Drawing.SystemColors.ActiveCaption;
These are the statements that cause your trouble. I'll pick-off the easy one first, don't make the BackColor of the form the same as the caption color. If you want to pick a theme color then only choose the "Control" color. Albeit that you'll typically get the old battleship gray. Picking a neutral pastel color is your best bet but honoring the user's preference will never get you into trouble.
The AutoScaleDimensions property is auto-generated, based on the video adapter's DPI setting. Which is different the XP machine. You've got 120 dots-per-inch on your dev machine, 96 DPI (the default) on XP. On Win7, that's set by the widget that looks like a ruler, Control Panel + Display, "Set custom text size (DPI)".
The AutoScaleMode property is correctly set to Font. This ensures that all controls are automatically scaled to fit the font size. Which is larger on your Win7 machine because of the higher DPI setting. Accordingly, the form and its controls shrink on the XP machine. The problem with the NumericUpDown control is that its a bit buggy (in more than one way), it doesn't scale the up/down glyphs properly. They are proportionally too large, not leaving enough room for the text portion. Simply making it a bit wider solves the problem.
Auto-scaling is fairly ugly, it is rarely 100% perfect. The best thing to do is to switch your dev machine to 96 dpi. A very common setting, still today. Scaling up almost always works better than scaling down.

Answer 2

this.BackColor = System.Drawing.SystemColors.ActiveCaption;
There's your problem. The color is going to be dependent on the operating system. http://msdn.microsoft.com/en-us/library/system.drawing.systemcolors.activecaption.aspx
Consider setting an explicit color value (e.g. one of the System.Drawing.Color http://msdn.microsoft.com/en-us/library/system.drawing.color.aspx enumerations) instead. Won't look exactly the same, but it will be closer.