How to add data to CollectionView from BindingContext from another page - xamarin

Question

I have this below click button on the MainPage, it works fine and I can see the data displayed if I pass(Bind) data to a Label in the second page(CourseDetailViewPage);
but now I want to display data in a collectionview located in the second page(CourseDetailPage).
//Click button in MainPage
public async void OnOkGetCourseButton(object sender, EventArgs e)
{
var inputtedCourseNumber = ctrlEntryTextBox.Text;
if(inputtedCourseNumber == string.Empty)
{
await DisplayAlert("Note", "\nPlease enter your Course number", "OK");
}
else
{
try
{
CourseService CourseService = new CourseService();
var data = await CourseService.getCourses();
var userCourse = data.Where(x => x.Id.ToString() == inputtedCourseNumber).FirstOrDefault();
UserDialogs.Instance.HideLoading();
if (userCourse == null)
{
await DisplayAlert("Note", "\nCourse number does not exist. Verify your Course number", "OK");
}
else
{
await DisplayAlert("Note", "\nOurahh - Course number found !!!", "OK");
await DisplayAlert("Note", "\n" + userCourse.Id + "\n" + userCourse.CourseDetail + "\n" + userCourse.IsCourseComplete + "\n" + userCourse.CourseDate, "OK");
await Navigation.PushAsync(new CourseDetailPage
{
BindingContext = userCourse as Course
});
}
}
catch (Exception)
{
await DisplayAlert("Error", "Error Network", "OK");
}
}
}
======
// CourseDetailPage (Second page)
<CollectionView x:Name="myCollection" ItemsSource="{Binding userCourse}"
HeightRequest="200">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto,Auto,Auto">
<Label Grid.Row="0" Text="{Binding Id}"/>
<Label Grid.Row="0" Text="{Binding CourseDetail}"/>
<Label Grid.Row="0" Text="{Binding IsCourseComplete}"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Answer 1

Change
await Navigation.PushAsync(new CourseDetailPage
{
BindingContext = userCourse as Course
});
To
ObservableCollection<Course> courses = new ObservableCollection<Course>();
courses.Add(userCourse);
await Navigation.PushAsync(new CourseDetailPage
{
BindingContext = courses
});
REASON: You need to pass a collection to ItemsSource. In this simple situation, it wouldn't have to be an "Observable"Collection, but in more dynamic uses, where code adds/removes elements while a list of items is displayed, that is likely to be what you'll want. So I used it here, as a good habit.
Change
<CollectionView x:Name="myCollection" ItemsSource="{Binding userCourse}"
HeightRequest="200">
To
<CollectionView x:Name="myCollection" ItemsSource="{Binding .}"
HeightRequest="200">
REASON: In the first code change, we set BindingContext of the new CourseDetailPage to the collection that we want to use as ItemsSource. "{Binding .}" is a way to refer to the BindingContext itself. In this case, the BindingContext is the list to use as ItemsSource.
NOTE: While the above should work, it is limiting. It doesn't offer any way to pass other values, to other parts of CourseDetailPage. If you find that you want to pass userCourse AND some other information, then it is slightly more involved.
Define a class that has a public property Courses, and pass an instance of that class as BindingContext. THEN ItemsSource will be {Binding Courses}:
public class Details
{
public property ObservableCollection<Course> Courses { get; set; }
public property int Prop2 { get; set; }
}
...
ObservableCollection<Course> courses = new ObservableCollection<Course>();
courses.Add(userCourse);
var details = new Details { Courses = courses, Prop2 = 123 };
await Navigation.PushAsync(new CourseDetailPage
{
BindingContext = details
});
...
<CollectionView x:Name="myCollection" ItemsSource="{Binding Courses}"
HeightRequest="200">
... some other view that uses `..="{Binding Prop2}"` ...
This is a "one-way" display of data. If user needs to interact with the data, then look into MVVM.