Home > DeveloperSection > Forums > Change image of a button in a datagrid cell when it is clicked – wpf
Mark Devid
Mark Devid

Total Post:102

Posted on    September-23-2013 5:19 AM


 1 Reply(s)
 2602  View(s)
Rate this:

I have a WPF application which contains a Datagrid consisting of a column of buttons. The respective XAML code is as follows.

<DataGridTemplateColumn Header="Closed" Width="60">







                            <MultiBinding Converter="{StaticResource ImageConverter}"


                                <Binding Path="IsClosed"/>

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

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






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






The TickImage and CrossImage are image sources either of which is selected based on the value of IsClosed . Now in the ViewModel I need to write a code to toggle images(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!!

Sumit Kesarwani

Total Post:378

Posted on    September-23-2013 7:05 AM

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:





              <Style TargerType="Image">

                <Setter Property="Source" Value="{Binding Path="DataContext.TickImage" RelativeSource="{RelativeSource AncestorType={x:Type UserControl}}"/>


                      <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}}"/>








Don't want to miss updates? Please click the below button!

Follow MindStick