Arrange collectionview items in a grid

Question

I'm working on an app where I populate a CollectionView with a list of data from a json file. I'm my main page the data is displayed in a vertical list of hymn titles which navigates to a details page. I want to add a second page where the hymn numbers alone will be displayed in grid but can't see how to do it since the Collectionview is only populated at runtime.

I tried placing a <Grid> in the <CollectionView.ItemTemplate > but it wasn't working because there is only one Layer control which binds to a number in my hymn model.

Answer 1

Assuming that you want 2 items in a Row and display them in a generic Grid like fashion all you need to do is set the ItemsLayout property:

<CollectionView ....>
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
</CollectionView>

Note that there are some basic design changes that you will have to make to your ItemTemplate to make the look and feel work