Xamarin.Forms ScrollView - 随着它的扩展动画它的增长答案

【问题标题】：Xamarin.Forms ScrollView - animate its growth as it expandsXamarin.Forms ScrollView - 随着它的扩展动画它的增长
【发布时间】：2019-04-03 16:26:00
【问题描述】：

我们有一个 ScrollView，我将 VerticalOptions 设置为“End”，这样当我们在运行时向它添加内容时，它会从底部“增长”。

我们在添加内容时滚动到最后，带有动画。当 ScrollView 已满并且实际上正在滚动时，这看起来不错。

但是，当内容被添加到 ScrollView 时，新内容会立即出现，没有动画。

关于如何在添加新内容时动画化 ScrollView 的增长有什么想法吗？理想情况下，我希望它向上滑动，就像满时的动画滚动一样。

如果相关，我们将使用 RepeaterView 作为 ScrollView 的内容。

下面的相关现有代码（我们使用带有 MvvmCross 的 Forms - 因此是 MVVM 模式）：

视图模型

    private async Task NextClick()
    {

        var claimFlowQuestion = await GetClaimFlowQuestion(_currentIndexQuestion);

        Questions.Add(ClaimFlowExtendFromClaimFlow(claimFlowQuestion));

        // Trigger PropertyChanged so the Repeater updates
        await RaisePropertyChanged(nameof(Questions));

        // Trigger the QuestionAdded event so the ScrollView can scroll to the bottom (initiated in the xaml.cs code behind)
        QuestionAdded?.Invoke(this, new EventArgs());

    }

XAML

        <ScrollView  Grid.Row="1" x:Name="QuestionScrollView">
            <StackLayout VerticalOptions="End"
                Padding  ="10,0,10,0"
                IsVisible="{Binding Busy, Converter={StaticResource InvertedBooleanConvertor}}}">
                <controls:RepeaterView
                    x:Name="QuestionRepeater"
                    Margin      ="10"
                    AutomationId="IdQuestions"
                    Direction   ="Column"
                    ItemsSource ="{Binding Questions}"
                    ClearChild  ="false">
                    <controls:RepeaterView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <controlsClaimFlowControls:QuestionBlock
                                    Margin             ="0,20,0,20"
                                    QuestionNumber     ="{Binding Index}"
                                    QuestionText       ="{Binding QuestionText}"
                                    QuestionDescription="{Binding QuestionDescription}"
                                    ItemsSource        ="{Binding Source}"
                                    DisplayMemberPath  ="{Binding DisplayPaths}"
                                    QuestionType       ="{Binding QuestionType}"
                                    SelectedItem       ="{Binding Value}"
                                    IsEnabledBlock     ="{Binding IsEnabled}" />
                            </ViewCell>
                        </DataTemplate>
                    </controls:RepeaterView.ItemTemplate>
                </controls:RepeaterView>
            </StackLayout>
        </ScrollView>

XAML.cs

    protected override void OnAppearing()
    {
        if (BindingContext != null)
        {
            MedicalClaimConditionPageModel model = (MedicalClaimConditionPageModel)this.BindingContext.DataContext;

            model.QuestionAdded += Model_QuestionAdded;
        }

        base.OnAppearing();
    }

    protected override void OnDisappearing()
    {
        MedicalClaimConditionPageModel model = (MedicalClaimConditionPageModel)this.BindingContext.DataContext;

        model.QuestionAdded -= Model_QuestionAdded;
        base.OnDisappearing();
    }

    void Model_QuestionAdded(object sender, EventArgs e)
    {
        Device.BeginInvokeOnMainThread(async () =>
        {
            if (Device.RuntimePlatform == Device.iOS)
            {
                // We need a Task.Delay to allow the contained controls to repaint and have their new sizes
                // Ultimately we should come up with a better resolution  - the delay value can vary depending on device and OS version.

                await Task.Delay(50);
            }

            await QuestionScrollView.ScrollToAsync(QuestionRepeater, ScrollToPosition.End, true);
        });

    }

【问题讨论】：

添加相关代码也会有所帮助！其次，为此，您必须在将项添加到 RepeaterView 的子堆栈中的代码部分中处理动画！
@G.hakim 关于代码的好点 - 我已经添加了现有代码的相关部分。正如你所说，它需要是我添加到提供 RepeaterView 的绑定列表的位置 - 但我认为动画需要从 xaml.cs 驱动
据我说，更好的解决方案是在转发器视图中将新添加的子级添加到其 ViewStack 中，希望我有意义！！！
啊哈！是的，这是有道理的。感谢您的想法/指针。
当然，如果您可以分享动画代码，我可以为您将其合并到中继器中！

标签： animation xamarin.forms

【解决方案1】：

用户 yelinzh 在 Xamarin 论坛上发布了一个合理的答案：

试试使用自定义渲染器，比如淡入淡出效果。

[assembly: ExportRenderer(typeof(ScrollView_), typeof(ScrollViewR))]
namespace App3.Droid
{
    public class ScrollViewR : ScrollViewRenderer
    {
        public ScrollViewR(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            this.SetFadingEdgeLength(300);
            this.VerticalFadingEdgeEnabled = true;
        }
    }
}

这可能会奏效。事实上，我们有不同的方法（根据客户的反馈），我们将当前问题保持在屏幕顶部并向上滚动，因此内容不再扩展。

【讨论】：