0

I worked on a collectionView, that can navigate to another page

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

The problem comes, when I want to add an animation to the CarView. As you can see, I have a Command attach to the circle, this command will expand the reveal te content

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

</ContentView>

It seems like I cannot have animation and navigation at the same time, but what if I want to navigate

oh by the way guys, how can I make my expand animation smoother, my end goil is to make the animation plays as a real expander (Litle by little, it will reveal the content)

  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, (uint)cv.Bounds.Y, Easing.SpringIn);

        IsExpanded = !IsExpanded;
        OnPropertyChanged(nameof(IsExpanded));
        //}
    }

Demo

edu
  • 87
  • 2
  • 8
  • 1
    Based on complexity of this issue, we need to do more research. We will keep you informed if there is any update. If you have more information to add, please kindly share with us. – Guangyu Bai - MSFT Sep 21 '22 at 09:29

0 Answers0