WPF Windows 8 Compatibility Issue

Question

Given a button (or a combobox, or any control for that matter):

<Button x:Name="button" Command="{Binding DoStuff}" Margin="10,0,5,5" Content="Do Stuff!" Style="{StaticResource buttonDefaults}"/>

With the style:

<Style x:Key="buttonDefaults" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Style.Resources>
            <ResourceDictionary Source="/PresentationFramework.Aero;component/themes/Aero.NormalColor.xaml"/>
        </Style.Resources>
        <Setter Property="Background">
            <Setter.Value>
                <RadialGradientBrush>
                    <GradientStop Color="#F4083268" Offset="1"/>
                    <GradientStop Color="#FE5C9247"/>
                </RadialGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Focusable" Value="False"/>
    </Style>

It looks very different in Windows 8 than it does in Windows 7.

Now, the strange part is that in the DESIGNER, everything looks perfect on a Windows 8 machine as if it were Windows 7... But at runtime, the style isn't "applied."

On the other hand, it looks perfect on Windows 7 in both the designer and runtime. Is there a way to fix this?

Additional Details:

With the RD in the Style:

    <Style x:Key="buttonDefaults" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Style.Resources>
            <ResourceDictionary Source="/PresentationFramework.Aero,Version=4.0.0.0,Culture=Neutral,PublicKeyToken=31bf3856ad364e35,processorArchitecture=MSIL;component/themes/Aero.NormalColor.xaml"/>
        </Style.Resources>
        <Setter Property="Background">
            <Setter.Value>
                <RadialGradientBrush>
                    <GradientStop Color="#F4083268" Offset="1"/>
                    <GradientStop Color="#FE5C9247"/>
                </RadialGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Focusable" Value="False"/>
    </Style>

The result looks like:

With the RD in the Application scope:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/PresentationFramework.Aero,Version=4.0.0.0,Culture=Neutral,PublicKeyToken=31bf3856ad364e35,processorArchitecture=MSIL;component/themes/Aero.NormalColor.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <Style x:Key="buttonDefaults" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush>
                        <GradientStop Color="#F4083268" Offset="1"/>
                        <GradientStop Color="#FE5C9247"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Focusable" Value="False"/>
        </Style>
    </ResourceDictionary>
</Application.Resources>

The result looks like:

I'd like to apply the visuals of the second one to just a single style, not the entire application.

Answer 1

I think your problem stems from the fact that you're using partial assembly name. According to MSDN, GAC isn't searched for assemblies when you're using partial assembly names.

Edit after your additional detail update:

After looking at your screenshots, I finally understand your new problem. The problem has to do with scoping of resources. Your button inherits the button style before you add the aero override when you're defining style inside the control. You can easily adjust that by adding a Panel on top of the control you want and use it as a scope container for resource. Updated code as follows:

<Window x:Class="AeroTestSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="191" Width="246">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Do Stuff!" Padding="10" Margin="10"/>
        <StackPanel>
            <StackPanel.Resources>
                <ResourceDictionary Source="/PresentationFramework.Aero,Version=4.0.0.0,Culture=Neutral,PublicKeyToken=31bf3856ad364e35,processorArchitecture=MSIL;component/themes/Aero.NormalColor.xaml"/>
            </StackPanel.Resources>
            <Button Content="Do Stuff!" Padding="10" Margin="10">
                <Button.Resources>
                    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <RadialGradientBrush>
                                    <GradientStop Color="#F4083268" Offset="1"/>
                                    <GradientStop Color="#FE5C9247"/>
                                </RadialGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="FontFamily" Value="Arial"/>
                        <Setter Property="FontSize" Value="48"/>
                        <Setter Property="Focusable" Value="False"/>
                    </Style>
                </Button.Resources>
            </Button>
        </StackPanel>
    </StackPanel>
</Window>

Screenshot of this in effect:

Answer 2

The designer has a bug, that's why it shows the wrong style in Windows 8. I believe the problem stems from the fact that the Windows 7 and 8 system themes have the same name (aero.normalcolor), and WPF has to manually check for Windows 8 and use the theme name aero2.normalcolor instead.

As for your problem, I would not load the entire (huge) theme resource dictionary just to style a single button. Instead, copy the button style and template from aero.normalcolor.xaml (located under the Blend installation directory, Blend\SystemThemes\Wpf\v4.0\aero.normalcolor.xaml) into your resource dictionary. WPF doesn't actually use any resources from the OS, so that code would work under any OS version.