In Windows 8 RTM with VS2012 RTM I noticed my WPF app was giving me deformed radio buttons so I decided to create a sample to see if I was doing something wrong.
Here's the entire XAML App :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" SizeToContent="WidthAndHeight">
<Grid>
<StackPanel Margin="20">
<RadioButton Content="Option 1" GroupName="1"/>
<RadioButton Content="Option 2" GroupName="2"/>
<RadioButton Content="Option 3" GroupName="3"/>
</StackPanel>
</Grid>
</Window>
Here I have the DPI settings set to 100%, which is actually NOT the default in Windows 8 (well at least for my 1920x1200 screen it isn't). You'll see the radio buttons are perfect.
This is the same exact application with DPI settings at 125% which is the default DPI for my screen resolution.
Here's 150%
You can see the inner circles aren't centered within the outer circle and it looks TERRIBLE. System applications with radio buttons are fine - but my WPF 4.5 app is not. Once again this sample app is 100% RTM bits and from scratch under Win 8.
Is it just all broken or is there a way to fix this (apart from insisting people put 100% DPI scaling).
Was really hoping Win8 would have gone a long way for high res screens and scaling issues like this, but something simple is badly broken out of the box :-(
Edit: filed connect bug https://connect.microsoft.com/VisualStudio/feedback/details/758368/radio-button-rendering-is-incorrect-on-windows-8-with-125-dpi-scaling-set
Edit: 8/29/12:
The WPF team has recently reviewed this issue and will not be addressing this issue as at this time the team is focusing on the bugs impacting the highest number of WPF developers. If you believe that this was resolved in error, please reactivate this bug with any necessary supporting details.
You group radio buttons by drawing them inside a container such as a Panel control, a GroupBox control, or a form. All radio buttons that are added directly to a form become one group. To add separate groups, you must place them inside panels or group boxes.
By default, the control returns a Boolean numeric value to indicate its state (0 for deselected and 1 for selected). However, you can change the return value for a radio button control with the Value property.
Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
You group RadioButton controls by putting them inside the same parent container or by setting the GroupName property on each RadioButton to the same value.
Everything in WPF is styled. In the case of the default system styles they sometimes, in my own experience, have little issues like this. A simple fix, to confirm it is the style and not the OS itself is to restyle the control yourself and see if that fixes it.
You can find the original style by looking at this question. These will help you rebuild and / or fix the issue
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With