代码之家  ›  专栏  ›  技术社区  ›  TeoVr81

带有Xamarin和Prism的可扩展Listview

  •  3
  • TeoVr81  · 技术社区  · 9 年前

    Example

    问题是我使用Prism作为MVVM框架,所以我不能使用事件,我使用的是命令。 这是代码:

    <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="JDeliveryCP.Views.DocumentsPage"
             x:Name="TheDocumentsPage">
    <ContentPage.Content>
        <ListView x:Name="lstDocuments" GroupDisplayBinding="{Binding Title}" RowHeight="75" IsGroupingEnabled="True" ItemsSource="{Binding ExpandedDocuments}" >
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" >
                            <ContentView>
    
                                <Grid x:Name="cell">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1*" />
                                    </Grid.ColumnDefinitions>
                                    <Label Text="{Binding Title}"/>
    
                                    <ContentView.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding HeaderTappedCommand}" BindingContext="{Binding Source={x:Reference lstDocuments}, Path=BindingContext}" 
                                                      CommandParameter="{Binding Source={x:Reference cell}, Path=BindingContext}" />
                                    </ContentView.GestureRecognizers>
                                </Grid>
                            </ContentView>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell Text="{Binding Description}" ImageSource="icon.png" Height="75" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
    

    页面视图模型:

    using JDeliveryCP.FEModels;
    using Prism.Commands;
    using Prism.Mvvm;
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Linq;
    using System.Windows.Input;
    using Xamarin.Forms;
    
    namespace JDeliveryCP.ViewModels
    {
        public class DocumentsPageViewModel : BindableBase, INotifyPropertyChanged
        {
            private ObservableCollection<DocumentGroupModel> _documents;
            private ObservableCollection<DocumentGroupModel> _expandedDocuments;
            private ICommand headerTappedCommand;
        public ICommand HeaderTappedCommand
        {
            get { return headerTappedCommand; }
        }
    
        public ObservableCollection<DocumentGroupModel> Documents
        {
            get { return _documents; }
            set { SetProperty(ref _documents, value); }
        }
    
        public ObservableCollection<DocumentGroupModel> ExpandedDocuments
        {
            get { return _expandedDocuments; }
            set { SetProperty(ref _expandedDocuments, value); }
        }
    
        public DocumentsPageViewModel()
        {
    
            headerTappedCommand = new Command(HeaderTapped);
            //TEST -START-
            _documents = new ObservableCollection<DocumentGroupModel>
            {
                new DocumentGroupModel(897, "Cliente 1", false)
                {
                        new DocumentModel { Description = "documento 1"},
                        new DocumentModel { Description = "documento 2"},
                        new DocumentModel { Description = "documento 3"}
                },
                new DocumentGroupModel(543, "Cliente 2", false)
                {
                        new DocumentModel { Description = "documento 4"},
                        new DocumentModel { Description = "documento 5"}
                }
            };
            //TEST -END-
    
            UpdateListContent();
        }
    
        async void HeaderTapped(object sender, EventArgs args)
        {
            HeaderTapped(sender);
        }
    
            private void HeaderTapped(object sender)
        {
            DocumentGroupModel selected = ((DocumentGroupModel)(sender));
            DocumentGroupModel found = _documents.FirstOrDefault(x => x.Id == selected.Id);
            found.Expanded = !found.Expanded;       
            UpdateListContent();
            OnPropertyChanged(new PropertyChangedEventArgs("Expanded"));
        }
    
    
        private void UpdateListContent()
        {
    
            _expandedDocuments = new ObservableCollection<DocumentGroupModel>();
            foreach(DocumentGroupModel group in _documents)
            {
                DocumentGroupModel newGroup = new DocumentGroupModel(group.Id, group.Title, group.Expanded);
    
                if (group.Expanded)
                {
                    foreach(DocumentModel doc in group)
                    {                        
                        newGroup.Add(doc);
                    }
                }
                _expandedDocuments.Add(newGroup);
            }            
    
        }
    
    }
    

    组模型:

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace JDeliveryCP.FEModels
    {
        public class DocumentGroupModel : ObservableCollection<DocumentModel>, INotifyPropertyChanged
        {
            private bool _expanded;
    
            public string Title { get; set; }
    
            public int Id { get; set; }
    
            public bool Expanded
            {
                get { return _expanded; }
                set
                {
                    if (_expanded != value)
                    {
                        _expanded = value;                  
                        OnPropertyChanged(new PropertyChangedEventArgs("Expanded"));                 
                    }
                }
            }
    
            public DocumentGroupModel(int id, string title, bool expanded = true)
            {
                Id = id;
                Title = title;
                Expanded = expanded;
            }
        }
    }
    

    项目模型:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace JDeliveryCP.FEModels
    {
        public class DocumentModel
        {
            public string Description { get; set; }
    
    
        }
    }
    

    Listview被正确呈现,tap命令工作,但它不显示点击组的行,布局不变。我试着调试“HeaderTapped”方法,组被正确填充。我不知道这是否是小部件刷新的问题,或者是行模型和pageviewmodel之间的绑定问题。

    谢谢你的帮助!

    1 回复  |  直到 9 年前
        1
  •  1
  •   TeoVr81    9 年前

    我自己解决了这个问题。

        private void HeaderTapped(object sender)
        {
            DocumentGroupModel selected = ((DocumentGroupModel)(sender));
            DocumentGroupModel found = _documents.FirstOrDefault(x => x.Id == selected.Id);
            found.Expanded = !found.Expanded;       
            UpdateListContent();
            OnPropertyChanged(new PropertyChangedEventArgs("Expanded"));
        }
    

            private void HeaderTapped(object sender)
            {
                DocumentGroupModel selected = ((DocumentGroupModel)(sender));
                DocumentGroupModel found = _documents.FirstOrDefault(x => x.Id == selected.Id);
                found.Expanded = !found.Expanded;       
                UpdateListContent();
                OnPropertyChanged(new PropertyChangedEventArgs("ExpandedDocuments"));
            }
    

    所以我只更改了“OnPropertyChanged”参数。

    推荐文章