Silverlight 1.0, La notion de Clipping et de clipping animé

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 :

A1

  • Avec Clipping :

clip_image002

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>.

A3

Positionner les éléments comme suit :

clip_image001[1]

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>.

clip_image004

clip_image005

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 ».

clip_image006

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>.

clip_image007 

   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.

BlogClip

   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)

Publié vendredi 11 janvier 2008 15:06 par guillaume
Classé sous , , , , ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

# re: Silverlight 1.0, La notion de Clipping et de clipping animé vendredi 11 janvier 2008 18:12

Silverlight 1.0 m'a plutôt l'air d'une beta que d'une vrai version compte tenu de toutes les fonctionalités qui seront rajoutés à la version 2.0 (si elle tient ses promesses).

Après m'être habitué aux bindings, templates, et panels de WPF, je n'ai aucune envie de me servir de la version 1.0 (qui est comme tu le dis "archaïque" par rapport ce que la 2.0 va proposer).

RaptorXP


Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01