Articles in this section

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:

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)
Access denied
Access denied