3

I have 2 properties as Height and Width on my ImageDimension object and I want to bind them together so it displays something like 50x60 (a x character in between)? How can I achieve this? The Code below gives me an error saying

"Object reference not set to an object instance."

<cst:CustomDataGrid x:Name="grdImageDimension"  
                    ItemsSource="{Binding ImageDimensions, IsAsync=True}"  
   <DataGridTextColumn Header="ImageDimension" Width="50">
      <DataGridTextColumn.Binding>
         <MultiBinding StringFormat="{}{0} + {1}">
            <Binding Path="ImageDimensions.Height" />
            <Binding Path="ImageDimensions.Width" />                              
         </MultiBinding>
      </DataGridTextColumn.Binding>
   </DataGridTextColumn>
</cst:CustomDataGrid>

ViewModel:

Public Class ImageDimensionsVM

    Private m_ImageDimensions As ObservableCollection(Of ImageDimension)
    Public Property ImageDimensions() As ObservableCollection(Of ImageDimension)
        Get
            Return m_ImageDimensions
        End Get
        Set(value As ObservableCollection(Of ImageDimension))
            m_ImageDimensions = value
        End Set
    End Property
boutta
  • 24,189
  • 7
  • 34
  • 49
Emil
  • 6,411
  • 7
  • 62
  • 112
  • Your DataGrid is binded to a list of ImageDimension? You have one ImageDimension in your DataContext? Please more info – Giangregorio Oct 20 '15 at 12:37
  • @Giangregorio I have updated my question with more information. as you can see It is ObservableCollection(Of ImageDimension). – Emil Oct 20 '15 at 12:50
  • 1
    So you don't need to Bind to ImageDimensions.Height but only to Height – Giangregorio Oct 20 '15 at 12:52

1 Answers1

17

If you want to data bind to the properties of the ImageDimension object, just use them directly as @Giangregorio points out:

<Window x:Class="DataGridTextHeightWidth.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>
      <DataGrid x:Name="grdImageDimension" ItemsSource="{Binding 
                ImageDimensions, IsAsync=True}" AutoGenerateColumns="False">
         <DataGrid.Columns>
            <DataGridTextColumn x:Name="MyGridColumn"
                                Header="ImageDimension"
                                Width="*">
               <DataGridTextColumn.Binding>
                  <MultiBinding StringFormat="{}{0} x {1}">
                     <Binding Path="Height" />
                     <Binding Path="Width" />
                  </MultiBinding>
               </DataGridTextColumn.Binding>
            </DataGridTextColumn>
         </DataGrid.Columns>
      </DataGrid>
   </Grid>
</Window>

Code behind:

public partial class MainWindow : Window
{
   public MainWindow()
   {
      InitializeComponent(); 

      // Create list
      MyImageDimensionCol col = new MyImageDimensionCol();
      col.ImageDimensions = new ObservableCollection<ImageDimension>();
      col.ImageDimensions.Add(new ImageDimension() { Height = 5, Width = 10 });
      col.ImageDimensions.Add(new ImageDimension() { Height = 15, Width = 20 });
      col.ImageDimensions.Add(new ImageDimension() { Height = 5, Width = 5 });
      DataContext = col;
   }
}

public class MyImageDimensionCol
{
   public ObservableCollection<ImageDimension> ImageDimensions { get; set; }
}

public class ImageDimension
{
   public int Height { get; set; }
   public int Width { get; set; }
}
SwDevMan81
  • 48,814
  • 22
  • 151
  • 184
  • In this case, it's working but if the column is not read-only, you can not edit the value. – Maxence Feb 09 '21 at 11:04
  • You can make it work iwith a two ways binding if you remove the `StringFormat` and use an `IMultiValueConverter`. – Maxence Feb 09 '21 at 13:20