Is it possible to make overlapping cells in ListView

HNSHNS DEMember ✭✭

Hey guys, I have a layout that should look like the one attached.

I achieved this with a grid within a scrollview and columns for the numbers (time) and the item-blocks.

This is probably not the best way, but it's working. The problem is: the StackLayouts in the AbsoluteLayout should be binded and generated dynamically. So I'd like to use a ListView there, but the items have to be positioned in an absolute way so overlapping is possible.
Is this even possible or is there any better way?

My simplified code for this view

  <ScrollView Padding="10,0,0,0">
      <Grid ColumnSpacing="0">
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="25" />
              <ColumnDefinition Width="1" />
              <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <StackLayout Spacing="10" Padding="0,0,0,10" Grid.Row="0" Grid.Column="0">
              <Label Text="00" />
              ...
          </StackLayout>
          <BoxView Grid.Row="0" Grid.Column="1" VerticalOptions="FillAndExpand" WidthRequest="1"
                   BackgroundColor="Gray" />
          <AbsoluteLayout Grid.Row="0" Grid.Column="2">

              <StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutBounds="0,30,1,15"
                           AbsoluteLayout.LayoutFlags="WidthProportional" HorizontalOptions="FillAndExpand"
                           BackgroundColor="Red">
                  <Label Text="01:00" FontSize="14" TextColor="White" HorizontalOptions="Start" />
                  <Label Text=" - " FontSize="14" TextColor="White" VerticalOptions="Start"
                         HorizontalOptions="Start" />
                  <Label Text="01:30" FontSize="14" TextColor="White" HorizontalOptions="Start" />
              </StackLayout>
              ....
          </AbsoluteLayout>
      </Grid>
  </ScrollView>

Posts

  • JohnHardmanJohnHardman GBUniversity mod
    edited August 2016

    @HNS - Do you want it to look exactly like that image, or do you want overlapping appointments/events shown as columns side by side within the day view? If the former, what would it look like if you had three meetings with 03:00 - 04:00 (I know it shouldn't happen in practice, but in reality I've worked places where people book things in your calendar without any consideration for what is already there)?

    In terms of whether this is possible using data binding, I think the answer will be yes, but it will be fiddly. I'm assuming you will want overlapping columns in the following.

    If using ListView and MVVM, you will need to have your View Model create a data structure that provides enough information for each ViewCell to present the View that you want, including generating the position information required for overlapping columns in such a way that consecutive ViewCells have the columns consistent. To do this, you will almost certainly need to build a custom control for presenting in the ViewCell, with that custom control being able to handle collections of columns using data binding.

    The key to doing this will be the algorithm for identifying where columns are required and generating the position information consistently. The custom control will be dependent on getting that algorithm and the resultant data structures correct. A bit fiddly I think.

  • nikkanikka USMember ✭✭

    @HNS sorry, I cannot see how the cells in the image are overlapping.

  • HNSHNS DEMember ✭✭

    @NikolozGamkrelidze sorry, i thought it would be clear because of the labels. The red box "04:00 - 05:00" is over the green box "03:00 - 06:00". I wanted to have this result quickly, so I decided to do it without borders of the boxes.

    @JohnHardman I'd say in my case the look in the image is enough. What you are saying is truly right, but normally there is just one overlapping another and this should be rarely the case, so overlapping rows are fine. (it's just for saving working time)
    But how can I position the ViewCells? Aren't they "fixed"? If I create a DataTemplate for the ViewCell with my Boxlayout and AbsoluteLayout LayoutBounds it show one underneath the other.

  • JohnHardmanJohnHardman GBUniversity mod
    edited August 2016

    @HNS - Can you post the image again pls. The software that is used for the forums is no longer showing it for me (even when logged off). The below is based on my recollection/understanding of what I think you want, without being able to see the image ;-)

    If I create a DataTemplate for the ViewCell with my Boxlayout and AbsoluteLayout LayoutBounds it show one underneath the other.

    Yes, you will have to do extra work within your DataTemplate code. Whilst each hour is a fixed height, your DataTemplate will need to show more than one activity within the same hour block. This is why your ViewModel will get a bit fiddly - rather than the ViewModel providing details of one activity, it will want to provide details of one hour. Depending on what you data Model looks like, the ViewModel will need to amalgamate data from more than one activity to create the information needed for one hour. If your ListView is permitting selection of cells, it will be selecting one hour at a time, rather than one activity at a time, so if you want to interact with activities by tapping on them, you will need to handle this yourself in your view.

  • HNSHNS DEMember ✭✭
    edited August 2016

    @JohnHardman Ah I think I understand what you are suggesting and it sounds in fact fiddly, but this is definitely interesting :)
    To be honest i don't know much about custom renderers yet, but is it possible to layout the ListView, that it's just an AbsoluteLayout within a ScrollView so the cells can be positioned by using LayoutBounds, like in my code example?

    And of course here is the image again

  • XnainaXnaina USMember ✭✭✭

    @HNS First set property HasUnevenRows = true on your list view then set height of your customcell.

  • JohnHardmanJohnHardman GBUniversity mod

    @HNS - It sounds like you won't have lots of data to display for any one day, so you could probably avoid using ListView altogether (I use ListView for similar things as it provides caching strategies for when there is lots of data).

    If avoiding ListView, you will want a ScrollView, but what sort of Layout you use inside the ScrollView is harder to say. My preference is to use a Grid. There are some gotchas around sizing of Grids in ViewCells, but I don't recall having problems putting a Grid inside a ScrollView. You might want to check in Bugzilla just in case.

    If avoiding ListView, I recommend creating a prototype with the maximum amount of data you are likely to have for one day, and see what the performance is like on a low-end Android device and on a Windows 10 phone. In my experience, performance on iOS will be better than both of those.

  • HNSHNS DEMember ✭✭

    @JohnHardman you are right. I thought about this before, but I'd have to write in the code behind file, which I tried to avoid.
    But yes, my solution now is to generate the StackLayout containers dynamically in the code behind file every time the corresponding property has changed.

  • QuakeulfQuakeulf NOMember ✭✭✭
Sign In or Register to comment.