Xamarin Forms PushAsync 没有动画

Posted 2023-04-13

【中文标题】Xamarin Forms PushAsync 没有动画

【英文标题】：Xamarin Forms PushAsync not animating

【发布时间】：2020-11-24 14:38:48

【问题描述】：

在登录页面之后，我 PushAsync 一个 MainPage，该 MainPage 有一个 Listview 和一个 CollectionView，现在已经被模拟了。我看到的是（可能）由于页面的重量而导致的淡入淡出动画的丢失，实际上在过渡中有一点时间滞后。即使我不进行繁重的操作，这怎么可能？ 我测试了一个只有两个彩色框的空页面，并且淡入淡出动画过渡效果很好，但在这种情况下不是。 我试过通过代码使用Binding和list初始化，但是结果是一样的。

代码下方： MainPage.cs

using BrScanner.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace BrScanner

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    
        public ObservableCollection<string> OrdersVertical  get;  
        public ObservableCollection<ArticleForOrdineOTI> Orders  get;
        public MainPage()
        

            InitializeComponent();
            OrdersVertical = new ObservableCollection<string>()  "Ordine 1", "Ordine 2", "Ordine 3", "Ordine 1", "Ordine 2", "Ordine 3", "Ordine 1", "Ordine 2", "Ordine 3" ;
            Orders = new ObservableCollection<ArticleForOrdineOTI>()
                new ArticleForOrdineOTI()
                
                    Oarti = 22,
                    Carti = "Carti",
                    Tarti = "Descrizione Ordine OTI"
                ,
                new ArticleForOrdineOTI()
                
                    Oarti = 45,
                    Carti = "Carti",
                    Tarti = "Descrizione Ordine OTI"
                ,
                new ArticleForOrdineOTI()
                
                    Oarti = 76,
                    Carti = "Carti",
                    Tarti = "Descrizione Ordine OTI"
                
            ;

            ordersList.ItemsSource = OrdersVertical;
            horizOrders.ItemsSource = Orders;
            //BindingContext = this;
        

        

        private async void New_OrderOTI_Button_Clicked(object sender, EventArgs e)
        
            var orderPage = new OrderOTIPage();
            await Navigation.PushAsync(new test(), true);
        
    

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
             mc:Ignorable="d"
             x:Class="BrScanner.MainPage">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Grid x:Name="mainGrid" VerticalOptions="StartAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <CollectionView 
                x:Name="horizOrders" 
                HeightRequest="250" 
                MinimumHeightRequest="250"
                Grid.Row="0"
                
                ItemsLayout="HorizontalList"
                    >
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <Frame 
                                HasShadow="True" 
                                Margin="5" 
                                Padding="20" 
                                CornerRadius="5"
                                    >
                                    <StackLayout Orientation="Vertical">
                                        <Label Text="Binding Tarti" FontSize="Medium"/>
                                        <Label Text="Binding Oarti"/>
                                        <Label Text="Binding Carti"/>
                                        <Label Text="Binding Carti"/>
                                        <Label Text="Binding Carti"/>
                                        <Label Text="Binding Carti"/>
                                        <Label Text="Binding Carti"/>
                                    </StackLayout>
                                </Frame>
                            </StackLayout>


                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <ListView Grid.Row="1" x:Name="ordersList" >
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout>
                                    <Label Text="Ordine nr. 26"/>
                                    <Label Text="by Ivan Ardillo"/>
                                    <Label Text="consegnato alle 12:34"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                
            </Grid>
            <flex:FlexButton
                Clicked="New_OrderOTI_Button_Clicked"
                AbsoluteLayout.LayoutBounds=".9, .99, 80, 80"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                WidthRequest="76"
                HeightRequest="76"
                CornerRadius="38"
                HorizontalOptions="Center"
                Icon="brcode_icon_128px.png"
                ForegroundColor="#ffffff"
                HighlightForegroundColor="#49516F"
                BackgroundColor="#607D8B"
                HighlightBackgroundColor="#8EA4D2"/>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

【参考方案1】：

如果您认为延迟是由于UI繁重造成的，可以尝试在OnAppearing方法中加载数据，而不是在构造方法中。

public MainPage()

    InitializeComponent();


protected override void OnAppearing()

    base.OnAppearing();

    OrdersVertical = new ObservableCollection<string>()  "Ordine 1", "Ordine 2", "Ordine 3", "Ordine 1", "Ordine 2", "Ordine 3", "Ordine 1", "Ordine 2", "Ordine 3" ;
    Orders = new ObservableCollection<ArticleForOrdineOTI>()
        new ArticleForOrdineOTI()
        
            Oarti = 22,
            Carti = "Carti",
            Tarti = "Descrizione Ordine OTI"
        ,
        new ArticleForOrdineOTI()
        
            Oarti = 45,
            Carti = "Carti",
            Tarti = "Descrizione Ordine OTI"
        ,
        new ArticleForOrdineOTI()
        
            Oarti = 76,
            Carti = "Carti",
            Tarti = "Descrizione Ordine OTI"
        
    ;

    ordersList.ItemsSource = OrdersVertical;
    horizOrders.ItemsSource = Orders;

【讨论】：

感谢您的回答！无论如何，我像你说的那样尝试了，但没有运气。我想知道是否有一些指导方针可以提高动画和类似内容的性能。

不行，推送动画是系统api控制的，无法改进。如果你可以分享给我们Minimal, Reproducible Example，我会调查一下。