Windows Phone 7 Page Transitions very slow using Toolkit - silverlight

I have the problem that whenever I use the Page Transitions from Windows Phone 7 Toolkit, the transitions are very slow and the whole app seems to have framed drops. The animations are "stuttering".
Is anyone else experiencing this?
I'm using the TransitionFrame class as RootFrame and in the .xaml pages I'm using code like
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:SlideTransition Mode="SlideDownFadeOut" />
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>

I'd recommend against using the WP7 Toolkit Page Transition animations.
If you activate the performance counters you can see that just by changing the root frame to the WP7 frame, your fill rate is increased by 1. Since fill rates even in the best of apps are 1.5+ and the recommended maximum is 2.5, I'd say that's very bad.
Telerik has a WP7 Page transition control you might want to checkout. But honestly, I couldn't find/code any generic page transition that gives a well-performing page flip effect.

The latest changeset include some performance improvements for transitions. You could give them a try.
WHat's on the page could also impact performance. Does it contain a lot? or any events/storyboards which could be being triggered by the transition?

The new version of the silverlight toolkit (august 11) is much more faster than the old one! Transition animation begins right after click on an item. Try it out, eventually you also have to change other libraries (eg Microsoft.Phone.Controls) as found in
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Libraries\Silverlight
Toolkit can be found in:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11

This Link might help,
the frame is painted with the background brush colour with every
frame, as well as the page being painted.
The striking thing about this is that it's painting the colour that is
the same as the background behind it anyway. If the selected theme has
a dark background it's painting black on top of black. Or, if the
theme has a light background it paints white on white.
If we combine this knowledge of the unnecessary work the
TransitionFrame is doing with the fact that anything transparent
doesn't contribute to the fill rate a solution presents itself to us.
We just need to make the background of the TransitionFrame transparent

Related

Black Border While Resizing

Im beginning in my journey of learning WPF. After a few days of coding I see that whenever I resize any WPF form I get a black border on the bottom and right while resizing, like an artifact, as if the screen is too slow. When working with winforms I never noticed this.
Like so :
Is this a known problem? any simple workaround?
EDIT 1:
Seems its related to the graphics driver, I only work on laptops with weakish gfx cards, so does anyone else have this issue? (Im also using Win7 SP1)
It's a known problem, and it's unlikely that it will be fixed. There is a work-around that reduces the impact of this problem if your background is sufficiently uniform: https://stackoverflow.com/a/14309002/33080
My understanding of the underlying cause is that WPF controls lag behind on resizes: WPF draws them in the "wrong" location briefly. See the linked question for a demonstration.
If you resize a window it has to redraw. This takes some time and also it occurs after the window manager already resized your window and shows it; in that case you'll get a black border in WPF and one with the normal window background (grey, usually) in Windows Forms.
Usually all you can hope for there is that the computer is fast enough with the redraw to not show it.

WPF high dpi issues

