Search code examples
c#animationxamarin.formsxamarin-community-toolkit

Expander in CustomView do not expand


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


Solution

  • 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>