WPF Button isPressed and isEnabled problem...

Question

Update: using Expression Blend 3

I'm trying to style the IsPressed & IsEnabled(false) property triggers for a class of buttons in a WPF application.

Here's a UserControl with a Button using the style...

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Kiosk.ButtonTest"
    x:Name="UserControl">

    <Grid x:Name="LayoutRoot">
        <Button HorizontalAlignment="Left" Style="{DynamicResource BlueButton}" VerticalAlignment="Top" Width="155" Content="Button" Height="52.9"/>
    </Grid>
</UserControl>

And here's the style fragment...

   <!-- Blue Button -->
   <Style x:Key="BlueButton" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{DynamicResource BlueGradient3}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource BlueGradient3}"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource BlueGradient1}"/>
        </Trigger>
    </Style.Triggers>
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Setter Property="Background" Value="{DynamicResource BlueGradient1}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource BlueGradient2}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="TextBox.TextAlignment" Value="Center"/>       
    <Setter Property="FontFamily" Value="Trebuchet MS"/>
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Effect" Value="{DynamicResource KioskStandardDropShadow}" />
</Style>
<LinearGradientBrush x:Key="BlueGradient1" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF3FA2FD" Offset="0"/>
    <GradientStop Color="#FF014782" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BlueGradient2" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF014782" Offset="0"/>
    <GradientStop Color="#FF3FA2FD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BlueGradient3" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF014782" Offset="1"/>
    <GradientStop Color="#FF0B2135" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DarkGradient1" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF2A2A2A" Offset="0"/>
    <GradientStop Color="#FF474747" Offset="0.478"/>
    <GradientStop Color="#FF323232" Offset="0.487"/>
    <GradientStop Color="Black" Offset="1"/>
    <GradientStop Color="#FF282828" Offset="0.681"/>
</LinearGradientBrush>
    <!-- Regular Drop Shadow --> 
    <DropShadowEffect x:Key="KioskStandardDropShadow" Opacity="0.6" BlurRadius="10" ShadowDepth="5" Direction="308"/>
<!-- fragment end -->

The Default and Mouse over changes work fine, but isEnabled false and isPressed true still show the Button default colors.

What am I doing wrong?

Answer 1

You need to replace the ControlTemplate to change the background color of your button.

Here is one I copied from MSDN that works well with your code.
You can merge your specific overrides to this style.

EDIT: To make the following style work, as is, you need to download the Styling with Control Templates Sample from Microsoft. If you include Button.xaml and Shared.xaml from the sample the following style should work because these two files contain all the StaticResoruces listed the XAML below. I am testing in Visual Studio 2008.

Here is how I chanaged the user conttrol:

<UserControl x:Class="ButtonPressed.Views.KioskButton"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  mc:Ignorable="d" 
  Height="300" Width="300">

  <UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary 
              Source="Button.xaml">
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </UserControl.Resources>

  <Grid>
    <Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="155" Content="Button" Height="52.9"/>
  </Grid>
</UserControl>

Here is part of the button style from Button.xaml:

<Style TargetType="Button">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
  <Setter Property="MinHeight" Value="23"/>
  <Setter Property="MinWidth" Value="75"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border 
          x:Name="Border"  
          CornerRadius="2" 
          BorderThickness="1"
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}">
          <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Answer 2

I fixed it after studying the code at http://mark-dot-net.blogspot.com/2007/07/creating-custom-wpf-button-template-in.html...

This is what I ended up with, which works great.

<!-- Blue Button -->
<Style x:Key="BlueButton" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="2"
                    Padding="4,2" 
                    BorderBrush="{DynamicResource BlueGradient2}"
                    CornerRadius="5" 
                    Background="{TemplateBinding Background}">
                    <Grid >
                    <ContentPresenter 
                                HorizontalAlignment="Center" 
                                VerticalAlignment="Center" 
                                Name="content"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{DynamicResource BlueGradient3}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
                        <Setter Property="BorderBrush" Value="{DynamicResource BlueGradient3}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
                        <Setter Property="BorderBrush" Value="{DynamicResource BlueGradient1}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Setter Property="Background" Value="{DynamicResource BlueGradient1}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource BlueGradient2}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="TextBox.TextAlignment" Value="Center"/>       
    <Setter Property="FontFamily" Value="Trebuchet MS"/>
    <Setter Property="FontSize" Value="15pt"/>
    <Setter Property="Effect" Value="{DynamicResource KioskStandardDropShadow}" />
</Style>