Collection view doesnt show anything MAUI

Question

this CollectionView doesnt show anything even though its almost identical to my main page's CollectionView which does show things i've checked and itemsSource and datatemplate are correctly bound so is my image source. but it still doesnt show anything the only thing different is im navigting to this page . the collection view itself does show it just doesnt show anything inside of it.

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"
             Title="DataPage"
            xmlns:model="clr-namespace:MyApp.Views"
            xmlns:vm="clr-namespace:MyApp.Views"
            x:Class="MyApp.Views.DataPage">
   
    <Grid BackgroundColor="Blue" ColumnDefinitions="*,*,*" 
          ColumnSpacing="5"
          RowDefinitions="*,*,*,*">
        <Image BackgroundColor="White" Grid.Row="0" Grid.Column="1" x:DataType="model:DataPage" Source="{Binding JimgSource}"
                                   HeightRequest="150"
                                   WidthRequest="300"
                               Margin="10"/>
        <CollectionView x:DataType="model:DataPage" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2" BackgroundColor="Yellow" Margin="10" ItemsSource="{Binding CurrentData}">
            <CollectionView.ItemTemplate>
                <DataTemplate  x:DataType="model:Data" >
                    <VerticalStackLayout BackgroundColor="Pink">
                    <Frame BackgroundColor="Aqua">

                        <Image Source="{Binding ImagesSource}" WidthRequest="100" HeightRequest="100"/> 
                    </Frame>
                    </VerticalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Editor  HeightRequest="200" WidthRequest="350"  Grid.ColumnSpan="3"  Grid.Row="3" BackgroundColor="Beige"/>
        <Button x:DataType="model:DataPage" Command="{Binding PickfileData}"  Text="add"
                    WidthRequest="150"
                Grid.Row="4"
                    Grid.Column="1"
                VerticalOptions="End"/>
    </Grid>

</ContentPage>

Code

using System.Windows.Input;

namespace MyApp.Views;

public partial class DataPage : ContentPage
{

    public static ObservableCollection<Data> data { get; set; } = new();
    public static ObservableCollection<Data> CurrentData { get; set; } = new();
    public string JimgSource { get; set; }
    public int id { get; set; }
    public ICommand PickfileData { get; set; }

    public DataPage(TxtImgModel model)
    {
        InitializeComponent();
        PickfileData = new Command(DataButton);
        JimgSource = model.ImgSource;
        id = model.Id;
        CurrentData.Clear();
        foreach (var item in Data)
        {
            if (item.Id == model.Id) 
            {
                CurrentData.Add(item);
            }
        }

        BindingContext = this;
    }

    public async void DataButton()
    {
        var image = await MainPage.PickAndShow(PickOptions.Default);
        string Source = image.FullPath;
        Data dt = new Data { Id = this.id, ImagesSource = Source };
        data.Add(dt);
        CurrentData.Add(dt);
        var serializedData = JsonSerializer.Serialize(data);
        File.WriteAllText(MainPage.JsonDataPath, serializedData);

    }
}
public class Data
{
    public int Id { get; set; }

    public string ImagesSource { get; set;}
}

Navigting to it from MainPage like so

    public async void TappedImage(object sender, EventArgs e)
    {
        Label Id = (Label)((Frame)sender).FindByName("Id");
        foreach (var item in TxtImage)
        {
            if (item.Id.ToString() == Id.Text)
            {
                DataPage Transient = new DataPage(item);
                await Navigation.PushAsync(Transient);
                break;
            }
        }
    }

Answer 1

In the XAML code, you have set the binding context of the page to this by using BindingContext = this;.

However, the 'CollectionView' is bound to the CurrentData property of the page, which is a static property. Since the CurrentData property is not an instance property of the page, it cannot be accessed through the page's binding context.

To fix it simply change the binding of the 'CollectionView' to 'DataPage.data' that contains all the data.

Try using this 'CollectionView' in your XAML file:

<CollectionView Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2" BackgroundColor="Yellow" Margin="10" ItemsSource="{x:Static model:DataPage.data}">
<CollectionView.ItemTemplate>
    <DataTemplate>
        <VerticalStackLayout BackgroundColor="Pink">
            <Frame BackgroundColor="Aqua">
                <Image Source="{Binding ImagesSource}" WidthRequest="100" HeightRequest="100"/> 
            </Frame>
        </VerticalStackLayout>
    </DataTemplate>
</CollectionView.ItemTemplate>

If the issue is not solved with this, please do not hesitate to reply.