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); } }