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 :(

Fracture

What exactly do you mean by "nothing happens"? Does the button not appear pressed when you click on it? If that's the case then it could be something related to windows 8 like you said. – Mowry

yes...what do you mean by nothing happens? Doesn't the button goes down? – Natika

maybe you should define a size to the toggle button – Natika

I faced with the same problem. Very annoying... I voted on the Microsoft Connect for your post – Cerussite

Any fix for this exit today? I have the same problem (not only ToggleButton) but normal buttons look bad in my WPF application on Windows 8. – Enloe

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.

Molality

already did that some time ago since no one wanted to answere my question – Fracture

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>

Fracture