Articles in this section
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);
    }
}

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied