Articles in this section
Category / Section

How to access a named Expander inside a XAML DataTemplate in Xamarin.Forms (SfExpander)?

2 mins read

You can access the named SfExpander defined inside DataTemplate of PopupLayout by using Behavior.

XAML

In PopupLayout’s PopupView, behaviour added to parent of Expander.

<sfPopup:SfPopupLayout x:Name="popupLayout">
    <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 Text="Expand/Collapse Second Expander" x:Name="expanderButton" BackgroundColor="LightGray"/>
                            <syncfusion:SfExpander x:Name="firstExpander">
                                    <syncfusion:SfExpander.Header>
                                        ...
                                    </syncfusion:SfExpander.Header>
                                    <syncfusion:SfExpander.Content>
                                        ...
                                    </syncfusion:SfExpander.Content>
                                </syncfusion:SfExpander>
 
                                <syncfusion:SfExpander x:Name="secondExpander">
                                    <syncfusion:SfExpander.Header>
                                        ...
                                    </syncfusion:SfExpander.Header>
                                    <syncfusion:SfExpander.Content>
                                        ...
                                    </syncfusion:SfExpander.Content>
                                </syncfusion:SfExpander>
                            </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 Expander.

public class Behavior : Behavior<StackLayout>
{
    StackLayout stackLayout;
    SfExpander expander;
    protected override void OnAttachedTo(StackLayout bindable)
    {
        stackLayout = bindable;
        stackLayout.ChildAdded += StackLayout_ChildAdded; ;
    }
    private void StackLayout_ChildAdded(object sender, ElementEventArgs e)
    {
        if (e.Element is SfExpander)
        {
            //Method 1 : Get SfExpander reference using StackLayout.ChildAdded Event
            expander = e.Element as SfExpander;
        }
    }
 
    protected override void OnDetachingFrom(StackLayout bindable)
    {
        stackLayout.ChildAdded -= StackLayout_ChildAdded;
        expander = null;
        stackLayout = null;
        base.OnDetachingFrom(bindable);
    }
}

C#

You can also get the Expander using FindByName method from Parent element.

public class Behavior : Behavior<StackLayout>
{
    StackLayout stackLayout;
    SfExpander expander;
    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 SfExpander reference using FindByName
        expander = stackLayout.FindByName<SfExpander>("secondExpander");
        App.Current.MainPage.DisplayAlert("Information", "Second Expander instance is obtained and Expanded/Collapsed", "Ok");
        if (expander.IsExpanded)
        {
            expander.IsExpanded = false;
        }
        else
        {
            expander.IsExpanded = true;
        }
    }
 
    protected override void OnDetachingFrom(StackLayout bindable)
    {
        button.Clicked -= Button_Clicked;
        stackLayout.ChildAdded -= StackLayout_ChildAdded;
        expander = 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