Search code examples
wpfxamlresourcedictionaryrendertransform

How does one stop elements from overlapping during and after a scaletransform animation in WPF?


I have a ListBox that has items with a RenderTransform based on a Style.Triggers attribute with storyboard animation including a scaletransform of x 1.5 and y 1.5. The result is hideous, and I am looking for a way to get the items to stop overlapping as they do in the image below.

The horrible animation effect on the regions that the ListBoxItems occupy.


Solution

  • The RenderTransform is applied after the layout is done - meaning that the sizes and positions of the UI elements are already computed. Applying the transform at this point won't move the surrounding elements.

    Instead, you could set the transform to the LayoutTransform property - then the transform will be applied during the layout pass.