Using styles within a data template - wpf

Question

I have a class called item, and it contains just two properties. I will display them on the screen as buttons with a style. This question relates to how I can style the button based on the IsSelected value, when the element I want to affect is in the style not the data template. I have already tried with a Trigger but been unable to get it to work.
The class is below.
public class Item : ObservableObject
{
private string _title;
private bool _isSelected;
public string Title
{
get { return _title; }
set
{
_title = value;
RaisePropertyChanged("Title");
}
}
public bool IsSelected
{
get { return _isSelected; }
set
{
_isSelected = value;
RaisePropertyChanged("IsSelected");
}
}
}
I use a data template to display these items in a ItemsControls.
<ItemsControl ItemsSource="{Binding Path=Items}" ItemTemplate="{StaticResource ResourceKey=ItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Using the following style and data template.
<Style x:Key="ItemButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="ButtonBorder" BorderThickness="2,2,2,0" BorderBrush="#AAAAAA" CornerRadius="6,6,0,0" Margin="2,20,0,0" Background="Black">
<ContentPresenter
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="ItemTemplate">
<Button Height="60" Style="{StaticResource ItemButton}" Name="Button">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Title}"
HorizontalAlignment="Left" Margin="5,5,5,3" FontSize="25" Foreground="#6B6B6B" FontFamily="Arial" />
<Button Style="{StaticResource NoChromeButton}" Margin="0,0,5,0">
<Button.Content>
<Image Height="20" Source="/WpfApplication1;component/Image/dialogCloseButton.png"></Image>
</Button.Content>
<Button.ToolTip>
Close
</Button.ToolTip>
</Button>
</StackPanel>
</Button>
</DataTemplate>
I need to change the Background of "ButtonBorder" from Black to White when IsSelected is True, on the object Item.
I have added in a Trigger in the Data Template
This does not work, I guess its because the style overrides the DataTemplate, thus the background stays white. Yet when i try to do a trigger in the style, I can't access the property IsSelected?
DataTemplate Trigger
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter TargetName="Button" Property="Background" Value="White"/>
</DataTrigger>
</DataTemplate.Triggers>
Style trigger
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="White"/>
</DataTrigger>
</Style.Triggers>
Am i missing something?

Answer 1

Make your ButtonBorder.Background be {TemplateBinding Background}, which means it will use whatever background color is assigned to the templated Button, then you can change your Button's background based on a Trigger
<Style x:Key="ItemButton" TargetType="Button">
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="ButtonBorder" Background="{TemplateBinding Background}" ... >
<ContentPresenter ... "/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SelectableItemButton" TargetType="Button" BasedOn="{StaticResource ItemButton}">
<Setter Property="Background" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="ItemTemplate">
<Button Height="60" Style="{StaticResource SelectableItemButton}">
...
</Button>
</DataTemplate>
I'm also making a SelectableItemButton Style which inherits from ItemButton, and just implements the trigger

Answer 2

Shouldn't the target be "ButtonBorder" instead of "Button" in :
<Setter TargetName="Button"....
Also, to access the property IsSelected you need to set the TargetType in the style ....