Expandable ListView with different child items in Xamarin forms - xamarin

Question

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

Answer 1

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

Answer 2

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.