I have stack panel with custom controls in it. User can add or remove the items.
I have attached MouseDragElementBehavior to each item. So now user can move them within the stack panel.
However the items now are arranged on arbitrary manner. Is a mess really. They stay where the user left them.
What I need now is to make them to be stacked as the stack panel supposed to be... Nicely one by one...
So I need to simply let user change the order of items by using drag / drop operation but items has to be stacked precisely.
There is DragFinished event, but I dont really see how the Behavior moves items. I thought it is Margin it changes but margins stays 0... I dont know what to do next.
Appreciate little help.
MouseDragElementBehavior does its work using a Transform on the RenderTransform property of the attached element (i.e. the one the behavior is applied to) (the exact type of transform depends on the state of the RenderTransform property but it will either be a TranslateTransform or a MatrixTransform).
The transform is not reset when you finish dragging (nor would you want it to be because the element would snap back to its position in the StackPanel when you started dragging) and this is why the element stays where "the user left them".
To change the items position in the StackPanel in the way you are talking about you will have to use the DragFinished event. What you probably want to do is work out where in the StackPanel the element will end up (as a result of the drag, i.e. which element in the panel it will "push" down) then create an animation to animate the element from its current position (where the user released the drag) to that final position in the StackPanel and another animation to move the "pushed" element in to its new position in the StackPanel (VisualTreeHelper can probably help here (I think)). Once those animations are finished just set the new index within the StackPanel for each item and remove the RenderTransform translation.
Related
I'm in the process of creating an ItemsControl that will have something similar to a StackPanel for its ItemsPanel. However, I want the user to be able to rearrange items in the panel, and have them animate to their final positions like this:
I've done some searching, and a lot of the examples I have found that do something similar, implement the animations by setting the desired position of all items to 0,0 and applying a RenderTransform storyboard in the Panel.ArrangeOverride method to offset each item vertically.
Whilst this works, is this the correct way to be doing it? Doesn't this mean the controls won't take part in normal layout as they're all set to 0,0?
Will this have side effects?
I was wondering if I should use the above method for the animation, and then when the animation ends, do another final invalidation of the arrange layout, but this time using actual positions instead of render transforms?
I have grid with some textboxes and an image which goes out of grid boundaries and I add this grids dynamically in my code to another grid.
I want to have my image on top of all the rest of the grids. Unfortunately each grid I add to the root grid will hover over my previous grid image.
Could you please suggest anything?! I have tried with zindex and it did not work in my case.
What I am doing wrong?
ZIndex only works for the immediate children of a panel-derived container (Grid, Canvas, Stackpanel etc). Otherwise it is down to the order they exist in the visual tree (i.e. the last one gets displayed on top).
If you have nested objects you simply need to think about the order they are added. The simplest way to do this is have two top level grids/panels, the first contains everything else and the last containing just the dynamically added children.
This way whatever you put in the second grid will always be on top of all other items (in the first grid/container).
I have a Rectangle nested within a Canvas. The rectangle has a MouseDragElementBehavior attached to it, so it can move freely in the canvas.
I need to calculate the position of the rectangle after each drag. The problem is that the
Canvas.GetTop(rectangle1)
only works for the first time, i.e. before the rectangle is dragged. After the drag, the method call returns the initial position.
Those behaviors usually work by applying a RenderTransform, if it uses a TranslateTransform you can get the offset value from that and add it to the canvas position.
Alternatively you might just want to implement your own dragging logic.
I have some problems with implementing autoscrolling in WPF (I think I could call it that way).
I have a canvas placed inside a scrollviwer. On my canvas I can dynamicly add different shapes. The position of this shapes can be changed with mouse. Everytime I add new shape on canvas or change position of shape I fire measureOverride function.Thanks to this scrollview "know" the real size of canvas and the scrollbars appear. However even if scrolbars appear, the view doesn't "follow" shape which I currently move. I mean if I reach visible part of canvas I would like canvas to srcoll.
I was trying to use this function
ScrollToHorizontalOffset()
However I have problem with proper use of that function. I was trying to use (as a parameter) canvas actualwidth but it didn't work well. I also was trying to use as a parameter current position of shape (which I move) but it works only one way. I the viewer follow the moving element if I was moving this element to right side of canvas. However if I move shape back(to the left) the view don't follow the shape.
I hope somebody will understand this :) It is hard to explain my problem.
I also was trying to use as a
parameter current position of shape
That is the correct way to implement. Waht you need is a converter, which will returns the position according to the direction you move the object.
I'm trying to drag and drop (slide) a Silverlight element from one part of a window to another.
I've implemented the MouseLeftButtonDown, MouseMove, and MouseLeftButtonUp event handlers on the element, but I've run into a bit of a problem.
All of the examples I've seen involve moving the element by setting the Canvas.Left and Canvas.Top properties. None of the elements I'm trying to manipulate live inside a Canvas. Is there a way to set the absolute position of the element being dragged, based on the coordinates of the mouse? Or is there a prepackaged solution to this problems somewhere that I've missed?
All panels but Canvas use some kind of constraint to position their children. Only Canvas lets you use absolute positioning. That's why I think it is the only way to implement drag and drop .
Feel free to use a Canvas on top of your existing panel. Just remember to remove the dragged element from its original parent and put it in the Canvas (or drag some kind of copy) and do the reverse on mouse up.
One way of achieving absolutely positioning an item inside any container, not only Canvas, is to use transformation instead of Left/Top properties. For instance, to set at Left=50 Top=80 you can modify the margin values through transformation.