Как можно улучшить анимацию ListViewBase?

Я создаю анимацию на основе композиции, которую я хотел бы масштабировать в каждом ListViewItem по мере их загрузки. У меня есть следующий пример кода:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        MyList.ContainerContentChanging += (sender, args) =>
        {
            if (!args.InRecycleQueue)
            {
                args.ItemContainer.Loaded += (item, e) =>
                {
                    var lvi = item as ListViewItem;
                    var panel = FindDescendant<ItemsStackPanel>(MyList);
                    var visual = ElementCompositionPreview.GetElementVisual(lvi);
                    var index = MyList.IndexFromContainer(lvi);

                    if (index >= panel.FirstVisibleIndex && index <= panel.LastVisibleIndex)
                    {
                        var width = (float)lvi.RenderSize.Width;
                        var height = (float)lvi.RenderSize.Height;

                        visual.CenterPoint = new Vector3(width / 2, height / 2, 0f);

                        var zoom = visual.Compositor.CreateVector3KeyFrameAnimation();
                        zoom.Duration = TimeSpan.FromSeconds(2);
                        zoom.DelayTime = TimeSpan.FromMilliseconds(index * 100);
                        zoom.InsertKeyFrame(0.0f, new Vector3(0.75f, 0.75f, 0f));
                        zoom.InsertKeyFrame(1.0f, new Vector3(1.0f, 1.0f, 0f));

                        visual.StartAnimation("Scale", zoom);
                    }
                };
            }
        };
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var col = new List<int>();

        for (var x = 0; x < 200; x++)
        {
            var z = new Random();
            col.Add(z.Next(0, 1000));
        }

        MyList.ItemsSource = null;
        MyList.ItemsSource = col;
    }

    private T FindDescendant<T>(DependencyObject element) where T : DependencyObject
    {
        T retValue = null;
        var childrenCount = VisualTreeHelper.GetChildrenCount(element);

        for (var i = 0; i < childrenCount; i++)
        {
            var child = VisualTreeHelper.GetChild(element, i);
            var type = child as T;

            if (type != null)
            {
                retValue = type;
                break;
            }

            retValue = FindDescendant<T>(child);

            if (retValue != null)
            {
                break;
            }
        }

        return retValue;
    }
}

введите здесь описание изображения

Моя проблема связана со временем событий. При нажатии на кнопку сразу загружается набор новостей, и после очень короткой паузы запускается анимация. Есть ли какие-то другие события или что-то, что я могу изменить, чтобы элементы не были видны, пока не начнется анимация??

Вот ссылка на исходный код примера.


c# uwp windows-10-universal windows-composition-api xaml-composition
person Maximus    schedule 15.01.2019    source источник
comment
Я думаю, вы могли бы попробовать использовать метод PrepareContainerForItemOverride.   -  person Nico Zhu - MSFT    schedule 16.01.2019
comment
К сожалению, это WPF, а не UWP :(   -  person Maximus    schedule 16.01.2019
comment
Я попытался создать CusomListView, который наследует ListView, а затем перезаписал метод PrepareContainerForItemOverride. Но это то же поведение, что и выше.   -  person Nico Zhu - MSFT    schedule 17.01.2019

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, что listview пытается воспроизвести EntranceThemeTransition перед воспроизведением анимации растушевки. Если вы создаете свои собственные анимации, вы можете попробовать удалить существующую коллекцию ListView.ItemContainerTransitions.

person Steven Moyes - MSFT    schedule 17.01.2019

arrow_upward
0
arrow_downward

Спасибо @user10930282, он был прав. Исправление для этого состояло в том, чтобы удалить ItemContainerTransitions по умолчанию для ListView:

<ListView x:Name="MyList">
    .
    .
    .
    <ListView.ItemContainerTransitions>
        <TransitionCollection>
            <!-- Empty collection to not have any transitions interrupt the composition Item animations -->
        </TransitionCollection>
    </ListView.ItemContainerTransitions>
    .
    .
    .
</ListView>
person Maximus    schedule 19.01.2019