Good day, i have an ObservableCollection with a list of items from the Sqlite database file in .NET MAUI, the retrieval of items works ,my problem is that the carousel view returns all the items from the list instead of the current selected item,

solomon mokoena 0 Reputation points
2024-06-13T21:12:58.82+00:00

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

using MyHerbalDiari.DataAccess;

using MyHerbalDiari.Models;

using System.Collections.ObjectModel;

using System.Windows.Input;

Good day,

when i load my item from the Sqlite database, retrieving everything works fine except the CollectionView

or carouselview returns all the images instead of current selected item.

meaning all the images from the entire list are loaded instead of one or current item on the details page instead of the current item

model


namespace MyHerbalDiari.Models

{

[Table("NewSehlare")] 

public class NewSehlare 

{ 

    [PrimaryKey]  

    [AutoIncrement] 

    public int Id { get; set; } 

    public string SehlareName { get; set; } 

    public string PartUsed { get; set; } 

    public string Uses { get; set; } 

    public string Description { get; set; } 

    //public List<string> Multipleimages { get; set; } 

    public string Oneimage { get; set; } 



    public NewSehlare UpdateClone() => MemberwiseClone() as NewSehlare; 



    // let me validate the object  

    public (bool IsValid, string? ErrorMessage) ValidateOBj()    

    { 

        if (string.IsNullOrWhiteSpace(SehlareName))   

        { 

            return (false, $"{nameof(SehlareName)} is required"); 

        } 

        else if (string.IsNullOrWhiteSpace(Description)) 

        { 

            return (false, $"{nameof(Description)} is required"); 

        } 

        else if (string.IsNullOrWhiteSpace(PartUsed)) 

        { 

            return (false, $"{nameof(PartUsed)} is required"); 

        } 

        else if (string.IsNullOrWhiteSpace(Uses)) 

        { 

            return (false, $"{nameof(Uses)} is required"); 

        } 

        return (true, null); 

    } 



} 

}

Modelview


namespace MyHerbalDiari.ModelView

{

public partial class NewSehlareModelView : ObservableObject 

{ 

    private DataAccessContext _mydataaccess;        



    public NewSehlareModelView(DataAccessContext mydataaccess) 

    { 

        _mydataaccess = mydataaccess;            

    } 

    [ObservableProperty] 

    public string? partsUsedselectd; 



    [ObservableProperty] 

    public static string? photoPath; 





    [ObservableProperty] 

    private ObservableCollection<NewSehlare> mynnewsehlare = []; 



    [ObservableProperty] 

    private ObservableCollection<ImageSource> myImmasouce = new ObservableCollection<ImageSource>(); 

    // the operating sehlare is used to check/track the item being added 

    [ObservableProperty] 

    private NewSehlare _operatingsehlarre = new(); 



    [ObservableProperty] 

    private MyContants _myconstants = new(); 



    [ObservableProperty] 

    private bool _isbusy; 



    [ObservableProperty] 

    private string _busytext; 





    [ObservableProperty] 

    private ImageSource _Theimage; 



    // i am trying to implement the pagenation on the list 

    private readonly IList<NewSehlare> mylistsource; 

    int step = 10; 

    int page = 1; 



    //commands         

    public async Task LoadDihlareAsync() 

    { 

        Isbusy = true; 

        Busytext = "Fetching records"; 

        try 

        { 

            

            var dihlare = await _mydataaccess.GetAllAsync<NewSehlare>(); 

            //Theimage = Operatingsehlarre.Oneimage; 

            

            if (dihlare is not null && dihlare.Any()) 

            { 

                Mynnewsehlare ??= new ObservableCollection<NewSehlare>(); 



                foreach (var sehlare in dihlare) 

                { 

                    Mynnewsehlare.Add(sehlare); 

                } 

                //trying to process images into the carouselView or collection view 

                // myImmasouce ??= new ObservableCollection<ImageSource>(); 

                //foreach (var sehlare in dihlare) 

                //{ 

                //    myImmasouce.Add(sehlare); 

                //} 

                



            } 

        } 

        finally 

        { 

            Isbusy = false; 

            Busytext = "Fetching records"; 

        } 





    } 



} 

}

<CarouselView x:Name="CorouSlPics" BackgroundColor="Beige" Grid.Row="1" ItemsSource="{Binding Mynnewsehlare}">

  <CarouselView.EmptyView> 

      <Label Text="No Images uploaded for this Herb"/> 

  </CarouselView.EmptyView> 

  <CarouselView.ItemTemplate> 

      <DataTemplate> 

          <HorizontalStackLayout> 

              <Image x:Name="cardetailImges" 

          HeightRequest="150"  

          WidthRequest="200" 

          Margin="20" 

          Aspect="Fill" 

          HorizontalOptions="Center" 

          Source="{Binding  Theimage}" 

            

   /> 



          </HorizontalStackLayout> 

      </DataTemplate> 

      </CarouselView.ItemTemplate> 

</CarouselView>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,207 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Michael Taylor 51,341 Reputation points
    2024-06-13T21:33:49.7933333+00:00

    Just on a cursory glance either your code doesn't line up with the UX or you have a bad binding. You are building the Mynnewsehlare property to the UX. This is of type ObservableCollection<NewSehlare>. This appears correct.

    Within the data template for the carousel, which should be bound to NewSehlare you are binding the Image to TheImage. I don't see that property on NewSehlare. I see a private _TheImage field on your main view model but that isn't what the data template is binding to. Just on a glance I think you might want to be binding to the single image in the NewSehlare type.