Friday, October 7, 2011

Wpf and the invisible checkbox (and radio button)

Just ran into another strange wpf bug. This one involves checkboxes and radiobuttons. I was working on a login screen that has a couple of checkboxes for remembering the username and password. The code looked like this…

<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
     <
CheckBox Content="Username" Foreground="White"/>
     <CheckBox Content="Password" Foreground="White"/>
</StackPanel>

These checboxes were on a dark colored panel, so the white text showed up nicely. Running the app on my Windows 7 box worked fine, but when I ran the app on a Windows XP box, you could not see the check mark inside the box when the user clicked on it. The control still worked, but the check was just invisible. Actually, it wasn’t invisible, it was just a white checkmark on a white box (aka… invisible). This is a wpf/windows xp/checkbox bug. In Windows XP, when the foreground color is changed, the checkmark picks up that color change… why? you ask?… I don’t know. But, here is a workaround for this situation. Simply put labels with the white foreground as the content for your checkboxes. Now the foreground color of the checkbox is still the default (black) color and the checkmark will be visible for those running the app in Windows XP. Here is the modified code.

<StackPanel HorizontalAlignment="Left"  Orientation="Horizontal">
<
CheckBox>
<
Label Content="Username" Foreground="White"/>
</
CheckBox>
<CheckBox>
<Label Content="Password" Foreground="White"/>
</CheckBox>
</StackPanel>



I have also seen this issue with radiobuttons. Use the same workaround for that and you should be good to go.



I hope this helps. If it does, feel free to leave a comment. Thanks!