What is the better way to implement a control that looks like a ListView on 2 columns

Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

I'm looking for the better way to implement a control that looks like a ListView on 2 columns, where columns have distinct height.

The excpected result is something like this:

The items of these 2 columns come from the same DataSource, and this DataSource can have between one and a dozen of items. The items must be splitted automatically (pair/impair), and when the user click on the button related to the item, this must open an item's detail page.

In a first time, I thought about using the DLToolkit FlowListView control , but it seems that the cells of each column must have the same height, so this control can't answer to my needs...

Of course, it's also possible to do this through a Grid, but in this case I should assign each item handly: this doesn't seem to be a good choice.

_Would you have other suggestions? Is there a control allowing to do this?
_

Answers

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @Pierre-ChristopheDus How about a ListView in each of the columns of 1-row x 2-column Grid?

  • ClayZuvichClayZuvich USMember ✭✭
    edited January 2018

    I don't think the out-of-box ListView is going to work for your requirements. A ScrollView with a couple of StackLayouts should work out though especially since you only have a few items. The only rub would be virtualizing the images if they get large, but there should be some examples of that somewhere.

    For layout, I see a Horizontal StackLayout as the root with two Vertical StackLayouts inside of it.

    Otherwise, I think you're looking at using a custom renderer on each platform if you want virtualization (UICollectionView on iOS and RecyclerView on Android probably).

  • N_BauaN_Baua INMember ✭✭✭✭✭
    edited January 2018

    Hi @Pierre-ChristopheDus,

    As you said, FlowListView only fits your requirement,

    What you would require to do is modify OnSizeRequest which imposes the heightConstraint for each cell.
    I know its bit tedious to induce that manually, however that's the best what you get.

    Another option could be inside a scrollview, use relative layout and place grids (with single column but 4 rows with each * height) next to each other in a way that every even number is placed next(to right of) previous grid and every odd number grid is placed to the bottom of previous ODD grid.

    With this approach you only need to worry about each grid's width, height will be automatically applied as per content.
    Caution: make sure you are not having toooooo long text content. else it may not look good as it looks in your preview.

    Hope it helps.
    --N Baua

  • Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

    Thanks for your feedbacks guys.
    Finally I've chosen to use a **Repeater **control, like this one.

    I don't know if it's the better choice regards to the performances, but it works, and the rendering is close to my needs.

    The last problem concerns the size of the image: I would like to get a "square" image, but I don't see how to achieve this. I don't use HeightRequest, as the Image's width is determinated by the main Grid's columns.

    My XAML looks like this:

        <ScrollView>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.6*" />
                    <ColumnDefinition Width="0.4*" />
                </Grid.ColumnDefinitions>
                <!-- Rep.1 -->
                <tabletControls:Repeater  x:Name="LeftRepeater"
                                          Grid.Column="0"
                                          Margin="10">
                    <tabletControls:Repeater.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Vertical" >
                                    <StackLayout Grid.Row="0">
                                        <ffil:CachedImage Source="{Binding Icon}" 
                                                          Aspect="AspectFit"/>
                                    </StackLayout>
                                    ...
                                </StackLayout>      
                            </ViewCell>
                        </DataTemplate>
                    </tabletControls:Repeater.ItemTemplate>
                </tabletControls:Repeater>
    
    
                <!-- Rep.2 -->
                ...
            </Grid>
        </ScrollView>
    

    And I get this rendering:

    I already tried to play with Aspect (AspectFill, AspectFit, Fill) or VerticalOptions/HorizontalOptions, without any result...

    Is it possible to achieve the expected result without specify an HeightRequest? Are there other options?

Sign In or Register to comment.