Animate a ListBoxItem from one ListBox to another ListBox

Question

I would like to create a visual effect when an item in the list double-clicks. So far I have a drag and drop function, when an element is visually attached to the mouse and can be moved to the drop target. From this functionality, I can animate an element using the same logic for getting the item container, however I cannot leave the control. Is there a way to remove an item from a ListBox and visually animate it elsewhere? Basically the main list is the hand of cards. When the card double-clicked, I want it to visually move from the manual list to the reset list. At the moment, the logic of moving an item from one collection to another is not a problem, but I would really like the animated visual representation of this event. Any ideas or recommendations on how to do something like this would be appreciated.

Thanks Brandon

Additional information about what I tried: There are some concepts that I still can’t understand, which led me to first launch my face into this wall. I have a method that I pass (some may be optional) to a ListBox as an ItemControl, a FrameworkElement that is a list item, and a data object associated with a ListBox. What I tried to do is FindVisualChild from ListBoxItem, which is the canvas. I can do it. In my opinion, I wanted to somehow clone the canvas either as a canvas or as a bitmap, add it to the children of the page’s child in the same place, remove the ListBoxItem from the ListBox and animate the clone to failure. When the animation is completed, the clone will be deleted or hidden, and since this object will be added to the collection of dumped piles, it will effectively replace the clone.

My problem is that I feel that there really is an easier way to do this using an adorner layer or something like that. I also do not know how I would put the clone in the same position in the element further down the visual tree. I will continue to work on it and explore other approaches, and I just hope that someone will share some information about it.

Answer 1

Here is the code I processed to draw a visual into a bitmap. You may be able to adapt this to your needs and draw a bitmap by decorating UIElement, which represents the common ancestor of the two kinds of list. Note the use of FrameworkElement.TransformToAncestor to get the coordinates of a nested element in terms of an ancestor element.

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 2

OK, you can try to take a Visual element and set its background in the visualbrush of your ListItem and animate it in another list. You can wait until the completion of the planned schedule to actually make a switch. If it were me, I would animate from one box only to the edge of another. If the switch is fast enough, it should look pretty easy for the user. Finding the exact position of where the item should go in the list box will be quite difficult based on any sorting / filtering rules you have.

Answer 3

If two lists are always in the same position, you can try to animate an element with a double click on a given place, for example, halfway between the old list and the new list. Then execute the code to move the item to the new list, but use a style that immediately starts animating on that item, starting from this predefined location and animating its location in the new list. You may have to adjust the initial offset of the new item at runtime based on where it was inserted into the list.