Xamarin Forms ListView,当转换为动画时被其他项目隐藏

问题描述

我打算编码”,当出现Listview项目和出现“项目”时,项目从顶部底部出现。 (使用Translateto

但是当出现Listview Viewcell或itemsAppearing时,我尝试应用动画。 但是,较高的项目索引会隐藏较低的项目动画索引。 因此,较低索引项的动画只会在短时间内显示。 (由其他布局裁剪)

Please Check Image Description _ Animation Cropped by items

Xamarin形式(C#)

    private async void ItemsListView_ItemAppearing_1(object sender,ItemVisibilityEventArgs e)
    {
    
        int i = e.ItemIndex;
        int y;

        y = 400;
        for (int d = 0; d < i; d++)
        {
            int z = d + 1;
            y = y + (400 / (z * z));
        }

        uint x = uint.Parse(y.ToString());

        IEnumerable<PropertyInfo> pInfos = (ItemsListView as ItemsView<Cell>).GetType().GetRuntimeProperties();
        var templatedItems = pInfos.FirstOrDefault(info => info.Name == "TemplatedItems");
        if (templatedItems != null)
        {
            var cells = templatedItems.GetValue(ItemsListView);
            var cell = (cells as Xamarin.Forms.ITemplatedItemsList<Xamarin.Forms.Cell>)[e.ItemIndex] as ViewCell;

          //cell.View.Opacity = 0;
            cell.View.TranslationY = Var.Device_Height / Var.Device_Scale;
          await  cell.View.Translateto(0,x,Easing.CubicOut);


        }
    }

在XAML中

     <ListView x:Name="ItemsListView" BackgroundColor="Transparent" VerticalOptions="Fill"         ItemsSource="{Binding Items}"  Margin="0" SeparatorVisibility="None" RefreshCommand="{Binding LoadItemsCommand}" 
                              IsPullToRefreshEnabled="True" HasUnevenRows="True"  IsRefreshing="{Binding IsBusy,Mode=OneWay}" ItemAppearing="ItemsListView_ItemAppearing_1"
                             >
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell Appearing="ViewCell_Appearing">       
                                    <ViewCell.View>

                                        <Frame IsClippedToBounds="False" 
                                               Margin="0,5" 
                                               CornerRadius="10" 
                                               Padding="0" 
                                               HasShadow="False" 
                                               BorderColor="#f0f0f0" 
                                               BackgroundColor="Transparent" >
 
                                    <StackLayout Padding="0" Spacing="0" MinimumHeightRequest="0">
                                                <StackLayout Orientation="Horizontal">
                                                    <Label Text="{Binding Name}" Margin="13,12,5,0" FontAttributes="Bold" FontSize="18" TextColor="#222222">
                                                       
                                                    </Label>
                                                    <Frame MinimumHeightRequest="0" VerticalOptions="EndAndExpand" Padding="7,2,7,2" CornerRadius="100" BackgroundColor="Accent" HasShadow="False">
                                                     
                                                        <Label Text="{Binding Sequence}" TextColor="White" FontSize="Micro"/>
                                                    </Frame>
                                                </StackLayout>
                                                <Label Text="{Binding Mail}" Margin="13,6,12">                        
                                                </Label>
                                            </StackLayout>
                                    </Frame>
                                                                        </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
</ListView>

ViewCell_appearing items_Appearing

时,结果相同

解决方法

这是我的TranslateTo动画隐藏其他项的背景代码。

 public static double Device_Height = DeviceDisplay.MainDisplayInfo.Height;

        public static double Device_Scale = 6;
        int i;
        private async void mylistview_ItemAppearing(object sender,ItemVisibilityEventArgs e)
        {
             i = e.ItemIndex;
           
        }

        private async void ViewCell_Appearing(object sender,EventArgs e)
        {
          //  int i = e.ItemIndex;
            int y;

            y = 4000;
            for (int d = 0; d < i; d++)
            {
                int z = d + 1;
                y = y + (400 / (z * z));
            }

            uint x = uint.Parse(y.ToString());
            var cell = sender as ViewCell;
            cell.View.TranslationY = Device_Height / Device_Scale;
            await cell.View.TranslateTo(0,x,Easing.CubicOut);
        }

这里正在运行GIF(我放慢了您的动画的速度)。

enter image description here

我将演示上传给您,您可以对其进行测试。

https://github.com/851265601/Xamarin.Android_ListviewSelect/blob/master/MyCusListview.zip