Xamarin / C# : How to iterate through Array/List DataMember passed to the viewCell without using inner ListView

Question

I've been advised that Xamarin doesn't support nested ListViews.. I trying to build social app, in which the post might have several images and comments.

The feed page will be basically a ListView of the posts. While I cannot use a listView within the post (which is a viewCell), I tried to use Grid for the images instead, and another Grid for Comments. Both Images and Comments can be Lists, Arrays or ObservableCollections in the "post" Class.

Now I need to make foreach loop of this array/list, adding images with source bound to array item. But it seems to me, I couldn't use the data passed to the viewCell in C# (can only be used in Xaml layout).

Anybody has any ideas how to solve this.

[DataContract]
Public class post {
   [DataMember]
   List<comment> commentContainer {get; set;}
   [DataMember]
   List<String> imageContainer {get; set;}
}

in Xaml of cellView

<Grid x:Name="imagesGrid" IsVisible="{Binding isImage}" BindingContext="{Binding imageContainer}">
        here I need to iterate the list of image in c# if possible - runtime- !
    </Grid>

TheGeneral TheGeneral · Accepted Answer · 2018-03-12T09:05:39

You are right to say that you shouldn't use nested ListViews in Xamarin.Forms, virtualization goes out the window and scrolling/gestures will be hard to handle.

However, i think this design in Xamarin.Forms will be fraught with problems. Xamarin.Forms ListView is a very specific beast and wont play well with very complicated layouts. My gut feeling is you want to do this in Native Views maybe or at the very least design this entirely in code. Anyway that is just my gut feel.

Have it be noted, i would shy away from this design and make it simple for your self by doing like WhatsApp does, and use a Template Selector and break apart multiple images and posts with a DataTemplateSelecto. Then you Don't have to worry about complicated layouts.

However, if you have your heart set on more complicated layouts inside ListView (be warned there be dragons) though you can take a look at this, Cell Appearance As noted i would be more inclined to this entirely in Code apposed to an ad-hock Xaml solution

public class CustomCell : ViewCell
{
    public CustomCell()
    {
        //instantiate each of our views
        var image = new Image ();
        StackLayout cellWrapper = new StackLayout ();
        StackLayout horizontalLayout = new StackLayout ();
        Label left = new Label ();
        Label right = new Label ();

        ...

        //add views to the view hierarchy
        horizontalLayout.Children.Add (image);
        horizontalLayout.Children.Add (left);
        horizontalLayout.Children.Add (right);
        cellWrapper.Children.Add (horizontalLayout);
        View = cellWrapper;
    }
}

And set it like this

public partial class ImageCellPage : ContentPage
{
    public ImageCellPage ()
    {
        InitializeComponent ();
        listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
    }
}

Also checkout Grid

You can build one in code like this

var grid = new Grid();

grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});

var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };

grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);

Xamarin / C# : How to iterate through Array/List DataMember passed to the viewCell without using inner ListView

1 Answers