Category / Section
How to access a named Accordion inside a XAML DataTemplate in Xamarin.Forms (SfAccordion)?
2 mins read
You can access the named SfAccordion defined inside DataTemplate of PopupLayout by using Behavior.
XAML
In PopupLayout’s PopupView, behaviour added to parent of Accordion.
<sfPopup:SfPopupLayout x:Name="popupLayout" Margin="{OnPlatform iOS='0,40,0,0'}"> <sfPopup:SfPopupLayout.Behaviors> <local:PopupBehavior/> </sfPopup:SfPopupLayout.Behaviors> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView WidthRequest="400" HeightRequest="400" ShowFooter="False"> <sfPopup:PopupView.ContentTemplate> <DataTemplate> <ScrollView BackgroundColor="#EDF2F5" Grid.Row="1"> <StackLayout> <StackLayout.Behaviors> <local:Behavior/> </StackLayout.Behaviors> <Button HeightRequest="50" Text="Change Accordion Header Icon Position" x:Name="accordionButton" BackgroundColor="LightGray"/> <syncfusion:SfAccordion Grid.Row="1" x:Name="accordion" ExpandMode="MultipleOrNone" > <syncfusion:SfAccordion.Items> <syncfusion:AccordionItem> ... </syncfusion:AccordionItem> <syncfusion:AccordionItem> ... </syncfusion:AccordionItem> </syncfusion:SfAccordion.Items> </syncfusion:SfAccordion> </StackLayout> </ScrollView> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <Grid x:Name="popupGrid"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button x:Name="ShowPopup" Text="Bring Popup" /> </Grid> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout>
C#
In ChildAdded event you will get the instance of Accordion.
public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfAccordion accordion; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfAccordion) { //Method 1 : Get SfAccordion reference using StackLayout.ChildAdded Event accordion = e.Element as SfAccordion; } } protected override void OnDetachingFrom(StackLayout bindable) { stackLayout.ChildAdded -= StackLayout_ChildAdded; accordion = null; stackLayout = null; base.OnDetachingFrom(bindable); } }
C#
You can also get the Accordion using FindByName method from Parent element.
public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfAccordion accordion; Button button; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } private void Button_Clicked(object sender, EventArgs e) { //Method 2 : Get SfAccordion reference using FindByName accordion = stackLayout.FindByName<SfAccordion>("accordion"); App.Current.MainPage.DisplayAlert("Information", "Accordion instance is obtained and Header Icon Position is changed", "Ok"); if (accordion.HeaderIconPosition == Syncfusion.XForms.Expander.IconPosition.Start) { accordion.HeaderIconPosition = Syncfusion.XForms.Expander.IconPosition.End; } else { accordion.HeaderIconPosition = Syncfusion.XForms.Expander.IconPosition.Start; } } protected override void OnDetachingFrom(StackLayout bindable) { button.Clicked -= Button_Clicked; stackLayout.ChildAdded -= StackLayout_ChildAdded; accordion = null; button = null; stackLayout = null; base.OnDetachingFrom(bindable); } }