Articles in this section
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:

Employ Name-Number

Click here to download the sample.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied