Articles in this section
Category / Section

How to autofit the content in Xamarin.Forms listview?

1 min read

You can autofit the listview item when loading ItemTemplate through ItemTemplateSelector based on the property value changed at runtime in Xamarin ListView. This can be done by using the RefreshListViewItem method.

Refer to the following code for loading listveiwitem with ItemTemplate based on the property value.

protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{            
    var bookInfo = (item as BookInfo);
    if (bookInfo.IsSelected)
        return Template1;
    else
        return Template2;
}

 

Refer to the following code for changing property value in ViewModel.

private void OnTapItem(object obj)
{
    var item = (obj as Button).BindingContext as BookInfo;
    item.IsSelected = !item.IsSelected;                 
}

 

Here, refreshing the listview item in the PropertyChanged event when changing the property value from ViewModel.

public class ListViewBehavior : Behavior<SfListView>
{
    SfListView listView;
    protected override void OnAttachedTo(SfListView bindable)
    {
        base.OnAttachedTo(bindable);
        listView = bindable as SfListView;
        listView.ItemAppearing += OnItemAppearing;
        listView.ItemDisappearing += OnItemDisappearing;
    }
    private void OnItemAppearing(object sender, ItemAppearingEventArgs e)
    {
        (e.ItemData as BookInfo).PropertyChanged += OnPropertyChanged;
    }
    private void OnPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsSelected")
        {
            var itemIndex = listView.DataSource.DisplayItems.IndexOf(sender);
            if (Device.RuntimePlatform != Device.macOS)
                Device.BeginInvokeOnMainThread(() => { listView.RefreshListViewItem(itemIndex, itemIndex, false); });
        }
    }
    private void OnItemDisappearing(object sender, ItemDisappearingEventArgs e)
    {
        (e.ItemData as BookInfo).PropertyChanged -= OnPropertyChanged;
    }
 
    protected override void OnDetachingFrom(SfListView bindable)
    {
        base.OnDetachingFrom(bindable);
        listView.ItemAppearing -= OnItemAppearing;
        listView.ItemDisappearing -= OnItemDisappearing;
    }
}

 

Output:

Template1 as ItemTemplate when loading listview item.

Template1 as the ItemTemplate

Template2 as ItemTemplate when clicking Show More button which auto fit the content.

Template2 as the ItemTemplate

Click here to download the sample.

 

Conclusion

I hope you enjoyed learning on how to autofit the content based on the property change in xamarin.forms listview.

You can refer to our Xamarin ListView featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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