CODEWITHSUNDEEP
xamarinxamarin.formsexpandablelistviewlistviewitem
user3932639
user3932639

Reputation: 21

Expandable ListView with different child items in Xamarin forms

any suggestions for how to implement expandable list view with different child views in Xamarin forms. Can anyone please help me for this?

Upvotes: 0

Views: 3788

Answers (2)

Sayo Komolafe
Sayo Komolafe

Reputation: 1008

XAML

   <ListView ItemsSource="{Binding YOUR_SOURCE}" SeparatorVisibility="Default" 
             HasUnevenRows="True" ItemSelected="MyList_ItemSelected"> 
      <ListView.ItemTemplate>
          <DataTemplate>
             <ViewCell>
                <Frame>
                   <StackLayout>
                      <Label Text="My Heading"/>
                   </StackLayout>

                   <StackLayout x:Name="moreItemStack" Orientation="Horizontal" 
                                IsVisible="false">
                       <Label Text="child 1"/>
                       <Label Text="child 2"/>
                   </StackLayout>
               </Frame>
            </ViewCell>
         </DataTemplate>
      </ListView.ItemTemplate>
    <ListView>

C#

  private void MyList_ItemSelected(object sender, SelectedItemChangedEventArgs e)
  {
      var myItem = e.SelectedItem; 
      moreItemStack.IsVisible = true;          
  }

@user3932639 There you go

NOTE: This was written for clarification, it has been tested.

Upvotes: 1

Michał Żołnieruk
Michał Żołnieruk

Reputation: 2105

To use different template for different cells you want to use DataTemplateSelector, it's documented here: Creating a Xamarin.Forms DataTemplateSelector

First define it in separate class:

public class PersonDataTemplateSelector : DataTemplateSelector
{
  public DataTemplate ValidTemplate { get; set; }
  public DataTemplate InvalidTemplate { get; set; }

  protected override DataTemplate OnSelectTemplate (object item, BindableObject container)
  {
    return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;
  }
}

Then add it to your page's resources:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Selector;assembly=Selector" x:Class="Selector.HomePage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="validPersonTemplate">
                <ViewCell>
                   ...
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="invalidPersonTemplate">
                <ViewCell>
                   ...
                </ViewCell>
            </DataTemplate>
            <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
                ValidTemplate="{StaticResource validPersonTemplate}"
                InvalidTemplate="{StaticResource invalidPersonTemplate}" />
        </ResourceDictionary>
    </ContentPage.Resources>
  ...
</ContentPage>

And then just use it in your list:

<ListView x:Name="listView" ItemTemplate="{StaticResource personDataTemplateSelector}" />

To have a possibility to expand/hide the cells, you need to:

  • add a property IsExpanded to the ViewModel of specific list item
  • change it to true/false on the ItemSelected event of your list
  • bind the visibility of the view you want to hide/expand to the value of IsExpanded

Upvotes: 2

Related Questions