WPF Button's Style Being Inappropriately Overridden by Command Binding

Question

Simple question, really. I have the following button defined with some simple bindings & style triggers:

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Transparent" BorderThickness="0" Command="{Binding AcceptValueInputCommand}">
  <Button.Style>
    <Style TargetType="{x:Type Button}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding ValueInputEnabled}" Value="True">
          <Setter Property="Visibility" Value="Collapsed" />
        </DataTrigger>
        <DataTrigger Binding="{Binding IsPredefined}" Value="True">
          <Setter Property="Background" Value="Red" />
          <Setter Property="Foreground" Value="Black" />
        </DataTrigger>
      </Style.Triggers>
      <Setter Property="Visibility" Value="Visible"/>
      <Setter Property="Background" Value="White" />
      <Setter Property="Foreground" Value="Black" />
    </Style>
  </Button.Style>
  <Viewbox>
    <TextBlock Text="{Binding Value}" />
  </Viewbox>
</Button>

The problem I'm having is that my trigger on "IsPredefined" is not setting the background of the button to red. The foreground does get set properly to black (though I don't know why it didn't pick that up from the setters that are outside the style). I think the problem has something to do with the command binding on the button, because if I comment out the binding, all of the sudden the button is red! (Note, in all circumstances when "IsPredefined" evaluates to true, the command's CanExecute() should be evaluating to false). Any ideas?

(Edited to add in foreground of black to the IsPredefined trigger).

Try setting the OveridesDefaultStyle property of the button to true. — mgarant
@mgarant Just tried that, and then all of my button's content disappeared. FYI I just put a setter for the foreground in the same trigger as the background, and that gets set... — erikjw

Rohit Vats Rohit Vats · Accepted Answer · 2015-05-28T20:10:43

That's because when CanExecute returns false, button will be disabled and style trigger will be overriden by control template trigger defined in default control template of button which set background to gray.

In case you want to change it you have to override the default template of button and get rid of the trigger responsible for setting it to gray. This sample should work:

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Transparent" BorderThickness="0" Command="{Binding AcceptValueInputCommand}">
    <Button.Template>
        <ControlTemplate TargetType="ButtonBase">
            <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                    BorderBrush="{TemplateBinding Border.BorderBrush}"
                    Background="{TemplateBinding Panel.Background}"
                    Name="border"
                    SnapsToDevicePixels="True">
                <ContentPresenter RecognizesAccessKey="True"
                                    Content="{TemplateBinding ContentControl.Content}"
                                    ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                    ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                    Name="contentPresenter"
                                    Margin="{TemplateBinding Control.Padding}"
                                    HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                    SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                    Focusable="False" />
            </Border>
        </ControlTemplate>
    </Button.Template>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsEnable}" Value="True">
                    <Setter Property="Background" Value="Red" />
                    <Setter Property="Foreground" Value="Black" />
                </DataTrigger>
            </Style.Triggers>
            <Setter Property="Visibility" Value="Visible"/>
            <Setter Property="Background" Value="White" />
            <Setter Property="Foreground" Value="Black" />
        </Style>
    </Button.Style>
    <Viewbox>
        <TextBlock Text="{Binding Value}" />
    </Viewbox>
</Button>

WPF Button's Style Being Inappropriately Overridden by Command Binding

1 Answers