How to populate C# MAUI picker when page appears?

I'm trying to figure out how to load a picker when a page appears.

ClassEditPage has Instructor_Picker (shown below). I know the code to populate it works because it gives Debug output (shown below), however, my picker is never populated. There are no errors, just a blank picker.

Can you help me figure out how to populate the Instructor_Picker when my ClassEditPage appears?

ClassEditPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Studio_Sign_In_202307.Pages.ClassEditPage"
Title="ClassEditPage">
<StackLayout Padding="20">
<!--<Label Text="Instructor:" />
<Entry Text="{Binding cInstructor}" />-->
<!-- Instructor Picker -->
<Label Text="Instructor:" />
<Picker x:Name="Instructor_Picker"
Title="Select an Instructor"
ItemsSource="{Binding InstructorsList}" 
SelectedItem="{Binding SelectedInstructor}" 
SelectedIndexChanged="Instructor_Picker_SelectedIndexChanged">
<Picker.ItemDisplayBinding>
<!-- Display the instructor's full name in the picker -->
<Binding Path="iFullName" />
</Picker.ItemDisplayBinding>
</Picker>
<Button Text="Submit" Clicked="OnSubmitClicked" />
<Button Text="Delete" Clicked="OnDeleteClicked" IsVisible="{Binding cID, Converter={StaticResource HasValueConverter}}" />
<Button Text="Cancel" Clicked="OnCancelClicked" />
</StackLayout>
</ContentPage>

ClassEditPage.xaml.cs

using Studio_Sign_In_202307.Data;
using Studio_Sign_In_202307.Models;
using System.Collections.ObjectModel;
using System.Diagnostics;
namespace Studio_Sign_In_202307.Pages;
public partial class ClassEditPage : ContentPage
{
private readonly Class selectedClass;
private readonly bool isNewClass;
// Property to hold the collection of instructors
public ObservableCollection<Instructor> InstructorsList { get; set; }
// Property to hold the selected instructor
public Instructor SelectedInstructor { get; set; }
public ClassEditPage(Class selectedClass)
{
InitializeComponent();
// Determine if this is an existing class or a new class
isNewClass = selectedClass == null;
this.selectedClass = selectedClass ?? new Class();
BindingContext = this.selectedClass;
// Create Connection String
string connectionString = DatabaseHelper.BuildConnectionString();
// Set the InstructorsList with the data from the database
InstructorsList = DatabaseHelper.GetInstructorsAll(connectionString);
// Debug instructor list <-- This Displays My Instructors
foreach (Instructor instructor in InstructorsList)
{
Debug.WriteLine($"Instructor ID: {instructor.iID}");
Debug.WriteLine($"Full Name: {instructor.iFullName}");
Debug.WriteLine($"Email: {instructor.iEmail}");
Debug.WriteLine("------------------------");
}
// Set the selected instructor for the class (if it has one)
if (selectedClass.iID_Link != 0)
{
SelectedInstructor = InstructorsList.FirstOrDefault(i => i.iID == selectedClass.iID_Link);
Instructor_Picker.SelectedIndex = InstructorsList.IndexOf(SelectedInstructor);
}
}
private void Instructor_Picker_SelectedIndexChanged(object sender, EventArgs e)
{
if (Instructor_Picker.SelectedItem is Instructor selectedInstructor)
{
SelectedInstructor = selectedInstructor;
}
}
private void OnSubmitClicked(object sender, EventArgs e)
{
Debug.WriteLine("SUBMIT");
// Submit Logic Here
Navigation.PopModalAsync();
}
private void OnDeleteClicked(object sender, EventArgs e)
{
Debug.WriteLine("DELETE");
// Delete Logic Here
Navigation.PopModalAsync();
}
private void OnCancelClicked(object sender, EventArgs e)
{
Navigation.PopModalAsync();
}
}

Dubug Output

Instructor ID: 44
Full Name: Lori
Email: LoriTest@gmail.com
------------------------
Instructor ID: 38
Full Name: Bret
Email: BretTest@gmail.com
------------------------
Instructor ID: 56
Full Name: Jessica
Email: JessTest@gmail.com
------------------------

Thanks for your help!

Ok, here we go. Firstly we need to learn about MVVM. It makes your life so much easier and it separate your code and makes it more structured and testable and maintainable. So we going to separate your code into a ViewModel where all business logic is and let the view take care of all that it is best for, the controls and views. I have slimed down your code but it all work as you want, even the delete button. You should consider to make the Buttons use commands and handle logic in the ViewModel.

The ViewModel looks like this:

public partial class ClassEditViewModel : ObservableObject
{
    public ClassEditViewModel()
    {
        // Set the InstructorsList with the data from the database
        InstructorsList = GetInstructor();
    }

    // Property to hold the collection of instructors
    [ObservableProperty]
    private ObservableCollection<Instructor> _instructorsList;
}

Your view looks like this now:

<ContentPage.Resources>
<ResourceDictionary>
<converters:NullToBoolConverter x:Key="NullToBoolConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Padding = "20" >
<Label Text="Instructor:" />
<Picker
x:Name="Instructor_Picker"
Title="Select an Instructor"
ItemsSource="{Binding InstructorsList}">
<Picker.ItemDisplayBinding>
<!--  Display the instructor's full name in the picker  -->
<Binding Path = "FullName" />
</Picker.ItemDisplayBinding >
</Picker >
<Button Clicked="OnSubmitClicked" Text="Submit" />
<Button
Clicked = "OnDeleteClicked"
IsEnabled="{Binding Source={x:Reference Instructor_Picker}, Path=SelectedItem, Converter={StaticResource NullToBoolConverter}}"
Text="Delete" />
<Button Clicked = "OnCancelClicked" Text="Cancel" />
</StackLayout>

And your View Code Behind is this now. Much more maintainable IMHO.

public TestPage()
{
    InitializeComponent();
    BindingContext = new ClassEditViewModel();


}

private void OnSubmitClicked(object sender, EventArgs e)
{

}

private void OnCancelClicked(object sender, EventArgs e)
{

}

private void OnDeleteClicked(object sender, EventArgs e)
{
    Toast.Make("Delete user").Show();
}

I made a lite converter for you if you want it:

public class NullToBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value != null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I needed to add the 'InstructorsList' and 'SelectedInstructor' properties directly to the Class.cs data model like this:

public ObservableCollection<Instructor> InstructorsList { get; set; }
public Instructor SelectedInstructor { get; set; }

I eliminated these two local initializations in ClassEditPage.xaml.cs:

public ObservableCollection<Instructor> InstructorsList { get; set; }
public Instructor SelectedInstructor { get; set; }

And then I populated them in the ClassEditPage.xaml.cs constructor, like this:

this.selectedClass.InstructorsList = new ObservableCollection<Instructor>(DatabaseHelper.GetInstructorsAll(connectionString));
...
this.selectedClass.SelectedInstructor = this.selectedClass.InstructorsList.FirstOrDefault(i => i.iID == selectedClass.iID_Link);