My Combobox is not populating - wpf

Question

I am using a combo box within a datagrid, binding to a view model using WPF and MVVM. My combo box is not populating though the data bound item does have data. I'm not sure what I'm doing wrong. Any help would be appreciated.
My first datagrid populates just fine with the cross sectional data.
My second datagrid populates with the appropriate zone data. However, the combobox itemsource and selected cross section are not working in the second data grid. If I set breakpoints in the property for crosssections and selected cross sections, I get to the breakpoints. However, the data is not being populated.
I updated my code to reflect the changes suggested. The drop down entries populated just fine, as did a selected item. However, I noticed that I had properties with the same name in both the MainWindowViewModel and the Zone viewmodel class. So, I updated the Zone class as below:
Imports GalaSoft.MvvmLight
Public Class Zone
Inherits ViewModelBase
Private _zoneNumber As Integer
Private _selectedZoneCrossSection As CrossSection
Private _length As Double
Public Property ZoneNumber As Integer
Get
Return _zoneNumber
End Get
Set(value As Integer)
_zoneNumber = value
RaisePropertyChanged(Function() ZoneNumber)
End Set
End Property
Public Property SelectedZoneCrossSection As CrossSection
Get
Return _selectedZoneCrossSection
End Get
Set(value As CrossSection)
_selectedZoneCrossSection = value
RaisePropertyChanged(Function() SelectedZoneCrossSection)
End Set
End Property
Public Property Length As Double
Get
Return _length
End Get
Set(value As Double)
_length = value
RaisePropertyChanged(Function() Length)
End Set
End Property
End Class
I then modified the MainWindow.xaml ComboBox component as follows and now I'm working as I expected...
<DataGridComboBoxColumn Header="Cross Section"
SelectedValueBinding="{Binding SelectedZoneCrossSection}"
DisplayMemberPath="RecordNumber">
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CrossSections}"/>
</Style>
</DataGridComboBoxColumn.ElementStyle>
<DataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CrossSections}"/>
</Style>
</DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>
My MainWindow.Xaml
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComboBoxBinding"
Title="MainWindow" Height="350" Width="800">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<StackPanel Orientation="Vertical">
<DataGrid ItemsSource="{Binding CrossSections}"
SelectedItem="{Binding SelectedCrossSection}"
AutoGenerateColumns="False"
>
<DataGrid.Columns>
<DataGridTextColumn Header="No." Binding="{Binding RecordNumber}"/>
<DataGridTextColumn Header="Height" Binding="{Binding Height}"/>
<DataGridTextColumn Header="Width" Binding="{Binding Width}"/>
<DataGridTextColumn Header="Area" Binding="{Binding Area}"/>
</DataGrid.Columns>
</DataGrid>
<Separator/>
<DataGrid ItemsSource="{Binding Zones}" AutoGenerateColumns="True"
SelectedItem="{Binding SelectedZone}">
<DataGrid.Columns>
<DataGridTextColumn Header="No." Binding="{Binding ZoneNumber}"/>
<DataGridComboBoxColumn Header="Cross Section"
ItemsSource="{Binding CrossSections, Mode=OneWay, NotifyOnTargetUpdated=True, NotifyOnSourceUpdated=True}"
SelectedItemBinding="{Binding SelectedCrossSection}"
DisplayMemberPath="RecordNumber"
/>
<DataGridTextColumn Header="Length" Binding="{Binding Length}"/>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</Grid>
</Window>
My MainWindowViewModel.vb
Imports System.Collections.ObjectModel
Imports GalaSoft.MvvmLight
Public Class MainWindowViewModel
Inherits ViewModelBase
Private _crossSections As ObservableCollection(Of CrossSection) = New ObservableCollection(Of CrossSection)()
Private _selectedCrossSection As CrossSection
Private _zones As ObservableCollection(Of Zone) = New ObservableCollection(Of Zone)
Private _selectedZone As Zone
Public Property CrossSections As ObservableCollection(Of CrossSection)
Get
Return _crossSections
End Get
Set(value As ObservableCollection(Of CrossSection))
_crossSections = value
RaisePropertyChanged(Function() CrossSections)
End Set
End Property
Public Property SelectedCrossSection As CrossSection
Get
Return _selectedCrossSection
End Get
Set(value As CrossSection)
_selectedCrossSection = value
RaisePropertyChanged(Function() SelectedCrossSection)
End Set
End Property
Public Property Zones As ObservableCollection(Of Zone)
Get
Return _zones
End Get
Set(value As ObservableCollection(Of Zone))
_zones = value
RaisePropertyChanged(Function() Zones)
End Set
End Property
Public Property SelectedZone As Zone
Get
Return _selectedZone
End Get
Set(value As Zone)
_selectedZone = value
RaisePropertyChanged(Function() SelectedZone)
End Set
End Property
Public Sub New()
InitializeCrossSections()
InitializeZones()
End Sub
Public Sub InitializeCrossSections()
Dim oc As ObservableCollection(Of CrossSection) = New ObservableCollection(Of CrossSection)()
Dim cs As CrossSection
For i = 1 To 10
cs = New CrossSection()
cs.RecordNumber = i
cs.Height = i
cs.Width = i + 1
cs.Area = cs.Height * cs.Width
oc.Add(cs)
Next
CrossSections = New ObservableCollection(Of CrossSection)(oc)
SelectedCrossSection = CrossSections(0)
End Sub
Public Sub InitializeZones()
Dim oc As ObservableCollection(Of Zone) = New ObservableCollection(Of Zone)()
Dim zn As Zone
For i = 1 To 3
zn = New Zone()
zn.ZoneNumber = i
zn.Length = 10 - i * 0.25
zn.SelectedCrossSection = CrossSections(i)
oc.Add(zn)
Next
Zones = New ObservableCollection(Of Zone)(oc)
SelectedZone = Zones(0)
End Sub
End Class
My CrossSection Class:
Imports GalaSoft.MvvmLight
Public Class CrossSection
Inherits ViewModelBase
Private _recordNumber As Integer
Private _height As Double
Private _width As Double
Private _area As Double
Public Property RecordNumber As Integer
Get
Return _recordNumber
End Get
Set(value As Integer)
_recordNumber = value
RaisePropertyChanged(Function() RecordNumber)
End Set
End Property
Public Property Height As Double
Get
Return _height
End Get
Set(value As Double)
_height = value
RaisePropertyChanged(Function() Height)
End Set
End Property
Public Property Width As Double
Get
Return _width
End Get
Set(value As Double)
_width = value
RaisePropertyChanged(Function() Width)
End Set
End Property
Public Property Area As Double
Get
Return _area
End Get
Set(value As Double)
_area = value
RaisePropertyChanged(Function() Area)
End Set
End Property
End Class
My Zone Class
Imports GalaSoft.MvvmLight
Public Class Zone
Inherits ViewModelBase
Private _zoneNumber As Integer
Private _selectedCrossSection As CrossSection
Private _length As Double
Public Property ZoneNumber As Integer
Get
Return _zoneNumber
End Get
Set(value As Integer)
_zoneNumber = value
RaisePropertyChanged(Function() ZoneNumber)
End Set
End Property
Public Property SelectedCrossSection As CrossSection
Get
Return _selectedCrossSection
End Get
Set(value As CrossSection)
_selectedCrossSection = value
RaisePropertyChanged(Function() SelectedCrossSection)
End Set
End Property
Public Property Length As Double
Get
Return _length
End Get
Set(value As Double)
_length = value
RaisePropertyChanged(Function() Length)
End Set
End Property
End Class

