Xamarin Forms - Multiple DataTemplate ListView

Question

From my previous experience and some research on the web, I don't know if it's possible to have the following behavior:

<ContentPage.Content>
  <AbsoluteLayout BackgroundColor="#2F767B">
    <AbsoluteLayout x:Name="ScreenLayoutAdapter" BackgroundColor="#235A5E"
                    AbsoluteLayout.LayoutFlags="All">
      <AbsoluteLayout.LayoutBounds>
        <OnPlatform x:TypeArguments="Rectangle" Android="0, 0, 1, 1" iOS="1, 1, 1, 0.975" WinPhone="0, 1, 1, 1"/>
      </AbsoluteLayout.LayoutBounds>

      <ListView x:Name="ListViewCourses" BackgroundColor="Transparent" RowHeight="90"
              AbsoluteLayout.LayoutBounds="0.5,1,0.9,0.9"
              AbsoluteLayout.LayoutFlags="All">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <AbsoluteLayout Margin="2">

              <!-- Your design for the cell template -->

              </AbsoluteLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

    </AbsoluteLayout>
  </AbsoluteLayout>
</ContentPage.Content>

In the c# side, I then have a ObservableCollection<Item> that I bind with the ListViewCourses.

But now my question is:

When I touch an item, how can I change of DataTemplate cell?

I mean, it's a list of items but when I touch one, I want that the cell grows up and displays more information, about the item selected.

If I have to bring more information to make you understand, tell me

Thank in advance ! :)

Answer 1

What you could do, instead of changing the DataTemplate of a single item, is have all of the controls containing the extra information that you want to show, be set to IsVisible = false and then when it is clicked, set IsVisible = true on all the controls and also call ListView.ForceLayout() to force the ViewCell to get redrawn.

Finally, make sure ListView.HasUnevenRows = true or else the ViewCell will not change size.

Alternatively, you may be able to add the controls containing extra information to the ViewCell when it is selected, it may or may not be slower/faster depending on the number of items in the ListView, the amount of extra controls you are adding, and whether you need to query the DB or a service for that extra information.

Let me know if you have any questions/issues.

Edit: Actually, you will want to call ViewCell.ForceUpdateSize(), info here, in order to change the size of the ViewCell once selected. You also may need to store that ViewCell instance in a class level variable so that you can shrink it back down when the user clicks a different ViewCell in the list.

Edit #2: One last thing I have run into, is that on iOS, if you have enabled ListViewCachingStrategy.RecycleElement on your ListView, you will most likely not see any change in the ViewCell after making controls visible and calling ForceUpdateSize(). This might have something to do with the last paragraph here, but I am not sure how to properly fix/get around it at this time.

Edit #3: For example you might do something like this:

<ViewCell>

     <!-- Use ListView.ItemTapped instead of the TapGestureRecognizer below -->
    <!-- <ViewCell.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnViewCellTapped"/>
    </ViewCell.GestureRecognizers> -->
    <StackLayout>
        <!-- Main info displayed by default -->
        <StackLayout StyleId="DefaultStackLayout">
            <Label Text="{Binding ItemName}"/>
            <Label Text="{Binding ItemDates}"/>
            <Label Text="{Binding ItemCredits}"/>
        </StackLayout>

        <!-- Extra info displayed upon selection -->
        <StackLayout StyleId="ExtraStackLayout"
                     IsVisible="False">
            <Label Text="{Binding ItemBuilding}"/>
            <Label Text="{Binding ItemTeacher}"/>
            <Label Text="{Binding ItemHours}"/>
        </StackLayout>
    </StackLayout>
</ViewCell>

Then when the user selects the cell, you would need to do something like this:

using System.Linq;

...

private void OnViewCellTapped(object sender, EventArgs args) {}
    tapCount++;
    ViewCell viewCellSender = (ViewCell)sender;

    StackLayout rootStack = (StackLayout)viewCellSender.View;

    StackLayout extraInfoStack = rootStack.Children.Where(stack => stack.StyleId == "ExtraStackLayout");
    extraInfoStack.IsVisible = true;

    viewCellSender.ForceUpdateSize();
}

I have not tested any of this or even attempted it before, so if the above does not work, I am confident that inserting the extraInfoStack element content once the ViewCell is clicked, will work. But give the above a try first. Obviously you will need to change the layouts if you want to use AbsoluteLayout and you will also need to change the OnViewCellTapped() casting code.

Edit #4: I usually try to steer clear of constant numbers for height and width values if possible but sometimes it is unavoidable. So for this all to work you are going to have to set ListView.HasUnevenRows = true and that means you will need to get rid of your ListView.RowHeight value completely since the rows need to be allowed to have variable height.

If at all possible, I would try to not set a constants height value, but if you absolutely cannot live without setting the height to a constants value, then you can probably give your ViewCell's inner AbsoluteLayout a HeightRequest of 120, but then you would need to change that value when the item is selected, after making your extra controls visible and before calling ViewCell.ForceUpdateSize(). Setting IsVisible to false is supposed to make it so that the control does not take up any space, so those extra controls should not mess with the sizing while they are hidden but I have never tried it myself.

If you run into issues, please let me know.