2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
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> |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.