I want to animate insert\delete the item in a StackPanel.
Eg: If new item inserted into collection all other items smoothly free space for new item and vice versa.
Can anyone suggest examples or ideas on this topic?
I would animate the Height of objects
If adding, I would add items with a Height of 0 and animate it full size
If deleting, I would animate the height to 0 and remove the item when the height hits 0
This should work for most single-line items, although if your items contain multiple controls that are designed to stretch and fit whatever space is available to them, you might have to find another solution.
Related
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 ListView which is explicitly populated (no binding) with ListViewItems.
Most of the items need to Visible and others should remain collapsed. All the items are of the same height.
The problem is if I have 100 items and first 60 are visible and the bottom 40 are in collapsed state, the scroll bar's height become something based on the assumption that all the 100 items are in visible state and the scroll bar's height becomes less than what it should be. But when I scroll down to 60, it realizes that the rest 40 are in collapsed state and therefore increases the scroll bar's height to make it appropriate for 60 items in the list view.
I initially thought it may be because of virtualization. But I dod not have any binding of data to the list view. I also tried to set the height of the items to 0 that need to be in collapsed state which did not give me the desired result.
What I need is, if there are 60 items visible and 40 collapsed then the scroll bar's height should be based on only 60 items in the list view and should remain constant.
Is it possible to achieve?
I had exactly the same problem, and the answer can be found here: Listbox scrollbar thumb changes size when content is variable height
Shortly, add ScrollViewer.CanContentScroll="False" on the ListBox and the scrollbar will have constant height regardless on the number of collapsed items.
By the way, I am aware that the question is almost 2 years old, however I'd like to leave it for future reference.
I'm not sure what made you decide it wasn't virtualization, as that is what it must be. Try turning off virtualization:
<ListView VirtualizingStackPanel.IsVirtualizing="False" ...
Normally a WPF WrapPanel (Orientation="Vertical") will stack items vertically (and grow vertically) until it runs out of space from the parent container, and then it will "wrap" to the next column.
I want this functionality, but I want to add a hard limit to the number of items in a column. For instance, if my height is 100 and I have 3 items that are 30 pixels high, normally it could fit them all without wrapping. However, say I want to force it to wrap after 2. In that case, I want it to only grow to a height of 60, and wrap the 3rd item into the second column.
Is there something I can do to make this happen?
Maybe you can do it with the UniformGrid.
Use the Rows property to definie the amount of elements in vertical direction.
here is a nice little article about the available layout panels in WPF. If one of these does not fit the bill, you might have to build your own custom panel, here is a decent demo.
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.
well what i want is this lets say i have a "panel" with the width 100 and height 100
now i want to place X objects witht the size 20 so when i add more 5 items it should have all items on one line
|Item1|Item2|Item3|Item4|Item5|
now if i would add one more then i want it to split it to 2 lines with 3 items on each row
|Item1|Item2|Item3|
|Item4|Item5|Item6|
and well i guess you get the point, iv tryed stack panel but i cant get it to work the way i want it to..
Edit:
well it doesnt matter that mutch if each row has an equal amount of items.. so a wrapPanel should do the job next problem -> Here
There's no standard WPF panel that will do this for you. The WrapPanel comes close, but it will not make sure that your rows are even. Your best bet is to implement your own panel. Here's a good example on codeproject
The WrapPanel should suit your needs:
Controls are positioned in either a
stack or row based on the Orientation
property. In addition to stacking, the
WrapPanel provides wrapping support
for contained controls. Thus if more
controls are added to a WrapPanel than
can be displayed by the width of the
WrapPanel, they are wrapped around to
form an additional stack or row.
To be honest, I haven't tried that specific requirement myself.
I guess you could use WrapPanel... but then you would get 2 lines, (5 items and 1 item)..
What would happen if you had, say.. 7 items?
I don't think you will be able to get a container control that does that automatically. You could have a Grid with two rows and a StackPanel in each row. As you add the items you would need to programmatically select which StackPanel to put each item into.