How to Perform Swiping Functionality in .NET MAUI Accordion (SfAccordion)?
You can perform a swiping action on the AccordionItem by integrating the .NET MAUI SwipeView in .NET MAUI Accordion.
Define the SwipeView in the AccordionItem.Header and AccordionItem.Content and bind the Command to the SwipeItem.
<accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone">
<BindableLayout.ItemTemplate>
<DataTemplate>
<accordion:AccordionItem HeaderBackground="{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>
Change the BackgroundColor of the Header 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;
}
}
Output
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to perform swiping functionality in .NET MAUI Accordion.
You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI Accordion example to understand how to create and manipulate data.
For current customers, 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.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!