how-to-access-the-expander-instance-inside-the-data-template-in-.net-maui-expander
This example demonstrates about how to access the SfExpander control added inside the .NET MAUI SfPopupLayout.ContentTemplate(DataTemplate).
You can access a named SfExpander defined inside DataTemplate of SfPopup using Behavior.
XAML
In SfPopup, behavior added to parent of SfExpander.
<StackLayout>
<StackLayout.Behaviors>
<local:PopupBehavior/>
</StackLayout.Behaviors>
<Button Text="open popup" VerticalOptions="Start" HorizontalOptions="Center"/>
<popup:SfPopup x:Name="popup" ShowFooter="False" ShowHeader="False" HeightRequest="400" WidthRequest="400">
<popup:SfPopup.ContentTemplate>
<DataTemplate>
<ScrollView>
<StackLayout>
<StackLayout.Behaviors>
<local:Behavior/>
</StackLayout.Behaviors>
<Button Text="Expand/collapse" x:Name="expanderButton"/>
<expander:SfExpander x:Name="firstExpander">
<expander:SfExpander.Header>
<Grid>
<Label VerticalTextAlignment="Center" HeightRequest="40" Text="Invoice Date"/>
</Grid>
</expander:SfExpander.Header>
<expander:SfExpander.Content>
<Grid>
<Label Text="11.03 AM, 15 January 2019" VerticalTextAlignment="Center"/>
</Grid>
</expander:SfExpander.Content>
</expander:SfExpander>
<expander:SfExpander x:Name="secondExpander">
<expander:SfExpander.Header>
<Grid>
<Label Text="Payment Details" VerticalTextAlignment="Center" HeightRequest="40"/>
</Grid>
</expander:SfExpander.Header>
<expander:SfExpander.Content>
<Grid Padding="10,10,10,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Card Payment" TextColor="#303030" HeightRequest="40"/>
<Label Grid.Row="1" Text="Third-Party coupons"
HeightRequest="40"/>
<Label Grid.Row="2" FontAttributes="Bold" HeightRequest="40"
Text="Total Amount Paid" />
<Label Grid.Column="1" HorizontalTextAlignment="End"
Text="$31,000.00" HeightRequest="40"/>
<Label Grid.Row="1" Grid.Column="1" Text="$5,000.00" HeightRequest="40"
HorizontalTextAlignment="End" />
<Label Grid.Row="2" Grid.Column="1" FontAttributes="Bold"
HorizontalTextAlignment="End" Text="$36,000.00"
HeightRequest="40"/>
</Grid>
</expander:SfExpander.Content>
</expander:SfExpander>
</StackLayout>
</ScrollView>
</DataTemplate>
</popup:SfPopup.ContentTemplate>
</popup:SfPopup>
</StackLayout>
C# In ChildAdded event you will get the instance of Expander.
public class Behavior:Behavior<StackLayout>
{
StackLayout stack;
SfExpander expander;
protected override void OnAttachedTo(StackLayout bindable)
{
stack = bindable;
stack.ChildAdded += Stack_ChildAdded;
base.OnAttachedTo(bindable);
}
private void Stack_ChildAdded(object? sender, ElementEventArgs e)
{
//Method 1 : Get SfExpander reference using StackLayout.ChildAdded Event
if(e.Element is SfExpander)
{
expander = e.Element as SfExpander;
}
}
protected override void OnDetachingFrom(StackLayout bindable)
{
stack.ChildAdded -= Stack_ChildAdded;
stack = null;
expander = null;
base.OnDetachingFrom(bindable);
}
}
C# You can also get the Expander using FindByName method from Parent element.
internal class Behavior:Behavior<StackLayout>
{
StackLayout stack;
Button button;
SfExpander expander;
protected override void OnAttachedTo(StackLayout bindable)
{
stack = bindable;
stack.ChildAdded += Stack_ChildAdded;
base.OnAttachedTo(bindable);
}
private void Stack_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 = stack.FindByName<SfExpander>("firstExpander");
App.Current!.MainPage!.DisplayAlert("Information", "first Expander instance is obtained and Expanded/Collapsed", "Ok");
if (expander.IsExpanded)
{
expander.IsExpanded = false;
}
else
{
expander.IsExpanded = true;
}
}
protected override void OnDetachingFrom(StackLayout bindable)
{
stack.ChildAdded -= Stack_ChildAdded;
button.Clicked -= Button_Clicked;
button = null;
expander = null;
base.OnDetachingFrom(bindable);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent