Toolbar item image change when pressed

I have a toolbar that binds it's ItemsSource to my VM, it's a list of ToolBarItem

public class ToolbarItem : ObservableObject
{
    public string ToolTip { get; set; }
    public ICommand Command { get; set; }
    public BitmapImage Icon { get; set; }
    private bool _isPressed;

    public bool IsPressed
    {
        get { return _isPressed; }
        set { _isPressed = value; RaisePropertyChanged("IsPressed"); }
    }


    public ToolbarItem(string tooltip, ICommand command, BitmapImage icon)
    {
        this.Icon = icon;
        this.Command = command;
        this.ToolTip = tooltip;            
    }
}

}

this is my Toolbar item template:

<DataTemplate x:Key="toolBarItemTemplate">
    <Button x:Name="toolBarButton"
            ToolTip="{Binding Path=ToolTip}"                
            Command="{Binding Path=Command}"
            Cursor="Hand"
            Style="{StaticResource toolBarButtonItemStyle}">
        <ContentControl Content="{Binding}" ContentTemplate="{StaticResource toolBarButtonItemTemplate}" />
    </Button>
</DataTemplate>

<DataTemplate x:K开发者_Go百科ey="toolBarButtonItemTemplate">
    <Image Width="16"
           Height="16"                 
           Source="{Binding Path=Icon}"
           Style="{StaticResource toolBarButtonImageStyle}" />
</DataTemplate>

What I want to do is, when the user clicks on specific toolbar button to change that button behavior, for example, have a border around it.

Assuming you don't want to use it as a ToggleButton, try something like this:

<DataTemplate x:Key="toolBarItemTemplate"> 
    <Button x:Name="toolBarButton" 
            ToolTip="{Binding Path=ToolTip}"                 
            Command="{Binding Path=Command}" 
            Cursor="Hand" 
            Style="{StaticResource toolBarButtonItemStyle}">
        <!-- added code starts-->
        <Button.Style> 
          <Style TargetType="{x:Type Button}"> 
          <Style.Triggers> 
            <Trigger Property="IsPressed" Value="True">
              <Setter Property="BorderBrush" Value="#FF0000"/>
              <Setter Property="Foreground" Value="#00FF00"/>
            </Trigger>       
          </Style.Triggers> 
          </Style> 
        </Button.Style>
        <!-- added code ends-->
        <ContentControl Content="{Binding}"
            ContentTemplate="{StaticResource toolBarButtonItemTemplate}" />
    </Button> 
</DataTemplate> 

<DataTemplate x:Key="toolBarButtonItemTemplate"> 
    <Image Width="16" 
           Height="16"                  
           Source="{Binding Path=Icon}" 
           Style="{StaticResource toolBarButtonImageStyle}" /> 
</DataTemplate> 

the way to do it, is using ItemTemplateSelector and based on the item's type, use a different DataTemplate.

this is done in code