UI is not updated when value of ObservableCollection Changes

Question

I have a window called MainWindow.xaml and a Page called Tiles.xaml.

Both Window and Page shares the same ViewModel called MainWindowViewModel.cs

Here is the MainWindowViewModel.cs

public class MainWindowViewModel : MainViewModel
{
    public MainWindowViewModel()
    {
        ERP_Lite_ServiceClient client = new ERP_Lite_ServiceClient();

        Parents = new ObservableCollection<MenuItemDTO>(client.GetAllMenuItems().Where(m => m.ParentID == null));

        if (SelectedParent != null)
        {
            Children = new ObservableCollection<MenuItemDTO>(client.GetAllMenuItems().Where(m => m.ParentID == SelectedParent.MenuItemID));
        }

        client.Close();

    }

    private ObservableCollection<MenuItemDTO> _parents;
    public ObservableCollection<MenuItemDTO> Parents
    {
        get
        {
            return _parents;
        }
        set
        {
            _parents = value;
            OnPropertyChanged("Parents");
        }
    }

    private ObservableCollection<MenuItemDTO> _children;
    public ObservableCollection<MenuItemDTO> Children
    {
        get
        {
            return _children;
        }
        set
        {
            _children = value;
            OnPropertyChanged("Children");
        }
    }

    private MenuItemDTO _selectedParent;
    public MenuItemDTO SelectedParent
    {
        get
        {
            return _selectedParent;
        }
        set
        {
            _selectedParent = value;
            OnPropertyChanged("SelectedParent");

            ERP_Lite_ServiceClient client = new ERP_Lite_ServiceClient();
            Children = new ObservableCollection<MenuItemDTO>(client.GetAllMenuItems().Where(m => m.ParentID == SelectedParent.MenuItemID));
            client.Close();
        }
    }

}

Here is MainWindow.xaml

<Window.........>
    <Window.DataContext>
        <loc:MainWindowViewModel />
    </Window.DataContext>

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Background="#FF2A2A2A">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="50" />
            </Grid.ColumnDefinitions>

            <ListBox Grid.Column="0" ItemsSource="{Binding Parents}" DisplayMemberPath="Title"
                     SelectedItem="{Binding SelectedParent}"
                     Height="35" FontSize="18" BorderThickness="0" Background="#FF2A2A2A" Foreground="White" SelectedIndex="0">

                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel IsItemsHost="True" Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>


                <ListBox.Resources>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                        <Setter Property="Margin" Value="5,0" />
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Foreground" Value="#FF1CB4F7" />
                                <Setter Property="FontWeight" Value="SemiBold" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="#FF87CEEB" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.Resources>

            </ListBox>

        </Grid>

        <Frame Grid.Row="1" Source="/WPF_Client;component/Pages/Tiles.xaml"/>

    </Grid>

</Window>

Here is Tiles.xaml

<Page.....>

    <Page.DataContext>
        <self:MainWindowViewModel />
    </Page.DataContext>

    <ListBox ItemsSource="{Binding Children}" DisplayMemberPath="Title">


    </ListBox>

</Page>

I think I have correctly implemented INotifyPropertyChanged on MainWindowViewModel.cs. Also I have used ObservableCollection for Children Property. But still I don't understand why UI is not notified when collection inside Children changes.

Answer 1

You've created two MainWindowViewModel instances in your xaml. Remove the MainWindowViewModel from Tiles.xaml.