I created a simple web browser WPF test application with pictures and text within a canvas, with windows set at 96dpi.
Then I switched to 120 dpi and :-((( Display is messy, image size changed and part of the canvas is out of view...
When I used Winforms, I set the AutoScaleMode property to None and the windows keeps its size, the controls as well, the controls which have inherited font are properly displayed, not blurry and not too big...
What can I do to mimic this (good) behavior in W¨F?
I'm not clear on what you mean by "web browser WPF ... application". WPF doesn't run in a Web browser, unless you're talking about an XBAP. Or are you doing Silverlight? Or is it just a WPF navigation application and not browser-based at all? You'll need to clarify.
WPF automatically scales your content when you run in high-DPI modes. This is intended behavior: if the user explicitly says they want everything to be bigger on the screen, then WPF will respect the user's wishes. The old WinForms hacks of "pretend high-DPI doesn't exist, just show everything at the normal small size and hope it doesn't piss the user off too much" aren't available in WPF; you could probably emulate them if you worked at it, but you're steered very strongly toward doing the Right Thing.
WPF scales everything, so your statement that "part of the canvas is out of view" doesn't make sense. It should be scaling the canvas, its parent window, and its child elements all by the same amount, so if everything fits at 96dpi, it should also fit at 120dpi and 144dpi. If not, then you're doing something strange and you'll have to provide a code sample that reproduces the problem.
You seem to be claiming that fonts are blurry when you run in a high-DPI mode, which sounds very strange. Fonts are rendered as vectors, so they should scale cleanly, and render crisply even in high-DPI modes. I've never seen the blurry fonts you describe, so again, you'll have to provide a repro case.
The only thing that I would expect to be blurry are images. If you're using raster (bitmap) images (BMP / GIF / JPG / PNG) in your UI -- for example, for the icons on a toolbar -- then yes, those will look pretty bad when they're scaled. It pretty much always looks bad when you take a small bitmap and make it larger. You might try working around this by using larger images and sizing them down for display -- for example, if you want your toolbar images to be 16x16 (when in standard 96-dpi mode), then you could try putting a 32x32 bitmap in your project, setting the Image element's Width="16" and Height="16" in your XAML, and seeing if that looks any better. It would actually be 20x20 physical pixels in 120dpi mode, and 24x24 in 144dpi mode, both of which would still be scaled down from the 32x32 resource and would therefore have a better shot of looking good than a 16x16 source image that's had to be scaled up. (I haven't tried this technique in a WPF toolbar, though, so I don't know how well it would really work in practice with typical toolbar images.)
The very best way to get around the problems with scaling images would be to use vector images instead of raster. Unfortunately, it's hard to find libraries of vector images. They're few, far between, typically less comprehensive than what you can find for bitmap images, and often expensive.
Presumably you use fixed length units (px). Try re-layouting your project keeping the WPF layout rules in mind. This page has some best practices for that.
I just found a bug using MaxHeight under WPF in .NET 4, set in a Style that gets inherited by another Style and that is used as a StaticResource, which didn't get influenced by the DPI set by the user. I set it from MaxHeight to Height, then it got influenced by the DPI. I suspect a bug in the .NET 4 (and possibly other frameworks) here.

WPF not rendering on remote desktop

I'm having problems with the rendering of a WPF app over a remote desktop connection.
The applications chrome is rendering, but none of the content is coming through, as if the window is not drawing. Instead the previous content of the screen is showing in it's place.
This has been a problem with the application running on both Vista & Win 7, with remote control being taken from XP and Win7.
The problem is not application specific, if I create a new WPF app, with just a textblock on the window, it will also not run. (Neather will the windows preview in VS2008 display.)
Is there some trick to getting WPF running under RDP?
I read on Kevin Dente's blog (from a twitter post) that he was having trouble with WPF apps in virtual machines. While not the same as Remote Desktop, it's possible the problem could be the same. Kevin was able to fix his problem by disabling hardware accelleration by creating a DWORD registry value at
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Avalon.Graphics\DisableHWAcceleration
and then setting it to 1.
His original blog post is here: http://weblogs.asp.net/kdente/archive/2009/10/19/visual-studio-2010-beta-2-editor-performance-fix-running-on-a-virtual-machine.aspx
That may not be your exact solution, but maybe it points you in the right direction.
WPF should render over RDP; it's smart enough to know when it can render in hardware, and when it can't it reverts to its own GDI+ based software rendering. I would make sure you're running .NET Framework 3.5 SP1 on the remote machine, since there were changes to remoting that might pose issues. (See link below.)
I've been developing a WPF app for the past 6 months and it works just fine over RDP. (From Vista and Win7 to XP, Vista and Server 2003.) One important caveat, however, is that it renders using the Classic theme. So if you're using controls that don't have a classic theme, they won't render. If you're just dropping a TextBox on a Window, then obviously that's not your problem.
Check out this question for some links that may be helpful: Are there problems with rendering WPF over Remote Desktop under Windows XP?
I just had this problem with the ribbonwindow not displaying correctly when testing for the first time via RDP - the transparent background was white, the close minimize/maximize buttons were missing, the rounded corners on the bottom of the window were square, and the top row of ribbon buttons were almost impossible to select.
Turns out there was a simple fix for me. Right-click the RDP connection icon (I have it saved on my desktop), select "Edit", then the "experience" tab, and change "detect connection quality automatically" to "LAN (10 Mbps or higher)".
This fixed it for me.
Ade
Did you also try Win7 latest RDP - Win7 connection? The thing is WPF doesn't use GDI to draw elements.
VNC clients (like UltraVNC) probably will do the trick for you as they using much simplier algorithms more like of sending bitmaps.
I have the same problem than the asker. The standard, out-of-the-box Checkbox is not rendering correctly. I can only see if it is checked when hoovering the checkbox. Otherwhise, no difference between checked and unchecked. Important note : It occurs when setting the foreground to white (see here : https://social.msdn.microsoft.com/Forums/vstudio/en-US/1c03db49-7e53-4cbb-9dd1-b328017c4453/wpf-checkbox-and-radiobutton-check-mark-not-showing-under-xp-windows-classic-theme-and-remote?forum=wpf)
Our application used to have this problem with a custom progress bar.
We fixed this by setting the background color of the Border control to White. This leads me to think there is an issue with transparent backgrounds
There is no special trick needed to get WPF content to show across remote desktop. Our WPF-based app renders just fine over RDP (tried from numerous machines) with no problems. We're even using animations, gradients, WriteableBitmap, etc. w/ no problems.

Is there a good iTunes coverflow-type control for WPF?

I am currently using Telerik's carousel control, but it is lacking many features and is buggy. Is there a good control out there that looks the the coverflow control in itunes?
WPF Cover Flow Tutorial
Source Code: Part 7, Download
Author's rebuttal to claim of memory leak (it doesn't): Part 8
In Action: Videos
Contains a detailed walkthrough for building a coverflow control, including features such as reflection. I compiled and tried it out and pointed it to a directory containing hundreds of smallish images (you'll need to edit TestWindow.xaml.cs to point to a directory containing jpg's) and I was impressed with the performance and smoothness of the animation.
I noticed that using very large images degrades the performance though, so I'd recommend using images that are just the size needed for display. For example, when pointed to my desktop background images directory, there was nearly a one-second delay after pressing the arrow key and the item going through the transition (although the animation itself was still fluid, it took a moment to begin).
This is the best one that I found, for what I was looking for - namely, non-commercial, reflections, and smooth animation. I did look at the other ones currently mentioned in the other answers though, here are some comments on them (in no particular order):
FluidKit's ElementFlow
Open source, I used the latest source code, but did not try out any patches
Animation was smooth
Transition didn't feel very refined, the pictures clip each other in an odd way
Didn't seem geared for showing a handful of element's on the screen at once, it tries to show everything, and from some of the discussion comments, apparently isn't virtualized
After adding some images to the demo through the provided button, a large portion of them couldn't seem to get selected
Doesn't have reflections
Mindscape CoverFlow
Commercial
Animation was smooth
Doesn't "popup" selected item, feels very 2D
Has reflections
DevExpress Carousel
Commercial
No online demo and I didn't try to obtain the trial, looks polished though
Telerik Carousel
Commercial
Animation was smooth
The transition wasn't as pleasing to me, the new picture passed through the old one
Doesn't have reflections
Xceed Cardflow 3D
Commercial (professional edition only)
Animation was smooth, if you went quickly it would show blank cards speeding by and then fade in the actual data on the cards when you slowed down
Supports flipping the selected item, like in iTunes
Has reflections
ElementFlow control is inside the codeplex project called FluidKit - can be downloaded from here
For more details about the control - ElementFlow control at Pavan's blog
Mindscape now provide a commercial WPF Coverflow control as part of their WPF Elements control pack that might be useful also.
http://www.telerik.com/products/wpf/carousel.aspx
http://www.devexpress.com/Products/NET/Controls/WPF/Carousel/dependency_properties.xml
Both of these are FAR more versatile than your average cover flow clone (though they can easily just do that too if you want). I'd recommend Telerik well above DevExpress as WPF is still a relatively immature technology and DevExpress are very poor at keeping up with the tech game (they only JUST released a VS2010-supporting version of their DXperience suite despite promising it "just around the corner" since the start of January, while Telerik, ComponentOne etc all keep up with current tech. Not good enough for enterprise).

Is it possible to have an animation appear on WPF NavigationWindow?

I have a NavigationWindow which hosts a series of Pages. For design reasons the Pages are fixed at 780x580 but the NavigationWindow can be set to maximize, leaving a lot of black background around my Pages.
I would like to show a fairly simple, unobtrusive animation (just some labels of various opacity/size streaming from side to side) continuously running behind all the Pages... the logical place would be the NavigationWindow so that there would be no interruption when the user navigates from page to page.
Neither Blend not Visual Studio give me access to controls when I have the NavigationPage in the designer, so my guess is that I cannot do it that way.
Anyone have a suggestion on how to do this, or a workaround that nets me the same result?
I was poking around at this alittle last night, I'll let you know if I come up with anything. Have you looked at the MSDN NavigationWindow ControlTemplate Example

Resources