Category / Section
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.
C#
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>
