2

Situation:

I have a keyboard (in the example a blue Rectangle) that slides in from the bottom of the window. I managed that animation with a Thicknessanimation that changes the MarginProperty of the keyboard. The "Content Grid" gets smaller and the content itself gets scrollable.

enter image description here

The animation works fine in the prototype but is too slow and stucks in the real application. I guess the content contains just too many controls and it calculates the shrinking for each frame.

Research:

In my research on improving the animation performance, I only came up with changing the frame rate of the animation.

In a tutorial for animated pages, they used the RenderTargetBitmap class to take a snapshot and only animated that snapshot in order to improve the performance.

Question:

Is the RenderTargetBitmap class the way to go? Are there other solutions and how would you improve the performance?

The goal is a slide in of a touch keyboard, like on the smartpone (e.g. iPhone).

Source:

MainWindow.xaml

MainWindow.xaml.cs

Community
  • 1
  • 1
AntiStoopMode
  • 231
  • 2
  • 12
  • Are you using RenderTransform or LayoutTransform? The latter is much slower than the former, because it must recalculate the layout at every step of the animation. – Thomas Levesque Jan 22 '14 at 15:07
  • @ThomasLevesque Good question. What's the default transform? I use MyGrid.BeginAnimation(MarginProperty, SomeThicknessAnimation). – AntiStoopMode Jan 22 '14 at 15:16
  • OK, I thought you were animating the properties of a transform applied to the grid. There is no "default transform"; you apply either a RenderTransform or a LayoutTransform (or both). What you're doing has the same effects as a LayoutTransform, since it causes a recalculation of the layout. – Thomas Levesque Jan 22 '14 at 15:18
  • Consider setting the RenderTransform of the grid to an instance of ScaleTransform, and animate the ScaleX and ScaleY properties of the transform. – Thomas Levesque Jan 22 '14 at 15:19
  • @ThomasLevesque I will try that. Edit: Current source of the example added! – AntiStoopMode Jan 22 '14 at 15:26
  • I tried TranslateTransform since I wanted to move the blue rectangle from the bottom to the top. My problem is now that the "Content Grid" should be shrinked like with LayoutTransform (atleast at the end of the animation). – AntiStoopMode Jan 22 '14 at 16:13
  • To do that you need a ScaleTransform – Thomas Levesque Jan 22 '14 at 16:58
  • I think we don't mean the same. I might used some words that are confusing like "shrink". What I want to do and tried to explain is to improve the performance of my animation that is an iphone/ipad keyboard slide in like animation. They keyboard slides up and the content grid is getting smaller. The actual content does not get shrinked/scaled at all. The only thing that happens is the Height of the Scrollviewer is getting decreased. – AntiStoopMode Jan 24 '14 at 15:22

0 Answers0