Pourquoi utiliser le clipping dans une application Silverlight ?

Les clips permettent de délimiter via un chemin ou des formes géométriques les zones d’affichage d’un élément. Dans le cas de Silverlight il est possible d’attacher des clips à des éléments XAML. Typiquement, un <Canvas>, un <Rectangle>,... pourra se voir attribuer la propriété Clip pour que tout son contenu qui tend à dépasser d'une zone définie soit non visible. Voir exemple ci-dessous, le <Canvas> est de couleur rouge.

• Sans Clipping :

• Avec Clipping :

Pour les intégrateurs web, la notion de Clip en Silverlight s’apparente à la notion de « overflow :hidden ; » en CSS/HTML.

Comment créer et appliquer un clip dans une application Silverlight ?

Expression Blend est la solution de simplicité. En utilisant le logiciel Expression Blend la problématique de Clip peut être résolue très facilement sans se soucier de la technique utilisée.

1 – Créer un <Canvas> de couleur de fond (background) rouge. Créer un <TextBlock>de couleur (foreground) blanc qui soit un enfant de <Canvas>.

Positionner les éléments comme suit :

2 – Créer un <Rectangle> au même niveau que votre <Canvas> dans l’arbre XAML. Ce rectangle représentera la zone visible de votre <Canvas>.

3 – Sélectionner l’élément <Canvas> ainsi que l’élément <Rectangle> comme le montre l’image ci-dessus. Dans la barre de menu située en haut de la fenêtre : « Object > Path », cliquer sur « Make Clipping Path ».

Le résultat obtenu est plutôt convaincant regardons de plus prêt comment cela fonctionne réellement.

D’un point de vue XAML il est intéressant de regarder comment Blend à traité la problématique. En regardant l’onglet XAML, on peut visualiser le code suivant :

<Canvas Background="#FFFF0000" Clip="M0.5,0.5 L332.5,0.5 L332.5,67.5 L0.5,67.5 z"></Canvas>

Blend associe un object Path à la propriété Clip. L’object Path est très intéressant mais peut très vite s’avérer très complexe à déchiffrer notamment quand on commence à utiliser des outils tel que la plume « Pen (touche P) dans Blend » pour réaliser des formes plus complexes que le rectangle. Il existe donc une solution plus accessible et déclarative : l’utilisation de l’objet Geometry qui consiste à dessiner des formes géométriques. L’objet Geometry est ainsi utilisable pour les clips et peut être traduit comme un Path. Un clip peut ainsi être une EllipseGeometry, un RectangleGeometry, un GeometryGroup, une LineGeometry ou un PathGeometry. Ci-dessous un exemple d'utilisation <GeometryGroup>.

   1:  <Canvas 

   2:      xmlns="http://schemas.microsoft.com/client/2007" 

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   4:      x:Name="Scene" 

   5:      Width="450" Height="325" Background="#FF000000"> 

   6:      <Canvas Width="396" Height="250" Canvas.Left="26" Canvas.Top="38" Background="#FFFF0000"> 

   7:          <Canvas.Clip> 

   8:              <GeometryGroup> 

   9:                  <EllipseGeometry Center="50,100" RadiusX="50" RadiusY="50" /> 

  10:                  <EllipseGeometry Center="150,190" RadiusX="40" RadiusY="40" /> 

  11:                  <EllipseGeometry Center="220,20" RadiusX="30" RadiusY="30" /> 

  12:                  <EllipseGeometry Center="205,110" RadiusX="30" RadiusY="30" /> 

  13:                  <EllipseGeometry Center="269,155" RadiusX="20" RadiusY="20" /> 

  14:                  <EllipseGeometry Center="360,90" RadiusX="10" RadiusY="10" /> 

  15:              </GeometryGroup> 

  16:          </Canvas.Clip> 

  17:          <Image Width="396" Height="343" Source="Garden.jpg" Stretch="Fill" /> 

  18:      </Canvas> 

  19:  </Canvas> 

Comment animer un clip dans une application Silverlight ?

Pour animer un clip il faut animer la propriété clip qui est soit un Path, soit une Geometry. Animer un Path devient très vite archaïque… le choix se fera donc très vite sur l’animation de formes géométriques. Cependant les animations ont elles aussi leurs limites. En silverlight il existe trois types d’animations : DoubleAnimation, PointAnimation, ColorAnimation vous n’aurez donc pas la possibilité (contrairement à WPF par exemple) d’animer des rectangleGeometry. Cela veut simplement dire que pour réaliser un Collapse/Expand panel l'utilisation des LineGeometry et des PointAnimation sera prescrit. Voici un exemple d’utilisation ci-dessous.

   1:  <Canvas Width="326" Height="192" Canvas.Left="56.296" Canvas.Top="75">

   2:      <Canvas.Clip>

   3:          <PathGeometry>

   4:              <PathFigure>

   5:                  <LineSegment x:Name="rctLineSeg1" Point="0,0"/> 

   6:                  <LineSegment x:Name="rctLineSeg2" Point="326,0"/>

   7:                  <LineSegment x:Name="rctLineSeg3" Point="326,192"/> 

   8:                  <LineSegment x:Name="rctLineSeg4" Point="0,192"/>

   9:              </PathFigure> 

  10:          </PathGeometry>

  11:       </Canvas.Clip>

  12:       <TextBlock .../>

  13:  </Canvas>

La subtilité est donc d'animer les LineSegment via un <Storyboard> lors du MouseLeftButtonUp.

Fermeture du Panel :

   1:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg3" Storyboard.TargetProperty="Point">

   2:      <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="326,0"/>

   3:  </PointAnimationUsingKeyFrames>

   4:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg4" Storyboard.TargetProperty="Point">

   5:      <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="0,0"/>

   6:  </PointAnimationUsingKeyFrames>

Ouverture du Panel :

   1:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg3" Storyboard.TargetProperty="Point">

   2:       <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="326,192"/>

   3:  </PointAnimationUsingKeyFrames>

   4:  <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rctLineSeg4" Storyboard.TargetProperty="Point">

   5:      <SplinePointKeyFrame KeySpline="0,0.4,0.6,1" KeyTime="00:00:00.45" Value="0,192"/>

   6:  </PointAnimationUsingKeyFrames>

Cette tâche qui au premier abord semble très simple s'avère bien plus compliquée qu'elle n'y parait. Nous pouvons donc espérer que la version 2 de Silverlight apportera quelques nouveautés dans le domaine du clipping et viendra enrichir le moteur d'animation déjà présent dans le plugin 1.0.

>> L'intégralité des sources est téléchargeable (Download)