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

Total Post:101

Points:707
Posted on    September-23-2013 5:19 AM

 WPF
Ratings:


 1 Reply(s)
 2054  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">

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



Sumit Kesarwani

Total Post:378

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

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


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

Follow MindStick