Category / Section
How to expand a view when tap the listview item?
2 mins read
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.