How to remove Expander (SfExpander) from ItemTemplate of Xamarin.Forms (SfListView)

4 mins read

You can load the SfExpander in the ItemTemplate of SfListView and remove the expander at run time by updating the ListView collection in Xamarin.Forms.

The Commands defined in the ViewModel are used to customize the Expander and delete the same using the Remove method.

public class ViewModel
{
    public Command<object> ReadCommand { get; set; }
    public Command<object> DeleteCommand { get; set; }
 
    public ViewModel()
    {
        ReadCommand = new Command<object>(OnReadClicked);
        DeleteCommand = new Command<object>(OnDeleteClicked);
        GenerateSource();
    }
 
    private void OnDeleteClicked(object obj)
    {
        var expanderItem = obj as InboxInfo;
        this.InboxInfo.Remove(expanderItem);
    }

    private void OnReadClicked(object obj)
    {
        var expanderItem = obj as InboxInfo;
        expanderItem.FontStyle = FontAttributes.None;
        expanderItem.IsExpanded = false;
    }
}

XAML

Loaded the SfExpander to the SfListView.ItemTemplate. ViewModel commands bound to the Button.Command and set BindingContext as the CommandParameter.

<sflistView:SfListView x:Name="listView" ItemsSource="{Binding InboxInfo}" AutoFitMode="DynamicHeight" ItemSpacing="1" BackgroundColor="LightGray">
    <sflistView:SfListView.ItemTemplate>
        <DataTemplate>
            <expander:SfExpander HeaderIconPosition="Start" HeaderBackgroundColor="White" IsExpanded="{Binding IsExpanded}">
                <expander:SfExpander.Header>
                    <Grid Padding="10,0,0,0" HeightRequest="70">
                        ...
                        <Grid HorizontalOptions="StartAndExpand">
                            <Label LineBreakMode="NoWrap" TextColor="#474747" FontSize="18" FontAttributes="{Binding FontStyle}" Text="{Binding Title}" VerticalOptions="Center"/>
                            <Label LineBreakMode="NoWrap" TextColor="#474747" Grid.Row="1" Text="{Binding Subject}" FontSize="16" VerticalOptions="Center"/>
                        </Grid>
                        <Label TextColor="#474747" HorizontalOptions="EndAndExpand" Padding="5,10,5,10" Grid.Column="1" LineBreakMode="NoWrap" Text="{Binding Date}" FontSize="12"/>
                    </Grid>
                </expander:SfExpander.Header>
                <expander:SfExpander.Content>
                    <Grid HeightRequest="100" >
                        ...
                        <Label TextColor="#474747" Text="{Binding Description}" VerticalOptions="Center"/>
                         <Grid Grid.Row="1">
                              <Button x:Name="save" Text="Mark as read" Command="{Binding Path=BindingContext.ReadCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" FontSize="15" BackgroundColor="#28abb9" CornerRadius="5" TextColor="White"/>
                              <Button x:Name="delete" Text="Delete" Command="{Binding Path=BindingContext.DeleteCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" Grid.Column="1" FontSize="15" BackgroundColor="#ea2c62" CornerRadius="5" TextColor="White"/>
                        </Grid>
                    </Grid>
                </expander:SfExpander.Content>
            </expander:SfExpander>
        </DataTemplate>
    </sflistView:SfListView.ItemTemplate>
</sflistView:SfListView>

View sample in GitHub

Demo image to show remove the Expander in Xamarin.Forms.

Did you find this information helpful?

Yes

Did not find the solution Contact Support

Comments (0)

Please to leave a comment

How to remove Expander (SfExpander) from ItemTemplate of Xamarin.Forms (SfListView)

Access denied