Oh guys, as I was reading, I found out that is not an expander what they want (Because is kind of implemented already).

What I need to to, is to implement the animation of expanding/collapsing

I did not see this

public CarView()
    {
        IsExpanded = true;
        ToggleCollapseCommand = new DelegateCommand(ToggleCollapse);
        InitializeComponent();
    }

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

    public ICommand ToggleCollapseCommand
    {
        get;
    }

    public bool IsExpanded
    {
        get; set;
    }
}

But how do I implement the animation for it, and make it work in ios, also if I have my TouchEffect in every row (Community)

<ContentPage.Content>
        <CollectionView
            x:Name="CarsList"
            ItemsSource="{Binding Cars}"
            SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <SwipeView>
                        <SwipeView.RightItems>
                            <SwipeItems Mode="Execute">
                                <SwipeItem
                                    BackgroundColor="Red"
                                    Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.DeleteCommand}"
                                    CommandParameter="{Binding .}"
                                    Text="Delete" />
                            </SwipeItems>
                        </SwipeView.RightItems>
                        <local:CarView
                            Padding="0,10,0,0"
                            xct:TouchEffect.AnimationEasing="CubicInOut"
                            xct:TouchEffect.Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.PressedCommand}"
                            xct:TouchEffect.CommandParameter="{Binding .}"
                            xct:TouchEffect.LongPressCommand="{Binding Source={x:Reference ListPage}, Path=BindingContext.LongPressedCommand}"
                            xct:TouchEffect.LongPressCommandParameter="{Binding .}"
                            xct:TouchEffect.NativeAnimation="True"
                            xct:TouchEffect.PressedScale="0.8" />
                    </SwipeView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>
</ContentPage>

 <ContentView.Content>
        <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"
                                     Command="{Binding ToggleCollapseCommand, Source={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>
</ContentView>

I think I overlook that part

CodePudding user response：

How about adding an Expander in the Listview and using a Viewmodel to populate the data. I think this might work well.

 <ListView
            x:Name="CarsList"
            Grid.Row="1"
            HasUnevenRows="True"
            ItemsSource="{Binding Cars}"
            SelectionMode="None"
            SeparatorVisibility="Default">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <SwipeView>
                    <SwipeView.RightItems>
                        <SwipeItems Mode="Execute">
                            <SwipeItem BackgroundColor="Red"
                                               Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.DeleteCommand}"
                                               CommandParameter="{Binding .}"
                                               Text="Delete" />
                        </SwipeItems>
                    </SwipeView.RightItems>
                    <local:CarView
                                Padding="0,10,0,0"
                                xct:TouchEffect.Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.PressedCommand}"
                                xct:TouchEffect.CommandParameter="{Binding .}"
                                xct:TouchEffect.LongPressCommand="{Binding Source={x:Reference ListPage}, Path=BindingContext.LongPressedCommand}"
                                xct:TouchEffect.LongPressCommandParameter="{Binding .}" />
                </SwipeView>

                <xct:Expander>
                    <xct:Expander.Header>
                        <Label Text="{Binding Name}"
                                   FontAttributes="Bold"
                                   FontSize="Medium" />
                    </xct:Expander.Header>
                    <xct:Expander.ContentTemplate>
                        <DataTemplate>
                            <Grid Padding="10">
                                <Label Text="{Binding Details}"FontAttributes="Italic" />
                            </Grid>
                        </DataTemplate>
                    </xct:Expander.ContentTemplate>
                </xct:Expander>

            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
    </ListView>