Category / Section
How to swipe item in Xamarin.Forms Accordion (SfAccordion)
1 min read
You can swipe the AccordionItem by integrating the Xamarin.Forms SwipeView in Xamarin.Forms SfAccordion.
XAML
Define the SwipeView in the AccordionItem.Header and AccordionItem.Content to swipe the items. You can also bind the Command to the SwipeItem.
<accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone">
<BindableLayout.ItemTemplate>
<DataTemplate>
<accordion:AccordionItem HeaderBackgroundColor="{Binding HeaderColor}">
<accordion:AccordionItem.Header>
<SwipeView BackgroundColor="Transparent">
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItem Text="Favourite" BackgroundColor="#98acf8" Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}"/>
</SwipeItems>
</SwipeView.LeftItems>
<Grid>
<Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/>
</Grid>
</SwipeView>
</accordion:AccordionItem.Header>
<accordion:AccordionItem.Content>
<Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0">
<Label Text="{Binding Description}" VerticalOptions="Center"/>
</Grid>
</accordion:AccordionItem.Content>
</accordion:AccordionItem>
</DataTemplate>
</BindableLayout.ItemTemplate>
</accordion:SfAccordion>
C#
Change the BackgroundColor of the HeaderBackgroundColor in the command execution handler.
public class ItemInfoRepository
{
public Command<object> FavouriteCommand { get; set; }
public ItemInfoRepository()
{
FavouriteCommand = new Command<object>(OnFavouriteClicked);
}
private void OnFavouriteClicked(object obj)
{
(obj as ItemInfo).HeaderColor = (obj as ItemInfo).HeaderColor == Color.Transparent ? Color.FromHex("#cee397") : Color.Transparent;
}
}
