Xamarin forms expandableListView/Syncfusion/CollectionView issue to limite items

Question

I'm trying to use any expandable list in order to limit the size of the list, for example, the list returns 30 items I want to display 3. However, I'm having the option that when they expand the list the rest of 27 items will display . and when it collapses ,

we still see 3 items as the original item size setup. Any code snippet a t this point is very helpful .Thanks

I tried to limit the size in code like this

foreach (var cusName in CustomerNames)
            {
                if (counter == 13)
                    counter = 1;
                var contact = new Contact(cusName);
                contact.CallTime = CallTime[i];
                contact.PhoneImage = ImageSource.FromResource("ExpandableListView.Images.PhoneImage.png", assembly);
                contact.ContactImage = ImageSource.FromResource("ExpandableListView.Images.Image" + counter + ".png", assembly);
                contact.AddContact = ImageSource.FromResource("ExpandableListView.Images.AddContact.png", assembly);
                contact.NewContact = ImageSource.FromResource("ExpandableListView.Images.NewContact.png", assembly);
                contact.SendMessage = ImageSource.FromResource("ExpandableListView.Images.SendMessage.png", assembly);
                contact.BlockSpan = ImageSource.FromResource("ExpandableListView.Images.BlockSpan.png", assembly);
                contact.CallDetails = ImageSource.FromResource("ExpandableListView.Images.CallDetails.png", assembly);
                i++;
                if (ContactsInfo.Count > 2)
                {
                    ContactsInfo.RemoveAt(2);

                }
                ContactsInfo.Add(contact);

and in fact , it removes the rest , but now I dont know how to display the rest when the click the expand option

Answer 1

You can achieve your requirement by updating the SfListView.ItemsSource in the expander view tapped event based on Boolean property.

Please refer to the following code snippets for more reference,

private void TapGesture_Tapped(object sender, EventArgs e)
{
    this.IsExpanded = !this.IsExpanded;

    if (this.IsExpanded)
    {
        ListView.ItemsSource = viewModel.ContactsInfo;
    }
    else
    {
        ListView.ItemsSource = viewModel.ContactsInfo.Take(3);
    }
}

Also, you can update the ListView’s height based on the items count by setting the HeightRequest as mentioned below,

public class ExtendedListView : SfListView
{
    VisualContainer container;
    public ExtendedListView()
    {
        container = this.GetVisualContainer();
        container.PropertyChanged += Container_PropertyChanged;
    }

    private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container);
            if (e.PropertyName == "Height")
                this.HeightRequest = extent;
        });
    }
}

Refer the sample to achieve your requirement here.

Answer 2

Yes, there are many ways to achieve this function.

A common way to achieve this is to change the ItemsSource of the ListView.On this condition, we can define the type of ItemsSource to ObservableCollection, for example(VeggieViewModel is the class of item):

public ObservableCollection<VeggieViewModel> veggies { get; set; }

veggies = new ObservableCollection<VeggieViewModel>();

You can refer to the following sample code:

MyViewModel.cs:

public class MyViewModel
{
    public ICommand expandCommand => new Command(expandItems);

    private void expandItems()
    {
        veggies.Add(new VeggieViewModel { Name = "Tomato2", Type = "Fruit", Image = "tomato.png"});
        veggies.Add(new VeggieViewModel { Name = "Romaine2", Type = "Vegetable", Image = "lettuce.png"});
        veggies.Add(new VeggieViewModel { Name = "Zucchini2", Type = "Vegetable", Image = "zucchini.png" });
    }

    public ObservableCollection<VeggieViewModel> veggies { get; set; }
    public MyViewModel()
    {

        veggies = new ObservableCollection<VeggieViewModel>();

        veggies.Add(new VeggieViewModel { Name = "Tomato", Type = "Fruit", Image = "tomato.png" });
        veggies.Add(new VeggieViewModel { Name = "Romaine Lettuce", Type = "Vegetable", Image = "lettuce.png" });
        veggies.Add(new VeggieViewModel { Name = "Zucchini", Type = "Vegetable", Image = "zucchini.png" });
    }
}

MyPage.Xaml

<ContentPage.BindingContext>
    <viewmodels:MyViewModel></viewmodels:MyViewModel>
</ContentPage.BindingContext>


<ContentPage.Content>
    <StackLayout VerticalOptions="Fill">

        <ListView  x:Name="lstView" RowHeight="60" ItemsSource="{Binding veggies}" BackgroundColor="Gray"   >
        <ListView.ItemTemplate >
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="Olive" >
                        <StackLayout Orientation="Vertical">
                            <Label Text = "{Binding Name}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
                            <Label Text = "{Binding Type}" AbsoluteLayout.LayoutBounds="50, 35, 200, 25"     />
                        </StackLayout>
                        <Image Source="{Binding Image}" HorizontalOptions="End" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 "/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

        <Label  Text="Show all accessibility features" FontAttributes="Bold"   TextDecorations="Underline" VerticalOptions="Center" HorizontalOptions="Center" >
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding expandCommand}" />
            </Label.GestureRecognizers>
        </Label>
    </StackLayout>
</ContentPage.Content>

Answer 3

You can achieve it in many ways, I will explain in a simple way.

In the Contact class add another property bool IsExpanded = false. And make it true for the first 3 items and show the list items based on this property. And make "false" for rest of the items by default. As soon as you clicked on expanded button make all of them to "true" for IsExpanded property. Automatically, all items will be visible. Do more customization as per your requirement. Hope this will work and suits for requirement mark it as Answer. Happy Coding :)