CODEWITHSUNDEEP
c#wpf
SohamC
SohamC

Reputation: 2437

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

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

Upvotes: 0

Views: 1534

Answers (1)

Nitin Purohit
Nitin Purohit

Reputation: 18580

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>

Upvotes: 4

Related Questions