1 Replies - 10051 Views - Last Post: 06 October 2011 - 08:42 AM

#1 complete  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 12-April 07

How can I put individual Graphics in Datagrid Cells?

Posted 06 October 2011 - 04:24 AM

How can I put individual Graphics in Datagrid Cells?

I want to put little arrows inside a DataGrid to mimic the kind of display shown in this Excel file:

Posted Image

But the XAML code defines individual columns instead of individual cells:
                    <data:DataGridTemplateColumn Header="Prev. Mo. Trend" IsReadOnly="True">
                                    <Image x:Name="img1" Width="11"  Height="12"  VerticalAlignment="Center" HorizontalAlignment="Left"
                                   Source="/MedAnalyzer;component/Assets/greenuparrow.png" Visibility="Visible"/>
                                    <TextBlock  VerticalAlignment="Center" HorizontalAlignment="Right"  x:Name="Prev_Mo_Trend" Text="{Binding Prev_Mo_Trend}">
I can add text into the Datagrid by data binding with an observable collection. But this is text data. What about replacing gaphics? Do I need something extra special?

This is the results of my efforts

Posted Image

I do not need to have the graphic and the text share the same sell. That part can be overlooked. How can I just replace the arrow with a different error within the cell?

Is This A Good Question/Topic? 0
  • +

Replies To: How can I put individual Graphics in Datagrid Cells?

#2 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1532
  • View blog
  • Posts: 5,969
  • Joined: 21-March 08

Re: How can I put individual Graphics in Datagrid Cells?

Posted 06 October 2011 - 08:42 AM

See if this helps out. This will allow you to put the image and the numbers in the same cell.

To complete your original problem(switching image), you will need to use a ValueConverter. Basically, a value converter takes an input value and outputs another value. You will use this to send the input value(assuming some number), then depending on that number, output the correct image.

Since I didn't have your code, I just took a guess at names. Look less at the names and more at the XAML and converter.


This XAML puts both the image and the text in the same cell.

Notice the binding for the Image. I am binding to the Prev_Mo_Trend value, but I am using the MyArrowConverter. This converter will use the numeric value of the property to determine which image to set the Source to.


I have no idea how you are determining which arrow to show, but I decided to choose greater/less than 0 to be the determining factor. You would replace this code with your own business logic to determine the image.

Here is the other code...



Attached Image

Here is the solution if you want to take a look at it.

Attached File  SilverlightApplication16.zip (140.09K)
Number of downloads: 138
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1