CHANGE IMAGE OF A BUTTON IN A DATAGRID CELL WHEN IT IS CLICKED – WPF

Mark Devid

Total Post:102

Points:714
Posted by  Mark Devid
WPF
 2671  View(s)
Ratings:
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">

    <DataGridTemplateColumn.CellTemplate>

        <DataTemplate>

            <Button>

                <Button.Content>

                    <Image>

                        <Image.Source>

                            <MultiBinding Converter="{StaticResource ImageConverter}"

                                  ConverterParameter="Closed">

                                <Binding Path="IsClosed"/>

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

                                <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 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. Sumit Kesarwani

    Post:378

    Points:2694
    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:

     <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>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!