CODEWITHSUNDEEP
wpfxamldatagrid
agp70
agp70

Reputation: 13

WPF - How to change Image in DataGrid column upon selection of row (in XAML)?

Our project has a DataGrid that displays an image along with text in one of the columns. When a row is selected, since it's highlighted, the image is not visible correctly. Hence we want to change the image only for the selected row.
I know how to change the property such as background of the dataGridCell using <Style.Triggers>; but cannot figure out how to change Image that is embedded inside the <DataGridTemplateColumn.CellTemplate>. Can you please help me with this?

            <DataGrid Name="dgCPAGrid" Grid.Row="2" Grid.Column="0" ItemsSource="{Binding CPAListDisplay, Mode=OneWay}" Margin="0,5,0,5" AutoGenerateColumns="False" 
                IsReadOnly="True" SelectionMode="Single"
                SelectedItem="{Binding SelectedCPA, Mode=TwoWay}"
                IsSynchronizedWithCurrentItem="False" AlternatingRowBackground="White" 
                HorizontalGridLinesBrush="Gray" VerticalGridLinesBrush="Gray" >
            <DataGrid.Resources>
                <Style x:Key="DGCellMGA" TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
                    <Setter Property="ToolTipService.IsEnabled" Value="False" />
                    <Setter Property="Background" Value="#f8f8d2" />
                    <Setter Property="TextBlock.TextAlignment" Value="Right"/>
                    <Style.Triggers>
                        <Trigger Property="DataGridCell.IsSelected" Value="True">
                            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="{b:CaptionBinding gridHeaderCPAName}" Width="Auto" MinWidth="125">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding CPAName}" />
                                <Image Source="/Images/TimelineIconGreenTransparent.gif" Margin="5,0,0,0" Height="15" Width="15" Visibility="{Binding StaticInd, Converter={StaticResource BoolVisConv}, ConverterParameter=inverse, Mode=OneWay}"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="{b:CaptionBinding gridHeaderCPAMGA}" Binding="{Binding MgaY1P}" MinWidth="50" Width="*" CellStyle="{StaticResource DGCellMGA}" />
            </DataGrid.Columns>
        </DataGrid>

Upvotes: 1

Views: 2436

Answers (1)

almulo
almulo

Reputation: 4978

Inside your cell's Template, add another Trigger (this time, a DataTrigger) that listens to the IsSelected property of the containing DataGridRow. Inside the DataTrigger, use the TargetName property of the Setter to tell it to modify the Source property of the Image (you have to give it an x:Name first):

<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding CPAName}" />
        <Image x:Name="image" Source="/Images/TimelineIconGreenTransparent.gif" Margin="5,0,0,0" Height="15" Width="15" Visibility="{Binding StaticInd, Converter={StaticResource BoolVisConv}, ConverterParameter=inverse, Mode=OneWay}"/>
    </StackPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}"
                     Value="True">
            <Setter TargetName="image"
                    Property="Source"
                    Value="/Images/Whateveryourotherimageisnamed.gif" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Upvotes: 1

Related Questions