Анимировать ListBoxItem из одного ListBox в другой ListBox

Question

Я хотел бы создать визуальный эффект, если дважды щелкнуть элемент в списке. До сих пор у меня была функция перетаскивания, когда элемент визуально привязан к мышке и может быть перемещен к цели перетаскивания. Благодаря этой функциональности я могу анимировать элемент, используя ту же логику получения контейнера элементов, однако я не могу оставить элемент управления. Есть ли способ удалить элемент из ListBox и визуально анимировать его в другом месте? По сути, основной список - это комбинация карт. Если дважды щелкнуть карточку, я хочу, чтобы она визуально переместилась из списка руки в список сброса. На данный момент логика перемещения элемента из одной коллекции в другую не представляет проблемы, однако мне бы очень хотелось анимированное визуальное представление этого события. Будем благодарны за любые идеи или рекомендации о том, как сделать что-то подобное.

Спасибо, Brandon

Более подробная информация о том, что я пытался: Есть некоторые концепции, в которых я еще не очень хорошо разбираюсь, и это побудило меня сначала столкнуться лицом к лицу с этой стеной. У меня есть метод, который я передаю (некоторые могут быть ненужными) ListBox как ItemsControl, FrameworkElement, который является элементом списка, и объект данных, связанный с элементом ListBox. Я попытался сделать FindVisualChild объекта ListBoxItem, который является холстом. Я могу это сделать. По моему мнению, я хотел как-то клонировать холст либо как холст, либо как растровое изображение, добавить его к дочерним элементам дочернего элемента страницы в том же месте, удалить ListBoxItem из ListBox и анимировать клон для удаления ворс. Когда анимация завершится, клон будет удален или скрыт, и когда этот объект будет добавлен в коллекцию сброшенных стопок, он фактически возьмет на себя замену клона.

Моя проблема с этим заключается в том, что я чувствую, что действительно существует более простой способ сделать это, используя слой adorner или что-то в этом роде. Я также не знаю, как бы я расположил клон в том же положении в элементе дальше по визуальному дереву. Я собираюсь продолжать работать над этим и исследовать другие подходы, и я просто надеюсь, что кто-то поделится некоторыми соображениями по этому вопросу.

Answer 1

Если два списка всегда находятся в одной и той же позиции, вы можете попробовать анимировать элемент с двойным щелчком мыши в заданном месте, скажем, на полпути между старым списком и новым списком. Затем выполните код, чтобы переместить элемент в новый список, но используйте стиль, который немедленно запускает анимацию для этого элемента, начиная его с этого заранее определенного местоположения и анимируя его местоположение в новом списке. Возможно, вам придется изменить начальное смещение нового элемента во время выполнения в зависимости от того, где он вставлен в список.

Answer 2

Вот код, который я разработал, чтобы нарисовать визуал в растровом изображении. Возможно, вы сможете адаптировать это к вашим потребностям и нарисовать растровое изображение, украсив UIElement, который представляет общего предка двух представлений списка. Обратите внимание на использование FrameworkElement.TransformToAncestor для получения координат вложенного элемента в терминах элемента-предка.

        public static BitmapSource CreateBitmapFromElement(FrameworkElement element, Double dpiX, Double dpiY)
        {
            Size elementSize = new Size(element.ActualWidth, element.ActualHeight);
            Visual root = GetAdornerDecoratorAncestor(element);
            Rect elementBounds  = element.TransformToAncestor(root).TransformBounds(new Rect(elementSize));

            RenderTargetBitmap rtb = new RenderTargetBitmap((Int32)(elementBounds.Size.Width * dpiX / 96.0),
                                           (Int32)(elementBounds.Size.Height * dpiY / 96.0),
                                           dpiX,
                                           dpiY,
                                           PixelFormats.Pbgra32);

            DrawingVisual dv = new DrawingVisual();
            using (DrawingContext dc = dv.RenderOpen())
            {
                VisualBrush vb = new VisualBrush(root);
                vb.ViewboxUnits = BrushMappingMode.Absolute;
                vb.Stretch = Stretch.None;
                vb.Viewbox = elementBounds;
                dc.DrawRectangle(vb, null, new Rect(new Point(), elementBounds.Size));
            }
            rtb.Render(dv);
            return rtb;
        }

        public static Visual GetAdornerDecoratorAncestor(DependencyObject obj)
        {            
            while(obj != null && !(obj is AdornerDecorator))
            {
                obj = VisualTreeHelper.GetParent(obj);
            }
            return obj as AdornerDecorator;
        }

Answer 3

ОК, вы можете попробовать взять элемент Visual и установить его фон для визуальной кисти вашего ListItem и анимировать его для другого списка. Вы можете подождать, пока событие завершит раскадровку, чтобы на самом деле сделать переключение. Если бы это был я, я бы оживил от одного окна только до края другого. Если переключение происходит достаточно быстро, оно должно выглядеть довольно незаметно для пользователя. Поиск точной позиции, в которой элемент должен попасть в список, будет довольно сложным, основываясь на любых ваших правилах сортировки / фильтрации.