---
title: "Change image of a button in a datagrid cell when it is clicked – wpf"  
description: "Change image of a button in a datagrid cell when it is clicked – wpf"  
author: "Mark Devid"  
published: 2013-09-23  
updated: 2013-09-23  
canonical: https://www.mindstick.com/forum/1493/change-image-of-a-button-in-a-datagrid-cell-when-it-is-clicked-wpf  
category: "wpf"  
tags: ["wpf", "mindstick", "datagrid", "Change image of a button"]  
reading_time: 2 minutes  

---

# Change image of a button in a datagrid cell when it is clicked – wpf

I have a WPF [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) which contains a Datagrid consisting of a [column](https://www.mindstick.com/forum/33860/how-to-calculate-column-summary-in-sql-server) of buttons. The respective XAML code is as follows.

<DataGridTemplateColumn [Header](https://www.mindstick.com/articles/336036/explain-about-html-header-body-and-footer-tags)="Closed" Width="60">

<DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<[Button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net)>

<Button.Content>

<Image>

<Image.Source>

<MultiBinding Converter="{StaticResource ImageConverter}"

ConverterParameter="Closed">

<[Binding](https://www.mindstick.com/blog/146/dynamic-binding-in-c-sharp) Path="IsClosed"/>

<Binding Path="DataContext.TickImage" RelativeSource="{RelativeSource AncestorType={x:Type [UserControl](https://www.mindstick.com/forum/12739/set-the-enabled-property-of-a-usercontrol-from-codebehind)}}"/>

<Binding Path="DataContext.CrossImage" RelativeSource="{RelativeSource AncestorType={x:Type UserControl}}"/>

</MultiBinding>

</Image.Source>

</Image>

</Button.Content>

<Button.Command>

<Binding Path="DataContext.ClosedClicked" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type UserControl}}"/>

</Button.Command>

</Button>

</DataTemplate>

</DataGridTemplateColumn.CellTemplate>

</DataGridTemplateColumn>

The TickImage and CrossImage are image [sources](https://www.mindstick.com/articles/44491/how-to-evaluate-credibility-of-internet-sources) either of which is selected based on the value of IsClosed . Now in the [ViewModel](https://www.mindstick.com/forum/157215/what-is-viewmodel-in-mvc) I need to write a code to [toggle](https://www.mindstick.com/forum/12682/jquery-toggle-if-statement) [images](https://www.mindstick.com/interview/1067/what-is-the-php-predefined-variable-that-tells-the-what-type-of-images-that-php-support)(b/w TickImage and CrossImage ) when the button is clicked. In other words, I need a way to simultaneously bind the Button with an ICommand and a BitmapImage variable.

Please help!!

## Replies

### Reply by Sumit Kesarwani

Hi mark,

if your IsClosed is just a toggle to know if button was pressed or release then you can achieve this by just using triggers like below:

```
 <ToggleButton>    
<ToggleButton.Content>         <Image>           
<Image.Style>             
<Style TargerType="Image">               
<Setter Property="Source" Value="{Binding Path="DataContext.TickImage" RelativeSource="{RelativeSource
AncestorType={x:Type UserControl}}"/>                
<Style.Triggers>                     
<DataTrigger Binding="{Binding IsChecked, RelativeSource="{RelativeSource AncestorType={x:Type ToggleButton}}" Value="true">                        
<Setter Property="Source" Value="{Binding Path="DataContext.CrossImage" RelativeSource="{RelativeSource
AncestorType={x:Type UserControl}}"/>                      </DataTrigger>                 
</Style.Triggers>               
</Style>            
</Image.Style>           
</Image>         
</ToggleButton.Content>        
</ToggleButton>
```


---

Original Source: https://www.mindstick.com/forum/1493/change-image-of-a-button-in-a-datagrid-cell-when-it-is-clicked-wpf

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.