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

Question

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

我们仍然看到 3 个项目作为原始项目大小设置。 任意代码片段a 到此为止 非常有帮助。谢谢

我试图限制这样的代码大小

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

您可以通过更新 SfListView.ItemsSource< 来实现您的要求/a> 在扩展器视图中点击基于布尔属性的事件。

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

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

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

Answer 2

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

实现此目的的常见方法是更改​​ ListView 的 ItemsSource。在这种情况下，我们可以将 ItemsSource 的类型定义为 ObservableCollection，例如（VeggieViewModel是item的类）：

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

你可以通过多种方式实现它，我将用简单的方式解释。

在 Contact 类中添加另一个属性 bool IsExpanded = false。
并将前 3 项设置为 true，并根据此属性显示列表项。其余项目默认设置为“false”。一旦您单击展开按钮，请将 IsExpanded 属性全部设置为“true”。所有项目都会自动可见。根据您的要求进行更多定制。
希望这能起作用并适合要求，将其标记为答案。快乐编码:)