expander animation

Eduardo Gomez 3,416 Reputation points
2022-09-20T20:47:35.773+00:00

I have My VM with my animation

  private void ToggleCollapse(ContentView cv)  
    {  
        //if (DeviceInfo.Platform == DevicePlatform.Android)  
        //{  
        //BUG iOS pre7+: doesn't collapse the section, only makes the label invisible  
        cv.LayoutTo(cv.Bounds, 600, Easing.CubicIn);  
  
        IsExpanded = !IsExpanded;  
        OnPropertyChanged(nameof(IsExpanded));  
        //}  
    }  

 <Grid>  
            <Frame  
                Margin="5,15,5,5"  
                BorderColor="LightGray"  
                CornerRadius="5"  
                HasShadow="False">  
                <Grid>  
                    <Grid.RowDefinitions>  
                        <RowDefinition Height="Auto" />  
                    </Grid.RowDefinitions>  
                    <Grid IsVisible="{Binding IsExpanded, Source={x:Reference _carView}}">  
                        <Grid.RowDefinitions>  
                            <RowDefinition Height="Auto" />  
                            <RowDefinition Height="*" />  
                        </Grid.RowDefinitions>  
                        <Label  
                            HorizontalOptions="End"  
                            Text="{Binding Notes}"  
                            TextColor="Gray" />  
                        <Label Grid.Row="1" Text="{Binding Description}" />  
                    </Grid>  
                </Grid>  
            </Frame>  
  
            <StackLayout  
                Margin="20,0,0,0"  
                BackgroundColor="White"  
                HorizontalOptions="Start"  
                Orientation="Horizontal"  
                VerticalOptions="Start">  
                <local:CarCircleView  
                    Margin="7,0,0,0"  
                    xct:TouchEffect.Command="{Binding ToggleCollapseCommand, Source={x:Reference _carView}}"  
                    xct:TouchEffect.CommandParameter="{x:Reference _carView}"  
                    HeightRequest="30"  
                    HorizontalOptions="Start"  
                    VerticalOptions="Start"  
                    WidthRequest="30" />  
                <Label  
                    Margin="0,0,7,0"  
                    FontAttributes="Bold"  
                    Text="{Binding Name}"  
                    VerticalTextAlignment="Center" />  
            </StackLayout>  
        </Grid>  
    </ContentView.Content>  

I am just following this instruction

  • add an expand/collapse animation when tapping the circle

But I do not see the animation

I m trying to do something like this

https://youtu.be/AjvGGobxXRU

I tried the code, bet I don't see it

243153-image.png

the circles get weird and it doesn't want to expand again

ViewModel modified

public partial class CarView : ContentView, INotifyPropertyChanged  
{  
    public CarView()  
    {  
        IsExpanded = true;  
        ToggleCollapseCommand = new Command<ContentView>(ToggleCollapse);  
        InitializeComponent();  
    }  
  
    private void ToggleCollapse(ContentView MyContent)  
    {  
        //if (DeviceInfo.Platform == DevicePlatform.Android)  
        //{  
        //BUG iOS pre7+: doesn't collapse the section, only makes the label invisible  
  
        if (IsExpanded)  
        {  
            MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut);  
            IsExpanded = false;  
        }  
        else  
        {  
            MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn);  
            IsExpanded = true;  
  
            OnPropertyChanged(nameof(IsExpanded));  
        }  
    }  
  
    public Command<ContentView> ToggleCollapseCommand  
    {  
        get;  
    }  
  
    public bool IsExpanded  
    {  
        get; set;  
    }  
}  
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,298 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,311 Reputation points Microsoft Vendor
    2022-09-21T08:17:16.897+00:00

    Hello,

    I set the x:Name="MyContent" to the <Frame > of CarView.xaml

    Then I find you lack of OnPropertyChanged method. And If the IsExpanded is true, when execute ToggleCollapse, we need to close the expender. So I change the code like following method.

       private void ToggleCollapse()  
               {     
                   if (!IsExpanded)  
                   {  
                       MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut);  
                       IsExpanded = true;  
                       OnPropertyChanged(nameof(IsExpanded));  
                   }  
                   else  
                   {  
                       MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn);  
                       IsExpanded = false;  
         
                       OnPropertyChanged(nameof(IsExpanded));  
                   }  
         
               }  
    

    Best Regards,

    Leon Lu


    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