Accueil > Silverlight, WPF > [SL4 – WPF] : Pixel shader performance tips

[SL4 – WPF] : Pixel shader performance tips

Je partage aujourd’hui une petite astuce que j’utilise depuis longtemps pour pouvoir utiliser un pixel shader tel que le DropShadowEffect sans perte de performance.

Démonstration du problème

Nous allons faire un test avec un border arrondi avec un DropShadowEffect et contenant une TextBox.

<Border HorizontalAlignment="Center" Height="300" VerticalAlignment="Center" Width="300" Background="White" CornerRadius="5">
	<Border.Effect>
		<DropShadowEffect Opacity="0.5" ShadowDepth="0"/>
	</Border.Effect>
	<TextBox Margin="8"/>
</Border>

Maintenant activons les outils de débug inclus nativement dans Silverlight. Pour cela ajoutez les lignes suivantes dans la page aspx ou html affichant votre xap :

<param name="enableGPUAcceleration" value="true"/>
<param name="enableFrameRateCounter" value="true"/>
<param name="enableRedrawRegions" value="true"/>

Lancez l’application et saisissez un texte dans la TextBox.
 SilverlightBorderWithTextBoxAndDropShadow

On s’apercoit que le border est recalculé à chaque fois que la TextBox effectue un Rendering ! Ceci est très peu performant…

La solution au problème !

La technique que j’utilise depuis pas mal de temps est de réaliser le DropShadowEffect sur un arbre visuel très réduit et présent en background comme présenté ci dessous :

<Grid HorizontalAlignment="Center" Height="300" VerticalAlignment="Center" Width="300">
	<!--BACKGROUND + DROPSHADOW-->
	<Rectangle Fill="White" RadiusX="5" RadiusY="5">
		<Rectangle.Effect>
			<DropShadowEffect Opacity="0.5" ShadowDepth="0"/>
		</Rectangle.Effect>
	</Rectangle>

	<!--CONTENU-->
	<TextBox Margin="8"/>
</Grid>

Le résultat est sans appel ! :
SilverlightBorderWithTextBoxAndDropShadowFastPerformance

Conclusion

L’idée étant de ne pas effectuer un Effect sur un arbre visuel complexe. Pour cela je vous conseille de mettre un controle le plus simple possible par exemple un Rectangle plutot qu’un Border qui est plus complexe à afficher du fait que ce soir un ContentControl.
Puis vous englobez ce Rectangle dans une Grid et vous mettez votre arbre visuel complexe (ici notre TextBox).
Ainsi comme le rectangle ne recoit pas de demande de rafraichissement lors de la saisie de texte dans la TextBox, celui-ci ne réexécute pas le calcul du DropShadowEffect à chaque changement.
Vous disposerez ainsi d’une IHM très réactive tout en pouvant utiliser les Effects de WPF et Silverlight !

Enjoy 🙂

Publicités
Catégories :Silverlight, WPF
  1. 25 février 2011 à 15 h 28

    Super utile, fallait y penser!

  1. 25 février 2011 à 5 h 24

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s

%d blogueurs aiment cette page :