WPF Window ScaleTransform animation

Question

I have a Window in WPF that I want to display with ShowDialog and when the window is displayed it should have a scaling animation. I have successfully created the animation and all works great except one thing:

When the window approaches it's fully scaled state and the easing function kicks in, the outer edges of the window seems to go beyond the actual window bounds and get clipped. How can I use this scaling animation with easing and not have it clipped?

This is the scaling animation I'm using:

<DoubleAnimation Storyboard.TargetProperty="(Window.RenderTransform).(ScaleTransform.ScaleX)"
                 BeginTime="0:0:0.0" Duration="0:0:0.4" From="0" To="1">
   <DoubleAnimation.EasingFunction>
      <BackEase EasingMode="EaseOut" Amplitude="0.25" />
   </DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetProperty="(Window.RenderTransform).(ScaleTransform.ScaleY)"
                 BeginTime="0:0:0.0" Duration="0:0:0.4" From="0" To="1">
   <DoubleAnimation.EasingFunction>
      <BackEase EasingMode="EaseOut" Amplitude="0.25" />
   </DoubleAnimation.EasingFunction>
</DoubleAnimation>

EDIT: The reason it appears to clip is that the easing function doesn't move the window but rather the contents within the window; at least that's what it appears to be doing. The window has a custom style and the top corners are rounded. The actual window has a transparent background. So when the easing function kicks in the inner contents reach past the size of the actual window and the hard 90 degree corners are showing since the content is stretching beyond the size of the window.

The inner content stretching at that point should not be happening since the animation is tied to the window itself and not the contents of the window.

Answer 1

I had the same issue. The window cannot grow when using ScaleTransform, since it's semantic in nature. That is, it doesn't change WPF calculated layout values, and only applied after the layout has been set.

My solution to this was simply to make the window larger, with transparent margins. and remove it's borders. You can find a working example here: WPF MessageBox

Answer 2

Try this to set width and height to actual size <Window ... SizeToContent="WidthAndHeight" />