4

I need to implement the horizontal (magazine style) list. The apps that do this quite good (in my opinion) are Flipboard and Zite. I wondered if this is possible to implement into a Xamarin.Forms application with existing resources.

In Xamarin.Forms, you have an excellent View that is the ListView. This ListView has an ItemSource and an ItemTemplate property where you can bind your ViewModel to the ItemSource and you can bind your TextCell class to your ItemTemplate.

I'm searching for the exact same thing except that you can modify the ItemTemplate to a custom class I make myself. The reason I need this is that I need a more complex layout than TextCelland the ListView only scrolls vertically.

I like the MVVM pattern very much and I need something that exactly fits into this pattern. Now, I looked into some implementations:

Option 1

In the Xamarin.Forms.Labs, there is a GridView, but this view doesn't expand to its parent in my implementation although I am setting the following:

var grid = GridView {
    ItemWidth = 50,
    ItemHeight = 50,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand
};

My ItemSource is tied to my ViewModel (which I am 100% sure of it is providing items. I know that because if I swap this GridView for a ListView, there are items.):

grid.ItemSource = ViewModel.Items;

And my ItemTemplate:

var cell = new DataTemplate(typeof(TextCell));
            cell.SetBinding(TextCell.TextProperty, "Title");
            cell.SetBinding(TextCell.TextProperty, "Description");
            gridView.ItemTemplate = cell;

Now, I know there are some problems with the GridView and that the implementation is only for iOS right now according to this.

Option 2

In the second post they mention a WrapLayout. Although it shows some items being added via its Children property, it doesn't show any implementation with MVVM. Besides that, the implementation is nowhere near finished.

I can take this project as a base and expand it to my needs. But I feel there has to be a lot of work done for this to work in my scenario.

Does anybody know any other resources that better fit my needs than these two? For which option should I go if there aren't any resources available (I know there must be something available since Zite and Flipboard already done it)?

Jack Sierkstra
  • 1,414
  • 2
  • 20
  • 42
  • Hi Jack, did you manage to get around your problem? I'm facing something similar and would like a WrapLayout with an ItemSource. – Jason Steele Mar 14 '15 at 15:36
  • 1
    Hi Jason, I didn't managed to come up with a solution. The options I had were: go with Xamarin.Forms.Labs, which only had a beta version of the GridView and the Android implementation wasn't written at the point I needed it. I discussed the issue with my manager, and we decided to stick with a ListView for both platforms. That was a couple of monts ago, so maybe there are different alternatives as of now. Let me know if you found anything interesting, because I might need it in the future as well. – Jack Sierkstra Mar 20 '15 at 10:33

1 Answers1

-3

I dont know flipboard or zite but you try could something like this.

var grid = new Grid()
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    ColumnDefinitions = new ColumnDefinitionCollection()
    {
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) },
        new ColumnDefinition(){ Width = new GridLength(250, GridUnitType.Absolute) }
    },
    RowDefinitions = new RowDefinitionCollection()
    {
        new RowDefinition(){ Height = new GridLength(1,GridUnitType.Star) },
        new RowDefinition(){ Height = new GridLength(1,GridUnitType.Star) },
        new RowDefinition(){ Height = new GridLength(1,GridUnitType.Star) }
    }
};
var scrollview = new ScrollView() { Orientation = ScrollOrientation.Horizontal };
scrollview.Content = grid;
RoelV
  • 121
  • 3
  • You specified a Grid. So you are suggesting that I should build up the layout myself? How to maintain items in the grid then? – Jack Sierkstra May 16 '15 at 08:27