expander animation

Question

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

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

Answer 1

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.