When button isEnabled is false change background - wpf

Question

I have an Itemscontrol with an Itemscontrol with buttons. This makes a matrix with 64 buttons.
Each button is bound to a ViewModel. The buttons have an eclipse that has a color.
A button can have two states.
1) The ViewModel gives a Color for the eclipse in the button and then the button IsEnabled=true.
2) the button IsEnabled=false and the button is not clickable anymore.
I would to have a transparant background for number 2 (when the button is not enabled). I worked something out and got this (see code on Pastebin), but now my borders are gone and everything is transparant.
How can I get a border for each button that is visible all the time, so it is not restricted to number 1 and 2.
Here is my code. I put it on Pastebin to save space.
Pastebin: http://pastebin.com/4GHCW0y8
Thanks

Answer 1

There are a couple issues with your code:
You are setting the Background, BorderBrush and BorderThickness properties directly on your button instead of using setters in the style. Setting them this way overrides anything the style does, so you cannot see the effects of the style triggers. This is the line I am referring to:
<Button Style="{StaticResource MyButton2}" Command="{Binding PlaceStoneCommand}" Background="Transparent" BorderBrush="Black" BorderThickness="0.75" Width="30" Height="30">
Remove the Background, BorderBrush and BorderThickness properties from that line and make setters in the style instead. Also, note that you are setting the default to transparent, so even with this change, you are just switching between Transparent and Transparent when IsEnabled changes.
Your style is overriding the control template for the button and not using the BorderBrush or BorderThickness properties in the template, so setting those properties on the button is not going to have any effect. You probably want to setup template bindings for those properties on the Border defined in the template. So, you would end up with a style looking something like this:
<Style TargetType="{x:Type Button}" x:Key="MyButton2">
<!-- Put default values here, or remove these if you want to use the existing button defaults -->
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
See if those changes give you the desired result.