Category / Section
How to bind command in Xamarin.Forms Accordion (SfAccordion)
2 mins read
You can bind the ViewModel commands to content of AccordionItem in Xamarin.Forms SfAccordion.
C#
ViewModel command to show the Accordion details.
namespace AccordionXamarin { public class ItemInfoRepository { public Command<object> ShowDetailsCommand { get; set; } public ItemInfoRepository() { ShowDetailsCommand = new Command<object>(OnShowDetailClicked); } private void OnShowDetailClicked(object obj) { var item = obj as ItemInfo; App.Current.MainPage.DisplayAlert(item.Name, item.Description, "Ok"); } } }
XAML
Binding the ViewModel command to the ImageButton that is loaded inside the content of AccordionItem.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AccordionXamarin" xmlns:accordion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms" x:Class="AccordionXamarin.MainPage"> <ContentPage.BindingContext> <local:ItemInfoRepository x:Name="viewModel"/> </ContentPage.BindingContext> <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem> <accordion:AccordionItem.Header> <Grid Padding="5,0,0,0" HeightRequest="50"> <Label Text="{Binding Name}" FontSize="20" /> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="LightGray" Padding="5,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="45" /> </Grid.ColumnDefinitions> <Label Text="{Binding Description}" VerticalOptions="Center"/> <Grid Grid.Column="1" Padding="10" BackgroundColor="LightGray"> <ImageButton HeightRequest="30" WidthRequest="30" Source="Details.png" Command="{Binding Path=BindingContext.ShowDetailsCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}"/> </Grid> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> </ContentPage>