Category / Section
How to Access Named Accordion Inside XAML DataTemplate in .NET MAUI?
16 mins read
Accessing a named SfAccordion control within a DataTemplate of a Popup can be achieved using a Behavior.
XAML
In the SfPopup’s ContentTemplate, a behavior is attached to the parent of the SfAccordion.
<Grid x:Name="popupGrid">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="showPopup"
Text="Bring Popup" />
<syncfusion:SfPopup x:Name="popup"
WidthRequest="400"
HeightRequest="400"
ShowFooter="False"
IsOpen="False"
Margin="{OnPlatform iOS='0,40,0,0'}">
<syncfusion:SfPopup.Behaviors>
<local:PopupBehavior/>
</syncfusion:SfPopup.Behaviors>
<syncfusion:SfPopup.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"
TextColor="Black"/>
<accordion:SfAccordion Grid.Row="1" x:Name="accordion" ExpandMode="MultipleOrNone" >
<accordion:SfAccordion.Items>
<accordion:AccordionItem>
<accordion:AccordionItem.Header>
<Grid>
<Label Margin="5" TextColor="#495F6E" Text="Cheese burger" HeightRequest="50" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Header>
<accordion:AccordionItem.Content>
<Grid Padding="10" BackgroundColor="#FFFFFF">
<Label TextColor="#303030" Text="Hamburger accompanied with melted cheese. The term itself is a portmanteau of the words cheese and hamburger. The cheese is usually sliced, then added a short time before the hamburger finishes cooking to allow it to melt." HeightRequest="100" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Content>
</accordion:AccordionItem>
<accordion:AccordionItem>
<accordion:AccordionItem.Header>
<Grid>
<Label Margin="5" TextColor="#495F6E" Text="Veggie burger" HeightRequest="50" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Header>
<accordion:AccordionItem.Content>
<Grid Padding="10" BackgroundColor="#FFFFFF">
<Label TextColor="#303030" Text="Veggie burger, garden burger, or tofu burger uses a meat analogue, a meat substitute such as tofu, textured vegetable protein, seitan (wheat gluten), Quorn, beans, grains or an assortment of vegetables, which are ground up and formed into patties." HeightRequest="100" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Content>
</accordion:AccordionItem>
<accordion:AccordionItem>
<accordion:AccordionItem.Header>
<Grid>
<Label Margin="5" TextColor="#495F6E" Text="Barbecue burger" HeightRequest="50" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Header>
<accordion:AccordionItem.Content>
<Grid Padding="10" BackgroundColor="#FFFFFF">
<Label TextColor="#303030" Text="Prepared with ground beef, mixed with onions and barbecue sauce, and then grilled. Once the meat has been turned once, barbecue sauce is spread on top and grilled until the sauce caramelizes." HeightRequest="100" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Content>
</accordion:AccordionItem>
<accordion:AccordionItem>
<accordion:AccordionItem.Header>
<Grid>
<Label Margin="5" TextColor="#495F6E" Text="Chili burger" HeightRequest="50" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Header>
<accordion:AccordionItem.Content>
<Grid Padding="10" BackgroundColor="#FFFFFF">
<Label TextColor="#303030" Text="Consists of a hamburger, with the patty topped with chili con carne." HeightRequest="50" VerticalTextAlignment="Center"/>
</Grid>
</accordion:AccordionItem.Content>
</accordion:AccordionItem>
</accordion:SfAccordion.Items>
</accordion:SfAccordion>
</StackLayout>
</ScrollView>
</DataTemplate>
</syncfusion:SfPopup.ContentTemplate>
</syncfusion:SfPopup>
</Grid>
C#
In ChildAdded event you will get the instance of Accordion.
public class Behavior : Behavior<StackLayout>
{
StackLayout? stackLayout;
SfAccordion? accordion;
Button? accordionButton;
bool flag;
protected override void OnAttachedTo(StackLayout bindable)
{
stackLayout = bindable;
accordionButton = bindable.FindByName<Button>("accordionButton");
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;
}
else if (e.Element is Button)
{
accordionButton = e.Element as Button;
if (accordionButton != null)
{
accordionButton.Clicked += Button_Clicked;
}
}
}
private void Button_Clicked(object? sender, EventArgs e)
{
//Method 2 : Get SfAccordion reference using FindByName
accordion = stackLayout.FindByName<SfAccordion>("accordion");
if (!flag)
{
Application.Current?.Windows[0]?.Page?.DisplayAlert("Information", "Accordion instance is obtained and Header Icon Position is changed", "Ok");
flag = true;
}
if (accordion.HeaderIconPosition == Syncfusion.Maui.Expander.ExpanderIconPosition.Start)
{
accordion.HeaderIconPosition = Syncfusion.Maui.Expander.ExpanderIconPosition.End;
}
else
{
accordion.HeaderIconPosition = Syncfusion.Maui.Expander.ExpanderIconPosition.Start;
}
}
protected override void OnDetachingFrom(StackLayout bindable)
{
if (accordionButton != null && stackLayout != null)
{
accordionButton.Clicked -= Button_Clicked;
stackLayout.ChildAdded -= StackLayout_ChildAdded;
}
accordion = null;
accordionButton = null;
stackLayout = null;
base.OnDetachingFrom(bindable);
}
}
C#
You can also get the Popup using FindByName method from Parent element.
public class PopupBehavior : Behavior<SfPopup>
{
SfPopup? popupLayout;
Button? showPopup;
Grid? grid;
protected override void OnAttachedTo(SfPopup bindable)
{
popupLayout = bindable;
popupLayout = bindable.FindByName<SfPopup>("popup");
showPopup = bindable.FindByName<Button>("showPopup");
if (showPopup != null)
{
showPopup.Clicked += Button_Clicked;
}
base.OnAttachedTo(bindable);
}
private void Button_Clicked(object? sender, EventArgs e)
{
popupLayout?.Show();
}
protected override void OnDetachingFrom(SfPopup bindable)
{
if (showPopup != null)
{
showPopup.Clicked -= Button_Clicked;
}
showPopup = null;
grid = null;
popupLayout = null;
base.OnDetachingFrom(bindable);
}
}
Download the complete sample from Github
Conclusion
I hope you enjoyed learning how to access a named Accordion inside a XAML DataTemplate in .NET MAUI SfAccordion.
You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
