Xamarin 表单 expandableListView/Syncfusion/CollectionView 问题限制项目

Question

我正在尝试使用任何可扩展列表来限制列表的大小，例如，列表 returns 30 个项目我想显示 3。但是，我可以选择当他们展开列表时，将显示其余 27 个项目。当它崩溃时，

我们仍然看到 3 个项目作为原始项目大小设置。 任何代码片段 此时 很有帮助。谢谢

我试过像这样限制代码的大小

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);

事实上，它删除了其余部分，但现在我不知道如何在单击展开选项时显示其余部分

Answer 1

你可以有很多种实现方式，我会简单的讲解一下。

在 Contact class 添加另一个 属性 bool IsExpanded = false。 并使前 3 个项目 true 并显示基于此 属性 的列表项目。并默认为其余项目设置“false”。一旦你点击展开按钮，就让它们都变成“true” for IsExpanded 属性。自动地，所有项目都将可见。根据您的要求进行更多定制。 希望这会起作用并适合要求将其标记为答案。快乐编码:)

Answer 2

是的，有很多方法可以实现这个功能。

一个常见的实现方式是改变ListView.On这个条件的ItemsSource，我们可以定义ItemsSource的类型为ObservableCollection，例如(VeggieViewModel 是item的class):

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

veggies = new ObservableCollection<VeggieViewModel>();

您可以参考下面的示例代码：

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

您可以根据布尔值 属性.

更新扩展视图点击事件中的 SfListView.ItemsSource 来实现您的要求

更多参考请参考以下代码片段，

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);
    }
}

此外，您可以通过如下所述设置 HeightRequest，根据项目计数更新 ListView 的高度，

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;
        });
    }
}

参考示例以实现您的要求here。