2017-04-11 2 views
2

Ich lese viele Themen über die Verwendung von ObservableCollection, aber ich verstehe nicht, was ich in meinem Fall tun soll. Ich habe folgende PageContent Struktur:Wie aktualisieren Elemente auf einer Inhaltsseite?

enter image description here

Ich benutze IList Sammlung meine Xamarin.Form.Image zu speichern. Ich nehme es aus der Datenbank. Die Anzahl der Zeilen und Spalten des Rasterlayouts hängt definitiv von der Anzahl der Bilder in einer Datenbank ab. Benutzer kann neue Bilder in eine Datenbank laden. Es wird in einer Datenbank unter Verwendung von ImageRepository und Anzeigen in der IList<T> Sammlung angezeigt, aber ich weiß nicht, wie ich mein Rasterlayout dynamisch neu zeichnen. Ich habe versucht, dies zu tun, wie folgt:

//this.images 
//is a IList<Images> which stores as property of the class. 

     private void OnClickSearchImagesButton(object sender, EventArgs args) 
     { 
      IFiler filer = DependencyService.Get<IFiler>(); 
      // Get all paths of the images 
      IEnumerable<string> filesPath = filer.GetFilesPaths(FileExtension.JPG); 
      IEnumerable<Image> images = filesPath.Select(f => new Image { Source = ImageSource.FromFile(f) }); 

      foreach (Image img in images) 
      { 
       // If found image does not exist 
       // Add it to a database 
       // -------------------- 

       // Redraw grid layout 
       this.gridLayout = new Grid(); 

       const int numberOfImagesPerRow = 3; 
       int numberOfImages = this.images.Count; 
       int numberOfRows = (int)Math.Ceiling((double)numberOfImages/numberOfImagesPerRow); 

       // configure grid layout 
       for (int i = 0; i < numberOfRows; i++) 
       { 
        this.gridLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(200) }); 
       } 

       for (int i = 0; i < numberOfImagesPerRow; i++) 
       { 
        this.gridLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); 
       } 

       for (int i = 0, imageNumber = 0; i < numberOfRows; i++) 
       { 
        for (int j = 0; j < numberOfImagesPerRow && imageNumber < numberOfImages; j++, imageNumber++) 
        { 
         this.gridLayout.Children.Add(images[imageNumber], j, i); 
        } 
       } 
      } 
     } 

Aber es half mir nicht. Ich sah einige Themen, wenn Leute ObservableCollection für Artikel anstelle von List verwenden. Ich bin ein wenig verwirrt, weil ich denke, dass ich alle meine Artikel in ObservableCollection speichern muss. Könnten Sie mir bitte erklären, wie Sie die Informationen auf der Seite am besten halten können?

Antwort

3

ObservableCollection ist sehr nützlich, wenn Sie Steuerelemente wie ListView verwenden. Wenn Sie einen Datensatz hinzufügen oder einen Datensatz aus der ObservableCollection entfernen, wird ListView automatisch aktualisiert.

Wenn Sie ein Raster erstellen und Bilder hinzufügen, sollten Sie Elemente "nach Code" hinzufügen oder entfernen. ObservableCollection kann Ihnen nicht helfen.

Wenn Sie einen Listview benötigen, die Bilder angezeigt werden (so können Sie ObservableCollection verwenden) Sie einen Blick auf

FlowListView

nehmen können, es ist ein leistungsfähiges Plugin, das Bild in einer Liste

Datatemplate visualisieren und Datatemplateselector Unterstützung

fester oder automatischer Spaltenzählwert

Gruppierung Unterstützung

Spalten können zu leeren Raum (konfigurierbar) erweitern

ANY View kann als eine Zelle

Alle Xamarin.Forms Plattformen

unterstützt verwendet werden

Einfache Probe

<flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false" 
    FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}" 
    FlowItemsSource="{Binding Items}" > 

    <flv:FlowListView.FlowColumnTemplate> 
     <DataTemplate> 
      <Label HorizontalOptions="Fill" VerticalOptions="Fill" 
       XAlign="Center" YAlign="Center" Text="{Binding Title}"/> 
     </DataTemplate> 
    </flv:FlowListView.FlowColumnTemplate> 

</flv:FlowListView> 

Wenn Sie eine Demo benötigen

DEMO

+0

FlowListView ist ein guter Vorschlag, aber es ist nicht korrekt zu sagen ObservableCollection ist ohne ein vor-gebackenes Steuerelement nicht hilfreich, um es zu verbrauchen. Der Vorteil von ObservableCollection besteht in den Ereignissen, die ausgelöst werden, wenn die Sammlung geändert wird.Steuerelemente wie ListView nutzen dies aus, indem sie sie abonnieren und aktualisieren, wenn sie ausgelöst werden. Sie können dies auch mit Ihrer eigenen Kontrolle tun. –

1

ObservableCollection ist hilfreich, da Ereignisse ausgelöst werden, wenn sich die Auflistung ändert. Sie müssen jedoch entweder ein Steuerelement verwenden, das diese Ereignisse verwendet, oder eines erstellen. In Ihrem Fall würde ich vorschlagen, einige Drittanbieter-Steuerelemente, die Layout-Bilder, wie Sie möchten (eine andere Antwort FlowListView erwähnt), oder Blick auf creating a custom layout in Xamarin Forms.

Verwandte Themen