add image on wpf datagrid with c#

Question

Hi,

i want to add a new column in a wpf data grid wich contain an image

HOW can i add a new image column using code behind?

 if (v.validate(x.Text))
                    {insert image 1
                        DataGridTextColumn newclm = new DataGridTextColumn();
                        newclm.Header = "validate";
                       dgrecep.Columns.Add(newclm); 
                    }
          else
                 {
                    insert image 2
                       }

Answer 1

Hi Dev,

Check the below for adding Image in dataGrid using WPF

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/dc214b9a-7869-44fe-bdef-0f438bd7402f

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/55f2e7d7-5a47-45d1-b804-4eff42f5ecc5/

---

PS.Shakeer Hussain

Answer 2

Hi,  

i tried this code but it doesn't waht i want realy, this is the problem

i want that the image1  and 2 showen in the same content when iclick on boutton

 <Grid>
                  
                    
                    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding}" Height="328" HorizontalAlignment="Left" Margin="24,84,0,0" Name="dgrecep" VerticalAlignment="Top" Width="603" >
                        <DataGrid.Columns>
                           
                            <DataGridTemplateColumn Header="Content" Width="200">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Name="txt" Text="{Binding Content}"/>
                                            <Image Name="image" Source="valide.jpg" Visibility="Collapsed" Width="50" Height="50"  />
                                        </StackPanel>
                                        <DataTemplate.Triggers>
                                            <DataTrigger Binding="{Binding Path=Content}" Value="1">
                                                <Setter TargetName="image" Property="Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </DataTemplate.Triggers>
                                    </DataTemplate>
                                    
                                </DataGridTemplateColumn.CellTemplate>   
                            </DataGridTemplateColumn>


                            
                            <DataGridTemplateColumn Header="Content" Width="200" >
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Name="txt" Text="{Binding Content}"/>
                                            <Image Name="image" Source="non_valide.png" Visibility="Collapsed" Width="50" Height="50" />
                                        </StackPanel>
                                        <DataTemplate.Triggers>
                                            <DataTrigger Binding="{Binding Path=Content}" Value="0">
                                                <Setter TargetName="image" Property="Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </DataTemplate.Triggers>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>

 

Answer 3

Hi DevDOTNETns,

"i want that the image1  and 2 showen in the same content when iclick on boutton"

Sorry for that I'm not sure I understand what your mean. Just guess, do you want one column content when cell content value is 1 to show valide image, and when content is 0, to show invalide image. Just one content column, right?

You just need to add two datatrigger into datatemplate trigger like:

<DataGridTemplateColumn Header="Content" Width="200">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Name="txt" Text="{Binding Content}"/>
                                            <Image Name="image" Source="valide.jpg" Visibility="Collapsed" Width="50" Height="50"  />
                                        </StackPanel>
                                        <DataTemplate.Triggers>
                                            <DataTrigger Binding="{Binding Path=Content}" Value="1">
                                                <Setter TargetName="image" Property="Visibility" Value="Visible"/>
                                            </DataTrigger>

  <DataTrigger Binding="{Binding Path=Content}" Value="0">
                                                <Setter TargetName="image" Property="Visibility" Value="Visible"/>
                                            </DataTrigger>

                                        </DataTemplate.Triggers>
                                    </DataTemplate>
                                    
                                </DataGridTemplateColumn.CellTemplate>   
                            </DataGridTemplateColumn>

If I misunderstood you, please feel free to let me know.

Have a nice day.

---

Annabella Luo[MSFT]
MSDN Community Support | Feedback to us

Answer 4

thank you for your help :), i already tried that and it works,show valide,invalide image in the same content,

 my problem still in how to show images when i click on boutton,

i mean  how can i bind the datagridder with code behind

Answer 5

Hi DevDOTNETns,

You can create a attach property to bind with all image's Visibility property, to control the image.

Please check out the sample:https://skydrive.live.com/?cid=0b578b4d6ded9b93&sc=documents&id=B578B4D6DED9B93%21107

Hope it helps.

Have a nice day.

---

Annabella Luo[MSFT]
MSDN Community Support | Feedback to us