title: WPF How to Bind an Image to a DataGrid column as a property of the ItemsSource?
body: <p>I'm creating a WPF app using the MVVM design pattern.</p>
  
  <p>I have a DataGrid with 4 columns and I want the last column to be a column of Images. The other 3 text columns are bound to the properties of an <code>AttributeNode</code> contained in the list <code>Attributes</code>, which is used as the <code>ItemsSource</code>.</p>
  
  <p><strong>XAML</strong></p>
  
  <pre><code>&lt;UserControl.DataContext&gt;
      &lt;viewModel:AttributeGridViewModel /&gt;
  &lt;/UserControl.DataContext&gt;     
  
  ...
  
  &lt;DataGrid Name="AttributeGrid" HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch" ItemsSource="{Binding Attributes}" 
                  AutoGenerateColumns="False"&gt;
      &lt;DataGrid.Columns&gt;
          &lt;DataGridTextColumn Header="Parameter" Binding="{Binding Parameter}"
                              MinWidth="30" Width="225" FontSize="15"/&gt;
          &lt;DataGridTextColumn Header="Value" Binding="{Binding Value}"
                              MinWidth="30" Width="*" FontSize="15"/&gt;
          &lt;DataGridTextColumn Header="IP Address" Binding="{Binding IpAddress}"
                              MinWidth="10" Width="120" FontSize="15"/&gt;
          &lt;DataGridTemplateColumn Header="Conflict" Width="50"&gt;
              &lt;DataGridTemplateColumn.CellTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;!-- area of confusion --&gt;
                      &lt;Image Source="{Binding ???}" /&gt;
                  &lt;/DataTemplate&gt;
              &lt;/DataGridTemplateColumn.CellTemplate&gt;
          &lt;/DataGridTemplateColumn&gt;
     &lt;/DataGrid.Columns&gt;
  &lt;/DataGrid&gt;
  </code></pre>
  
  <p><strong>AttributeGridViewModel &amp; AttributeNode</strong></p>
  
  <p>In my <code>AttributeGridViewModel</code> I set the Attributes using a line like this:  </p>
  
  <pre><code>Attributes = ConfigUtility.GetAttributeNodes(value);
  </code></pre>
  
  <p>Below is part of the <code>AttributeNode</code> class :</p>
  
  <pre><code>public class AttributeNode
  {
      public string Parameter { get; set; }
      public string Value { get; set; }
      public string IpAddress { get; set; }
      public string ImageSource {get; set; }
      public char Type { get; set; }
  
      ...
  }
  </code></pre>
  
  <p>You can see the properties here and how I attach the Parameter, Value, and IpAddress properties to their own columns. </p>
  
  <p>But if I try to do this with the Image Source binding then I get this error : </p>
  
  <p><a href="https://i.stack.imgur.com/68bPY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/68bPY.png" alt="enter image description here"></a></p>
  
  <p><strong>Question</strong></p>
  
  <p>I'm not sure yet if I can bind to a string that represents an Image path but I guess more importantly is how can I access and data bind to the property <code>ImageSource</code> for an item of type <code>AttributeNode</code> in the the ItemsSource <code>Attributes</code> (a list of <code>Attributes</code>)for the DataGrid? My implementation works for the other 3 columns and updates correctly based on changes in my ViewModel. How do I access the property like I did previously?</p>