Xamarin.Forms ListView not displaying items even when setting IsVisible to true

Question

Description: I'm working on a Xamarin.Forms application, and I'm currently facing an issue with my ListView not displaying items even after setting IsVisible to true. I've followed the Xamarin documentation and other examples, but I'm still unable to identify the problem.

XAML (MainPage.xaml):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BeautyFly.MainPage"
             BackgroundColor="#404040">

    <StackLayout>
        <!-- First ScrollView with Button -->
        <StackLayout>
            <ScrollView Orientation="Horizontal">
                <StackLayout Orientation="Horizontal">
                    <Button Text="File" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                    <Button Text="Settings" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                    <Button Text="Filters" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                </StackLayout>
            </ScrollView>
            <ScrollView Orientation="Horizontal" Padding="10,0">
                <StackLayout Orientation="Horizontal">
                    <ImageButton Source="a" HeightRequest="60" WidthRequest="60" Aspect="AspectFit" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
                </StackLayout>
            </ScrollView>
            <!-- Add more elements as needed -->
        </StackLayout>
        <ListView x:Name="menuListView" IsVisible="false">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Padding="10,5">
                            <Image Source="icon" HeightRequest="30" WidthRequest="30" />
                            <Label Text="Hi hello world" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Code-Behind (MainPage.xaml.cs):

using System;
using Xamarin.Forms;

namespace BeautyFly
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            menuListView.IsVisible = true;
        }

        private void menuListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            //menuListView.IsVisible = false;
            switch (e.SelectedItem)
            {
                case "open":
                    break;
            }
            //menuListView.SelectedItem = null;
        }

        private void ImageButton_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("helL", "o", "h");
        }
    }
}

Issue:

I have a ListView named myListView. I'm initializing an ObservableCollection and setting it as the ItemsSource. Despite setting IsVisible to true, the items are not displaying. Things I've Checked:

Verified that the data in the ObservableCollection is populated correctly. Checked for any layout issues or conflicting properties. Question: Can anyone help me identify why the items in my ListView are not displaying even when I set IsVisible to true? Is there something I might be missing or any common pitfalls I should look out for?

Thank you in advance for your assistance!

Edit:

my new xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BeautyFly.MainPage"
             BackgroundColor="#404040">

    <StackLayout>
        <!-- First ScrollView with Button -->
        <StackLayout>
            <ScrollView Orientation="Horizontal">
                <StackLayout Orientation="Horizontal">
                    <Button Text="File" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                    <Button Text="Settings" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                    <Button Text="Filters" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                </StackLayout>
            </ScrollView>
            <ScrollView Orientation="Horizontal" Padding="10,0">
                <StackLayout Orientation="Horizontal">
                    <ImageButton Source="a" HeightRequest="60" WidthRequest="60" Aspect="AspectFit" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
                </StackLayout>
            </ScrollView>
            <!-- Add more elements as needed -->
        </StackLayout>
        <ListView ItemSelected="menuListView_ItemSelected" IsVisible="false">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>mono</x:String>
                    <x:String>monodroid</x:String>
                    <x:String>monotouch</x:String>
                    <x:String>monorail</x:String>
                    <x:String>monodevelop</x:String>
                    <x:String>monotone</x:String>
                    <x:String>monopoly</x:String>
                    <x:String>monomodal</x:String>
                    <x:String>mononucleosis</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>
</ContentPage>

and c#:

using System;
using Xamarin.Forms;

namespace BeautyFly
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            listView.ItemsSource = new string[]
{
  "mono",
  "monodroid",
  "monotouch",
  "monorail",
  "monodevelop",
  "monotone",
  "monopoly",
  "monomodal",
  "mononucleosis"
};
        }
        private ListView listView = new ListView();
        private void Button_Clicked(object sender, EventArgs e)
        {
            //menuListView.IsVisible = true;
        }

        private void menuListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            //menuListView.IsVisible = false;
            switch (e.SelectedItem)
            {
                case "open":
                    break;
            }
            //menuListView.SelectedItem = null;
        }

        private void ImageButton_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("helL", "o", "h");
        }
    }
}

Answer 1

After taking a deep into the issue, it looks like there's a potential when set IsVisible using ListView, however, you can use CollectionView as an alternative option.

Also, you need to use the BindingContext to show the items you clicked in ListView:

  var grid = (Grid)sender;
  var item = grid.BindingContext;
  DisplayAlert("Hello", item.ToString(), "Cancel");

Here's the demo below for your reference:

Code-behind:

    public partial class MainPage : ContentPage
    {

        //public ICommand GetItemCommand => new Command<string>(async () => await GetItemCommandAsync());
        public MainPage()
        {
            InitializeComponent();
            BindingContext = this;  
         
    }


       private void Button_Clicked(object sender, EventArgs e)
       {
             menuListView.IsVisible = true;
       }
   
        private void ImageButton_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("helL", "o", "h");
        }


        private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
        {

            var grid = (Grid)sender;
            var item = grid.BindingContext;
            DisplayAlert("Hello", item.ToString(), "Cancel");
        }
    }

XAML:

      <StackLayout>
        <!-- First ScrollView with Button -->
        <StackLayout>
            <ScrollView Orientation="Horizontal">
                <StackLayout Orientation="Horizontal">
                    <Button Text="File" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                    <Button Text="Settings" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                    <Button Text="Filters" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
                </StackLayout>
            </ScrollView>
            <ScrollView Orientation="Horizontal" Padding="10,0">
                <StackLayout Orientation="Horizontal">
                    <ImageButton Source="a" HeightRequest="60" WidthRequest="60" Aspect="AspectFit" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
                </StackLayout>
            </ScrollView>
            <!-- Add more elements as needed -->
        </StackLayout>

     
            <CollectionView x:Name="menuListView"  IsVisible="false" >
                <CollectionView.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>mono</x:String>
                        <x:String>monodroid</x:String>
                        <x:String>monotouch</x:String>
                        <x:String>monorail</x:String>
                        <x:String>monodevelop</x:String>
                        <x:String>monotone</x:String>
                        <x:String>monopoly</x:String>
                        <x:String>monomodal</x:String>
                        <x:String>mononucleosis</x:String>
                    </x:Array>
                                     
                </CollectionView.ItemsSource>

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Label FontSize="Medium" Text="{Binding .}"/>
                   
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                            </Grid.GestureRecognizers>
                        </Grid>
                       
                       
                    </DataTemplate>
                </CollectionView.ItemTemplate>
                           
            </CollectionView>
 
    </StackLayout>

Output: