tags:

views:

521

answers:

2

I've created a style for buttons in my WPF application.

However, on Vista, when a button is focused, it pulsates with a light blue that doesn't look good in the design.

How can I override this automatic pulsating?

<Style x:Key="NavigationButtonStyle" TargetType="Button">
    <Setter Property="Width" Value="400"/>
    <Setter Property="Height" Value="100"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="FontSize" Value="56"/>
    <Setter Property="Foreground" Value="#aaa"/>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="#ddd" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Foreground" Value="#aaa" />
        </Trigger>
    </Style.Triggers>
</Style>

Tried "IsFocused":

Adding this doesn't have any effect on Vista, the button still looks the same and is pulsating in Vista when focused:

<Trigger Property="IsFocused" Value="True">
    <Setter Property="Background" Value="Red" />
    <Setter Property="Foreground" Value="Blue" />
</Trigger>

Tried "ControlTemplate" solution:

Still no effect:

<Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle SnapsToDevicePixels="true" Margin="2" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="NavigationButtonStyle" TargetType="Button">
    <Setter Property="Width" Value="400"/>
    <Setter Property="Height" Value="100"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="FontSize" Value="56"/>
    <Setter Property="Foreground" Value="#aaa"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="#ddd" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Foreground" Value="#aaa" />
        </Trigger>
    </Style.Triggers>
</Style>
A: 

What you are looking for is the IsFocused trigger property. Sorry that I do not have a working example for you right here.


UPDATE:

I found this small piece of code that I once used. I am not sure if is works and I can not test it (I am on an XP box):

<Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle SnapsToDevicePixels="true" Margin="2" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
</Style>
Jakob Christensen
I tried the "IsFocused" code above but it didn't have any effect.
Edward Tanguay
Updated my answer with an example using FocusVisualStyle instead of IsFocused.
Jakob Christensen
tried that as well (posted code above) but the button just continues to pulsate light blue to gray
Edward Tanguay
A: 

This effect is being set in response IsKeyboardFocused, not just standard focus.

In Blend if you edit the control template for a standard button, you'll see that on the IsKeyboardFocused=true trigger is responsible for this effect.

<Style x:Key="Button_NonGlow" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
  <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}">
     <Microsoft_Windows_Themes:ButtonChrome SnapsToDevicePixels="true" x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
      <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
     </Microsoft_Windows_Themes:ButtonChrome>
     <ControlTemplate.Triggers>
      <Trigger Property="IsKeyboardFocused" Value="true">
       <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
      </Trigger>
      <Trigger Property="ToggleButton.IsChecked" Value="true">
       <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
      </Trigger>
      <Trigger Property="IsEnabled" Value="false">
       <Setter Property="Foreground" Value="#ADADAD"/>
      </Trigger>
     </ControlTemplate.Triggers>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
rmoore