[If you are in a hurry then the answer is CacheMode=BitmapCache. If you want to read the story/know more then read on]
I have been working on a Windows Phone 7 comic book reader over the last couple months. It’s actually done and has seen a few revisions. During the testing of my original release, my friend (and fellow member of the Florida WP7 developer’s club) Brian Kassay suggested that I should use a different library for my image gestures.
You see when you are viewing a comic book page with my reader you are actually looking at a single image which you can move around on the screen as well as can zoom into/out of, and change pages. The page/image viewer was really sluggish on the device. Brian thought it was the gesture library I was using, but nope. after wiring up a different library (the same one Brian uses), the performance was absolutely identical. No change whatsoever.
After listening to a bunch of performance podcasts and finally got my head wrapped around the problem. I turned on redraw regions (which is another tip I can give you), and saw that my image was re-rendering everytime I touched it with my finger (panned it around the screen)
Back in the Silverlight3 timeframe Microsoft added the ability to create an out of browser app that takes advantage of GPU Acceleration.. One of the things that surrounded this feature was a little property that I had totally ignored: CacheMode. I kind of thought the whole GPU acceleration thing was more about building games and ignored the topic. BUT, GPU Acceleration is on by default in WP7 (and I don’t think there is a way to turn it off). It’s on because guys at Microsoft knew we would need to take advantage of the GPU in WP7 apps more often then in standard Silverlight apps (because we are dealing with a CPU-limited phones). So, I switched this property from the default to “BitmapCache” on my image which was rendering constantly. Instantly I went from slow to fast when panning/zooming the image.
You may be wondering “should I turn this on for everything thjen?" Just cache the entire LayoutRoot?” Well, MSDN suggests to “Set the CacheMode property when you need to increase performance for content that is time consuming to render.” CacheMode=BitmapCache simply causes the element it is applied to to render a single time. The resulting Bitmap is cached and re-used for later render cycles (this is probably taking up some memory somewhere). This is great to use on elements that to don’t animate. I would suggest that you look at your WP7 UI and turn on redraw regions. Watch your app you will see what is rendering excessively. Try setting the CacheMode on these elements and see if your performance increases.