Binding ObservableCollection inside an ObservableCollection

Question

I have done many searches about this problem but still I can't figure out what is wrong with my project. The flow is like this:
I want to bind a View Model. This view model contains observablecollection that has an observablecollection in it. Now I can bind to both observablecollection's while developing without problems, but when I deploy it, the data inside the other observablecollection isn't showing up.

Below is my code:

Project/Model/SubProduct.cs

class SubProducts
{
    private string subName;

    public string SubName
    {
        get
        {
            return subName;
        }

        set
        {
            subName = value;
        }
    }
}

Project/Model/Product.cs

public class Product
{
    private string name;

    public string Name
    {
        get
        {
            return name;
        }

        set
        {
            name = value;
        }
    }
    private ObservableCollection<SubProducts> subProductsSaProducts;
    internal ObservableCollection<SubProducts> SubProductsSaProducts
    {
        get
        {
            return subProductsSaProducts;
        }

        set
        {
            subProductsSaProducts = value;
        }
    }
}

Project/Model/Category.cs

class Category
{
    private string title;
    public string Title
    {
        get
        {
            return title;
        }

        set
        {
            title = value;
        }
    }
    private ObservableCollection<Product> subProducts;
    public ObservableCollection<Product> SubProducts
    {
        get
        {
            return subProducts;
        }

        set
        {
            subProducts = value;
        }
    }
}

And this the view model that implements the models: Project/ViewModel/CategoryViewModel.cs

class CategoryViewModel : ObservableCollection<Category>
{
    public CategoryViewModel()
    {
        ObservableCollection<Product> pCOl1 = new ObservableCollection<Product>();

        ObservableCollection<SubProducts> pCol1Sub = new ObservableCollection<SubProducts>();
        SubProducts subP1 = new SubProducts();
        subP1.SubName = "Lansang";
        SubProducts subP2 = new SubProducts();
        subP2.SubName = "Lata";
        pCol1Sub.Add(subP1);
        pCol1Sub.Add(subP2);

        Product p1 = new Product();
        p1.Name = "Pothaw";
        p1.SubProductsSaProducts = pCol1Sub;
        pCOl1.Add(p1);

        ObservableCollection<Product> pCOl2 = new ObservableCollection<Product>();
        Product p2 = new Product();
        p2.Name = "Taklob sa COke";
        pCOl2.Add(p2);

        Add(new Category()
        {
            Title = "Didang",
            SubProducts = pCOl1
        });
        Add(new Category()
        {
            Title = "Plastic",
            SubProducts = pCOl2
        });
    }
}

And I use the View model in the xaml which is the page:

<Page.DataContext>
    <vm:CategoryViewModel/>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <FlipView x:Name="flipView" HorizontalAlignment="Left" VerticalAlignment="Top" Width="360" ItemsSource="{Binding}" Background="#19B0F100">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Foreground="Black" FontSize="30" Text="{Binding Title}"/>
                    <ListView ItemsSource="{Binding SubProducts}" Background="#FF0C0909" Height="600">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Foreground="Red" FontSize="30" Text="{Binding Name}"/>
                                    <ListView  ItemsSource="{Binding SubProductsSaProducts}" Margin="30,0,0,0" Background="#FF933131" Height="197" Width="300">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Foreground="Yellow" FontSize="20" Text="{Binding SubName}"/>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Grid>

Now the expected data shows in development mode. In other words, the data shows only when not running the app.

My questions are:

1. What is wrong with my binding?
2. What is the proper way to do it?
3. Why is the data not showing when I run the app?

I'm new to C# WinRT development so any suggestions will be appreciated. Below is the screenshot:

Answer 1

You should Inherit from Category class not ObservableCollection. Also I think there's no SubProductsSaProducts property in Category class, as you bind the page to CategoryViewMode which inherit from ObservableCollection