Answer 1

I made few changes. Refer the below code.
<Grid>
<StackPanel Orientation="Vertical">
<DataGrid ItemsSource="{Binding CrossSections}"
SelectedItem="{Binding SelectedCrossSection}"
AutoGenerateColumns="False"
>
<DataGrid.Columns>
<DataGridTextColumn Header="No." Binding="{Binding RecordNumber}"/>
<DataGridTextColumn Header="Height" Binding="{Binding Height}"/>
<DataGridTextColumn Header="Width" Binding="{Binding Width}"/>
<DataGridTextColumn Header="Area" Binding="{Binding Area}"/>
</DataGrid.Columns>
</DataGrid>
<Separator/>
<DataGrid ItemsSource="{Binding Zones}" AutoGenerateColumns="False"
SelectedItem="{Binding SelectedZone}">
<DataGrid.Columns>
<DataGridTextColumn Header="No." Binding="{Binding ZoneNumber}"/>
<DataGridComboBoxColumn Header="Cross Section"
SelectedValueBinding="{Binding SelectedCrossSection}"
DisplayMemberPath="RecordNumber">
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CrossSections}"/>
</Style>
</DataGridComboBoxColumn.ElementStyle>
<DataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CrossSections}"/>
</Style>
</DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>
<DataGridTextColumn Header="Length" Binding="{Binding Length}"/>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</Grid>