NullReferenceException when referencing element if I execute InitializeComponent on parent class

Question

Edit: It's incorrectly marked a duplicate because it's not about identifying the NullReferenceException or even understanding what it is... It's about figuring out why an extended native InitializeComponent() call would make the upper class's XAML elements unable to be referenced. Why does that specific super call cause the NullReference. Hopefully someone capable of seeing the difference will understand. Thank you.

---

I have a MyPage->BasePage->ContentPage structure. If BasePage executes InitializeComponent() then the XAML elements lose scope within MyPage.. meaning I can't call MyPage.MyListView.ItemSource = xyz without getting a NullReferenceException.

If I disable the InitializeComponent() call from within BasePage, then it works as expected.

What is the BasePage.InitializeComponent() doing that breaks the scope above?

   Models
   Pages
     ├ BasePage.xaml
     |   ⤷ BasePage.xaml.cs
     └ MyPage.xaml
         ⤷ MyPage.xaml.cs
   Views
   App.xaml
     ⤷ App.xaml.cs

On my MyPage.xaml markup, I have various StackLayout elements, ListView, etc. It all exists within a pages:BasePage.Content tag, like so:

<!-- for s/o: MyPage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:Namespace.Pages"
    xmlns:views="clr-namespace:Namespace.Views"
    x:Class="Namespace.Pages.MyPage">

    <pages:BasePage.Content>

        <ListView x:Name="ListViewView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Image Source="{Binding imageUrl}" />
                            <Label Text="{Binding formattedDayOfWeek}" />
                            <Label Text="{Binding formattedDate}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </pages:BasePage.Content>

</pages:BasePage>

Within my MyPage.xaml.cs class, the constructor executes the InitializeComponent() method.

Here's what the BasePage.xaml looks like:

<!-- for s/o: BasePage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Namespace.Pages.BasePage"
    x:Name="_parent">

    <ContentPage.Content>
        <StackLayout x:Name="VerticalLayout" BackgroundColor="#f1f1f1">
            <ContentView
                x:Name="cv"
                x:FieldModifier="public"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                Content="{Binding Path=ViewContent, Source={x:Reference _parent}}" />
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

---

So to reiterate:

Within the MyPage.xaml.cs, I'm trying to call ListViewView.ItemsSource = SomeDataModel after an async fetch from a REST server.

If the extended BasePage.xaml.cs class calls InitializeComponent() in its constructor... I will get a NullReferenceException when setting the ItemsSource.

If the extended BasePage.xaml.cs class DOES NOT call InitializeComponent() in its constructor... The ItemsSource is correctly set and the list appears.

Can someone explain to me what's happening here so I can successfully initialize everything? If I don't initialize the BasePage, then I can't access elements on it as I'd want to.

Thanks!

Answer 1

Remember, BasePage's constructor is being called prior to MyPage's constructor. This also means that BasePage's InitializeComponent will be called before MyPage's constructor.

The call order is going to effectively look like this, so what's actually happening under-the-hood is slightly different:

1. BasePage..ctor
2. BasePage.InitializeComponent
3. MyPage..ctor
4. MyPage.InitializeComponent

This creates a dependency issue: nothing in BasePage's InitializeComponent method can depend on anything that's initialized by MyPage. If it does, you'll likely get a NullReferenceException or other unintended behavior.

It's hard to know exactly what the source of your error is without seeing your C# code, but I strongly suspect BasePage.InitializeComponent is referencing something that's not set until MyPage..ctor or MyPage.InitializeComponent runs. You can easily test this by temporarily removing the call to BasePage.InitializeComponent in BasePage..ctor and moving it to the end of MyPage.InitializeComponent.