ListView items in single line wrapped - No scrolling

toughcannytoughcanny Member ✭✭

Hi,

Currently For ListView, using Label inside DataTemplate and ViewCell, items are bounded vertically line by line.
Like below e.g. content

1aa
2b
3d
4ee
5f
6g
7ii
8j
9kkk
10l

Is there anyway to show items continuous horizontally (label content wrap as per content / screen width)
Like below e.g. content

1aa 2b 3d 4ee
5f 6g 7ii 8j 9kkk
10l

Thanks.

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    Try to use CollectionView instead of ListView. Set 'Span' of GridItemsLayout like below:

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

    Tutorial: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout

  • toughcannytoughcanny Member ✭✭

    Hi,

    Thanks all for response

    yelinzh, it is not fulfilling the requirement as I don't have fixed number of column/span and content requires to be horizontally wrapped. For horizontal layout, scrolling happened within single line

  • JarvanJarvan Member, Xamarin Team Xamurai

    For horizontal layout, scrolling happened within single line

    Do you mean that the data is displayed horizontally and continuously in a row, and each line could scrolls horizontally as shown?

  • toughcannytoughcanny Member ✭✭
    edited July 9

    No, what I mean when using as (CollectionView ItemsLayout="HorizontalList"), it goes continuous in single line and could scroll, while what I wanted content to wrap (not to scroll horizontally).
    Required like for e.g.
    ItemSourceValue1Text ItemSourceValue2Text ItemSourceValue3TextText ItemSourceValue4Text
    ItemSourceValue5TextText ItemSourceValue6Text ItemSourceValue7TextTextText
    ItemSourceValue8Text ItemSourceValue9Text ItemSourceValue10Text ItemSourceValue11Text
    ItemSourceValue12Text ItemSourceValue13TextTextTextText

    GridLayout or VerticalList or Span is not applicable for the requirement as item content (text) is variable in length

  • JarvanJarvan Member, Xamarin Team Xamurai

    what I wanted content to wrap (not to scroll horizontally).

    FlexLayout can be used for stacking or wrapping a collection of child views.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout#css-styling-with-flexlayout

Sign In or Register to comment.