How to expand a view when tap the listview item?
The ListView items can be expanded or shrunk based on the runtime content modifications. Use TapCommand to get data of a particular item. Pass the modified item index in the RefreshListViewItem method to resize the item.
XAML
<listView:SfListView x:Name="listView" AutoFitMode="Height" TapCommand="{Binding TappedCommand}" SelectionMode="Single" SelectionBackgroundColor="Transparent"
ItemsSource="{Binding contactsinfo}">
<listView:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Frame VerticalOptions="FillAndExpand" BackgroundColor="White" HorizontalOptions="FillAndExpand" HasShadow="True">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid RowSpacing="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ContactImage}"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="50"/>
<Grid Grid.Column="1"
RowSpacing="1"
Padding="10,0,0,0"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label LineBreakMode="NoWrap"
TextColor="#474747"
Text="{Binding ContactName}">
</Label>
<Label Grid.Row="1"
Grid.Column="0"
TextColor="#474747"
LineBreakMode="NoWrap"
Text="{Binding ContactNumber}">
</Label>
</Grid>
<Grid Grid.Row="0"
Grid.Column="2"
RowSpacing="0"
HorizontalOptions="End"
Padding="0,10,10,0">
</Grid>
</Grid>
</Grid>
<Grid IsVisible="{Binding IsVisible}" BackgroundColor="#d3d3d3">
<Grid Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout>
<Label Text="Employer Name" />
<Entry Text="{Binding ContactName}"/>
</StackLayout>
<StackLayout Grid.Column="1">
<Label Text="Employer Number" />
<Entry Text="{Binding ContactNumber}"/>
</StackLayout>
</Grid>
</Grid>
</StackLayout>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
C#
public partial class GroupingPage : ContentPage
{
public GroupingPage()
{
InitializeComponent();
viewModel.ViewModelListView = listView;
}
}
public class ContactsViewModel:INotifyPropertyChanged
{
private Contacts tappedItem;
public SfListView viewModelListView;
public ObservableCollection<Contacts> contactsinfo { get; set; }
private Command<Syncfusion.ListView.XForms.ItemTappedEventArgs> tappedCommand;
public Command<Syncfusion.ListView.XForms.ItemTappedEventArgs> TappedCommand
{
get { return tappedCommand; }
set { tappedCommand = value; }
}
public SfListView ViewModelListView
{
get { return viewModelListView; }
set
{
viewModelListView = value;
RaisedOnPropertyChanged("ViewModelListView");
}
}
private void TappedCommandMethod(Syncfusion.ListView.XForms.ItemTappedEventArgs obj)
{
//To expand or collapse only one item at a time.
var itemData = obj.ItemData as Contacts;
if (tappedItem == null)
{
itemData.IsVisible = true;
tappedItem = itemData;
}
else
{
if (contactsinfo.Contains(tappedItem) && tappedItem.IsVisible)
{
var previousitemIndex = ViewModelListView.DataSource.DisplayItems.IndexOf(tappedItem);
contactsinfo.FirstOrDefault(x => x.ContactName == tappedItem.ContactName).IsVisible = false;
Device.BeginInvokeOnMainThread(() => { ViewModelListView.RefreshListViewItem(previousitemIndex, previousitemIndex, false); });
}
if (itemData != tappedItem)
{
tappedItem = itemData;
contactsinfo.FirstOrDefault(x => x.ContactName == tappedItem.ContactName).IsVisible = true;
}
else
tappedItem = null;
}
if (itemData != null)
Device.BeginInvokeOnMainThread(() => { ViewModelListView.RefreshListViewItem(ViewModelListView.DataSource.DisplayItems.IndexOf(itemData), ViewModelListView.DataSource.DisplayItems.IndexOf(itemData), false); });
}
public ContactsViewModel()
{
TappedCommand = new Command<object>(TappedCommandMethod);
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisedOnPropertyChanged(string _PropertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
}
}
}
Screenshot:

Click here to download the sample.