Net maui expansion panel icon animated how to do ?

Question

I can t acces label name because of controltemplate how to do animated angledown icon rotate 90 when expansion panel opened then come back to default value ? and when is opened expansion panel how to close the others ? thanks

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             
             x:Class="AppMaui.Controls.ExpansionPanel"
             xmlns:local="clr-namespace:AppMaui"
             xmlns:icon="clr-namespace:AppMaui.Resources.FontIcons"
             x:Name="this">
    <ContentView.ControlTemplate>
        <ControlTemplate x:Name="controlTemplate">
            <VerticalStackLayout>
                <Border Stroke="{StaticResource White}"  StrokeShape="RoundRectangle 3" Padding="10,5">
                    <StackLayout Orientation="Horizontal">
                        <ContentView Content="{Binding Source={x:Reference this},Path=HeaderContent}" >
                            <ContentView.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                            </ContentView.GestureRecognizers>
                        </ContentView>
                        <Label x:Name="angleIcon" RotationX="0" FontSize="{StaticResource BaseFontSize}" TextColor="{Binding Source={x:Reference this},Path=IconColor}" Style="{StaticResource lineAwesomeIcon}" Text="{x:Static icon:LineAwesome.AngleDown}" HorizontalOptions="EndAndExpand" />
                    </StackLayout>
                </Border>
                <Border IsVisible="{Binding Source={x:Reference this},Path=IsExpanded}"  Grid.Row="1"  Stroke="{StaticResource White}"  StrokeShape="RoundRectangle 0,0,3,3" Margin="0,-5,0,0">
                    <ContentPresenter  Padding="10,5" />
                </Border>
            </VerticalStackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

c# ......


public partial class ExpansionPanel : ContentView
{
	public ExpansionPanel()
	{
		InitializeComponent();
	}

    public static readonly BindableProperty HeaderContentProperty = BindableProperty.Create(
     propertyName: nameof(HeaderContent),
     returnType: typeof(View),
     declaringType: typeof(ExpansionPanel),
     defaultValue: new VerticalStackLayout()
     );

    public View HeaderContent
    {
        get => (View)GetValue(HeaderContentProperty);
        set => SetValue(HeaderContentProperty, value);
    }

    public static readonly BindableProperty IconColorProperty = BindableProperty.Create(
 propertyName: nameof(IconColor),
 returnType: typeof(Color),
 declaringType: typeof(ExpansionPanel),
null
 );

    public Color IconColor
    {
        get => (Color)GetValue(IconColorProperty);
        set => SetValue(IconColorProperty, value);
    }

    public static readonly BindableProperty IsExpandedProperty = BindableProperty.Create(
     propertyName: nameof(IsExpanded),
     returnType: typeof(bool),
     declaringType: typeof(ExpansionPanel),
     defaultValue: false
     );

    public bool IsExpanded
    {
        get => (bool)GetValue(IsExpandedProperty);
        set => SetValue(IsExpandedProperty, value);
    }

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        IsExpanded = !IsExpanded;
    }
}

Answer 1

Hello,

After further investigation, you could access the elements in the ControlTemplate through Get a named element from a template when preserving the Template code snippet.

In ExpansionPanel's C# code, you could access angleIcon and animate it by adding the following code:

private bool IsRotated; // add a property into this ExpansionPanel.
private Label angleIcon; // access the icon control.
protected override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    angleIcon = (Label)GetTemplateChild("angleIcon");
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{

    IsExpanded = !IsExpanded;
    if (IsRotated == false)
    {
        angleIcon.RotateTo(90);
        IsRotated = true;
    }
    else
    {
        angleIcon.RotateTo(0);
        IsRotated = false;
    }
}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.