Advertise with us

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

Posted by  Mark Devid
 3390  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!!

  1. Re: Change image of a button in a datagrid cell when it is clicked – wpf

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

      Modified On Mar-31-2018 01:34:41 AM