Archive

Archive for février 2011

[SL4 – WPF] : Pixel shader performance tips

23 février 2011 2 commentaires

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

[SL4] : Silverlight 4.0.60129.0 GRD3 Runtime update KB2495644

Sortie d’une mise à jour attendue depuis de nombreux mois du runtime Silverlight 4. Celui-ci correspond au GRD3 en interne et est distribué sous la mise à jour KB2495644 et correspond au numéro de version : 4.0.60129.0

silverlight-logo

Pour la récuperer plusieurs adresses importantes :

Celle-ci corrige :

  • Souci du Timestamp lors de la lecture de médias avec le codec VC-1
  • Crash de VS lors du profiling d’une application Silverlight ayant des pixels shader
  • Possibilité de lancer Silverlight en tant que process 32-bit avec Firefox 64bits sur OSX
  • DRM 6207 error
  • Résolution du fameux problème de MemoryLeak introduit avec Silverlight 4 datant de plus de 10 mois (cf http://forums.silverlight.net/forums/t/171739.aspx : 13+ millions de lecture et 420+ réponses, autant dire qu’elle était attendue !) 
  • Mise a jour d’une application OOB ayant changé de nom
  • Amélioration de la latence réseau (cf : KB2505882)

Enjoy 🙂

Catégories :Silverlight, Silverlight 4

[SL4–WPF] : HorizontalContentAlignment ListBox problem

8 février 2011 1 commentaire

Une petite astuce suite à une question d’un lecteur ayant un problème pour étirer un élément sur toute la largeur dans une ListBox.

Ceci est un bug présent dans Silverlight mais n’existe pas dans WPF.

Illustration du problème

Nous obtenons un alignement sur la gauche de notre ItemTemplate !

image

Alors que nous souhaiterions :

image

Base de code

XAML

        <UserControl x:Class="SilverlightApplication2.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid Background="White">
        <ListBox ItemsSource="{Binding}">
            <!--ITEM TEMPLATE-->
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="1"
                            BorderBrush="Blue"
                            Margin="5"
                            Padding="5">
                        <TextBlock Text="{Binding}" />
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

CS

  public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            DataContext = new List<String>()
            {
                "A",
                "B",
                "C",
                "D",
                "E"
            };
        }
    }

Solution en WPF : une ligne !

La solution est de mettre HorizontalContentAlignment=”Strech” en attribut de la ListBox…

 <ListBox ItemsSource="{Binding}"
                 HorizontalContentAlignment="Stretch">
<!-- ... -->
                 </ListBox>

Solution en Silverlight

Redéfinir le style par défaut du ListBoxItem, qui ne contient cette notion pour le moment.

 <ListBox ItemsSource="{Binding}">
            <!--ITEM CONTAINER STYLE-->
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment"
                            Value="Stretch" />
                </Style>
            </ListBox.ItemContainerStyle>

            <!--...-->
           
        </ListBox>
Catégories :Silverlight, WPF