Xamarin Collectionview Binding Not working

Question

I have a problem where I am using a collectionview and I am trying to get the bindings to work. I have tried to set the Height, as I saw in other posts, by setting the miniumheight and heightrequest of every element involved, with no success. I have a listview with a textcell and that is the only way I can get this to work.

Model

    [Table("Category")]
    public class Category
    {
        [PrimaryKey, AutoIncrement]
        public int Id { get; set; }
        public string Name { get; set; }
    }

ViewModel

    public class CategoriesViewModel : BaseViewModel
    {
        public ObservableCollection<Category> Categories { get; }
        public Command LoadCategoriesCommand { get; }
        public Command AddCategoryCommand { get; }

        public CategoriesViewModel()
        {
            Title = "Categories";
            Categories = new ObservableCollection<Category>();
            LoadCategoriesCommand = new Command(async () => await ExecuteLoadCategoriesCommand());

            AddCategoryCommand = new Command(OnAddCategory);
        }

        async Task ExecuteLoadCategoriesCommand()
        {
            IsBusy = true;

            try
            {
                Categories.Clear();
                var categories = await DataStore.GetCategoriesAsync();
                foreach (var cat in categories)
                {
                    Categories.Add(cat);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
                Debug.WriteLine(ex.Message);
            }
            finally
            {
                IsBusy = false;
            }
        }

        public void OnAppearing()
        {
            IsBusy = true;
        }

View

             xmlns:local="clr-namespace:FreeScanner.ViewModels"
             xmlns:model="clr-namespace:FreeScanner.Models"
             x:Name="BrowseCategoriesPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Command="{Binding AddCategoryCommand}" />
    </ContentPage.ToolbarItems>
    <RefreshView x:DataType="local:CategoriesViewModel" Command="{Binding LoadCategoriesCommand}"
                 IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <CollectionView x:Name="CategoriesListView"
                        ItemsSource="{Binding Categories}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10" x:DataType="model:Category">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="1"
                               Grid.Row="1"
                               Text="{Binding Name}"
                               FontAttributes="Bold" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>  
        </CollectionView>
        <!--<ListView ItemsSource="{Binding Categories}" 
                  x:Name="CategoriesListView"
                  SelectionMode="None"
                  RowHeight="50">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="model:Category">
                    <TextCell Text="{Binding Name}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>-->
    </RefreshView>

When I debug and hover over the CollectView ItemSource Categories I do see the Count = 1 and I can verify that is correctly loading from the database.

Answer 1

=>Try this it's working well

public class CategoriesViewModel : BaseViewModel
    {
        public ObservableCollection<Category> Categories { get; set; } = new ObservableCollection<Category>();
        public Command LoadCategoriesCommand { get; }
        public Command AddCategoryCommand { get; }

        public CategoriesViewModel()
        {
            Title = "Categories";
            
            LoadCategoriesCommand = new Command(async () => await ExecuteLoadCategoriesCommand());

            AddCategoryCommand = new Command(OnAddCategory);
        }

        async Task ExecuteLoadCategoriesCommand()
        {
            IsBusy = true;

            try
            {
                Categories.Clear();
                var categories = await DataStore.GetCategoriesAsync();
                foreach (var cat in categories)
                {
                    Categories.Add(new Category{Name=cat.Name});
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
                Debug.WriteLine(ex.Message);
            }
            finally
            {
                IsBusy = false;
            }
        }

        public void OnAppearing()
        {
            IsBusy = true;
        }

=>This is my Xaml

<CollectionView x:Name="CourseList"  IsVisible="{Binding IsVisibleCourse}" ItemsSource="{Binding Courses}"  >
                <CollectionView.ItemsLayout>
                    <GridItemsLayout  Orientation="Vertical" Span="2"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout Padding="5" Spacing="-6">
                            <Frame BorderColor="LightGray" HeightRequest="{OnIdiom Phone=140,Tablet=210}" CornerRadius="10" HasShadow="False" Padding="5">
                                <StackLayout Padding="5" Orientation="Vertical" Spacing="5">
                                    
                                    <ffimageloading:CachedImage x:Name="Pic" LoadingDelay="0"
                                                                            Margin="0,5,0,0" WidthRequest="{OnIdiom Phone=60,Tablet=100}"
                                                                   HeightRequest="{OnIdiom Phone=60,Tablet=100}" Source="{Binding ImageURL}"
                                                                    HorizontalOptions="CenterAndExpand" VerticalOptions="Center"
                                                                        BackgroundColor="Transparent" Aspect="Fill" >
                                        <ffimageloading:CachedImage.Transformations>
                                            <ffTransformations:CircleTransformation />
                                        </ffimageloading:CachedImage.Transformations>
                                       
                                    </ffimageloading:CachedImage>

                                    <Label Text="{Binding Name}" MaxLines="2" Style="{StaticResource TextDefaultStyle}" TextColor="Black" HorizontalTextAlignment="Center" VerticalOptions="Fill"/>
                                    <Label Text="{Binding Description}" MaxLines="2" Style="{StaticResource TextMicroStyle}" HorizontalTextAlignment="Center" VerticalOptions="Fill" FontAttributes="Bold"/>
                                   
                                </StackLayout>
                                <Frame.GestureRecognizers>
                                    <TapGestureRecognizer NumberOfTapsRequired="1"
                                                Command="{Binding Path=BindingContext.CourseListCommand, Source={x:Reference CourseList}}" CommandParameter="{Binding .}"/>
                                </Frame.GestureRecognizers>
                            </Frame>
                        </StackLayout>
                       
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>