WPF add image to cell in column

Question

Using C#.NET4.5, Visual Studio 2012, WPF.

Well here's how far I got with a lot of help from great people and advice!

Set up a new column for images:

DataGridTemplateColumn p1 = new DataGridTemplateColumn();
p1.Header = "p1";
FrameworkElementFactory factory1 = new FrameworkElementFactory(typeof(System.Windows.Controls.Image));
Binding b1 = new Binding("picture");
b1.Mode = BindingMode.TwoWay;
factory1.SetValue(System.Windows.Controls.Image.SourceProperty, b1);
DataTemplate cellTemplate1 = new DataTemplate();
cellTemplate1.VisualTree = factory1;
p1.CellTemplate = cellTemplate1;
paretogrid.Columns.Add(p1);

Then I check each "row" and set up some Ifs to check values:

private void ShowArrows()
{
    var rows = GetDataGridRow(paretogrid); 

    foreach (DataGridRow r in rows)
    {
        DataRowView rv = (DataRowView)r.Item;
        var par3 = paretogrid.Columns[7].GetCellContent(paretogrid.Items[2]) as TextBlock;
        int pconv3 = Convert.ToInt32(par3.Text);
        var par2 =  paretogrid.Columns[8].GetCellContent(paretogrid.Items[2]) as TextBlock;
        int pconv2 = Convert.ToInt32(par2.Text);
        var par1 = paretogrid.Columns[9].GetCellContent(paretogrid.Items[2]) as TextBlock;
        int pconv1 = Convert.ToInt32(par1.Text);
        var parNew = paretogrid.Columns[10].GetCellContent(paretogrid.Items[2]) as TextBlock;
        int pconvNew = Convert.ToInt32(parNew.Text);

        if(pconv3 == pconv2)
        {
            paretogrid.Columns[12].
        }else 
            if(pconv3 > pconv2)
            {
                //uparrow
            }
            else 
                if (pconv3 < pconv2)
                {
                    //down
                }
    }
}

So as you can see I step through, throw it into a few nested conditions then where the comments are is where I want to add the images, something like :

paretogrid.columns[12].setvalue(can image go here? asks for dependency);

not sure how to add the image all I see is adding images to an entire column via the item source.

Where am I going wrong?

EDIT: 08/04/2013 Ok got two suggestions, so far no errors are happening which is always nice to me. unfortunatly no images are showing up.

Datagrid.Children.Add();

for some reason my datagrid does not have this .Children method in the intellisense, even when I force it it just redlines me. What am I missing?

Not big on XAML so heres the grid.

Grid Margin="10,13,6,-13" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}" HorizontalAlignment="Left" Width="1442">
                <DataGrid Name ="paretogrid"  HorizontalAlignment="Left" Height="500" Margin="16,63,0,0" VerticalAlignment="Top" Width="1126" RenderTransformOrigin="0.5,0.5" Background="{x:Null}" FontSize="14" SelectionChanged="paretogrid_SelectionChanged">

anyone? no image showing up, I presume because nothing is actually being added to the grid, if so how do I do that? Spammed Google for most the day looking for a solution but no luck — lemunk, Apr 08 '13 at 15:00

Olimpiu Datcu · Accepted Answer · 2013-04-09T07:41:56.070

2

I don't have exactly your environment (VS2012 and Windows 8), but in wpf you can access properties also with the SetValue() method. You could try to use something like this:

 Image img = new Image();
 img.SetValue(Grid.ColumnProperty, "2");
 img.SetValue(Grid.RowProperty, "1");

Hope it helps.

I have tested a small demo on my machine and it works well. Here is the xaml:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid x:Name="paretoGrid">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

and the code behind:

 var img = new Image {Width = 100, Height = 100};
 var bitmapImage= new BitmapImage (new Uri(@"pack://application:,,,/Images/old-go-down.png"));

 img.Source = bitmapImage;

 img.SetValue(Grid.RowProperty, 1);
 img.SetValue(Grid.ColumnProperty, 1);

 paretoGrid.Children.Add(img);

Image Build Action has to be set as Resource.

edited Apr 09 '13 at 07:41

answered Apr 05 '13 at 15:47

Olimpiu Datcu

156
10

could you look with Snoop on the object to see if it is there? Make sure that image Source is set, and look to the width/ height as well. As in Kyle's post, add the image to your grid (paretogrid in your case) paretogrid.Children.Add(img) – Olimpiu Datcu Apr 08 '13 at 10:24
paretogrid intelisence does not recognise .children for some reason. Image source is set like this : ImageSource imageSource = new BitmapImage(new Uri("C:\....)); upArrow.Source = imageSource; System.Windows.Controls.Image myUp = new System.Windows.Controls.Image(); – lemunk Apr 08 '13 at 11:04
yeh set it to rescource copied your example, problem is Visual studio is complaining about system.windows.controls.datagrid as it doesnt contain a definition, not sure how its possible but is there a using statment im missing – lemunk Apr 09 '13 at 08:02
posted my xaml, i have a grid that contains a datagrid – lemunk Apr 09 '13 at 08:09
hmmm ok so I put a name for my "grid" then used the grid for children which works, so ive missed a fundimental here, grid and datagrid. – lemunk Apr 09 '13 at 08:18
if you are using a Grid, it should work as I described you above. If you are using a DataGrid, which is by default meant to display text Data and not controls, you have to edit the CellTemplate of this Control as showed [here](http://stackoverflow.com/questions/15683314/wpf-add-datagrid-image-column-possible) – Olimpiu Datcu Apr 09 '13 at 08:46

WPF add image to cell in column

1 Answers1

Linked