We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add expand or collapse icon in group header of SfListView?

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: February 28, 2017 |
Last Revised Date: November 15, 2018

SfListView provides support to expand or collapse the group when tapped on group header item by setting AllowGroupExpandCollapse as True.

 

And also allows to show the expand and collapse state of the group with icon in the group header by customizing the GroupHeaderTemplate and using the IsExpand property, which determines whether the group is expanded or collapsed.

 

XAML

 

You can switch the expand or collapse group icon based on IsExpand property using the BoolToImageConverter converter.

 

C#

 

The below code illustrates to define the GroupHeaderTemplate in code behind,

 

 

The below screenshots show the Group Header icon is loaded when expanded and collapsed.


Click here to download the sample. Click here to download the sample which is created completely in MVVM pattern.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Santhosh
Nov 24, 2017

Not able to run the sample attached with this. 

Packages are missing, Getting Unhandled exception.

System.MissingMethodException: Method 'Xamarin.Forms.Device.get_RuntimePlatform' not found.

11-24 18:33:05.452 I/MonoDroid(26562):   at Syncfusion.ListView.XForms.ItemGenerator.CreateGroupHeaderItem (System.Int32 rowindex, System.Object data) [0x00034] in <3db3fff058cc40c88bab504c4db2a7cf>:0 


Reply
Muthu Kumaran Gnanavinayagam [Syncfusion]
Nov 27, 2017

Hi Santhosh,

 

Sorry for the inconvenience.

 

We have upgraded the Xamarin.Forms version to v.2.4.0.280 in our SfListView source to avoid the source level warnings. So we recommend you to use Xamarin.Forms version(>=v.2.4.0.280) in the sample to resolve the exception. We have also updated the Xamarin.Forms version in our KB sample.

 

Please let us know if you require further assistance.

 

Regards,

G.Muthu Kumaran.

Reply
Michael
Mar 21, 2021

An alternative approach can be to use the whole GroupResult to for example exclude other levels from having any icon XAML

<Image x:Name="NormalImage" HorizontalOptions="EndAndExpand" Margin="10,0,10,0"
       IsVisible="{Binding Key, Converter={StaticResource GroupHeaderVisibilityConverter}, FallbackValue=false, TargetNullValue=false}">
    <Image.Source>
        <FontImageSource Color="{DynamicResource TextPrimaryColor}"
             Glyph="{Binding ., Converter={StaticResource GroupToExpandFontConverter}}" 
             FontFamily="{DynamicResource BoxPlannerFonts}"
             Size="Default"
     />
</Image.Source>

And the converter Code `public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value == null) return null; try { GroupResult group = (value as GroupResult); if (group.Level == 2) return null; return group.IsExpand ? Resources.FontIcons.Expand : Resources.FontIcons.Collapse; } catch { }

        return null;
    }`
Reply
Lakshmi Natarajan [Syncfusion]
Mar 22, 2021

Hi Michael,

We are very glad to have your valuable suggestion. Please let us know if you need any other assistance. As always we will be happy to assist you.

Regards, Lakshmi Natarajan

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile