Net maui expansion panel icon animated how to do ?

Sami 861 Reputation points
2023-05-03T17:48:23.4533333+00:00

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

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,043 questions
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 37,266 Reputation points Microsoft Vendor
    2023-05-10T05:57:19.6666667+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful