ToggleButton doesn't show any state

Question

I've got the most simple application ever: single window with one single toggle button:

<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" Height="350" Width="525">
    <Grid>
        <ToggleButton Content="This is my ToggleButton" />
    </Grid>
</Window>

When I now click on the toggle button, really nothing happens. When I setup event handler for Checked and Unchecked event, and then click the button, first the Checked and then Unchecked get fired. So the button seems to work correctly ...

I am compiling to .NET 4.5 and I am using Windows 8 RTM.

Is this behaviour related to the Windows 8 style of displaying buttons (no "3D" border)? Can anyone confirm?

UPDATE 1 I made up an image to show what I meant:

As you see, in Windows 8 "nothing happens" when clicking on the toggle button, it simply does not get "toggled". This seems to be a bug, related to the windows 8 style of displaying buttons ...

UPDATE: May 30 2013: A hotfix is avalible: http://support.microsoft.com/kb/2805222
See Issue #5 under WPF
Unfortunately it doesn't fix the problem for me :(

Answer 1

This is a confirmed defect in WPF. The workaround is to style the control accordingly, although a fix may be considered by the product group. To request a fix, please contact Microsoft Support.

Answer 2

For everybody who want some code to start off with, you can take the code I used to style my controls:

<Application.Resources>

        <!-- Toogle button fix (includes custom button + toggle button style) -->
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderThickness="1" BorderBrush="#FFA4A4A4">
                            <Grid>
                                <Rectangle x:Name="Rectangle_Background" Fill="#FFEDEDED" />
                                <ContentPresenter x:Name="ContentPresenter_Content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Rectangle_Background" Property="Fill" Value="#f7f7f7"/>
                                <Setter TargetName="ContentPresenter_Content" Property="Opacity" Value="0.5"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Rectangle_Background" Property="Fill" Value="#e0e0e0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border BorderThickness="1" BorderBrush="#FFA4A4A4">
                            <Grid>
                                <Rectangle x:Name="Rectangle_Background" Fill="#FFEDEDED" />
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Rectangle_Background" Property="Fill" Value="#ADADAD"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Rectangle_Background" Property="Fill" Value="#e0e0e0" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Fill" TargetName="Rectangle_Background" Value="#bee6fd"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>