Ellipse Dessin Animation WPF

Question

Je développe un contrôle qui est une zone rectangle et dessine une ellipse dans la zone rectangle quand un déclencheur se produit. Ce contrôle sera capable d'héberger d'autres contrôles tels que des boîtes de texte, des boutons, etc. afin que le cercle soit dessiné autour d'eux quand il est déclenché. Je veux que le cercle soit dessiné comme une animation comme si vous encercliez les contrôles internes avec un stylo.

Ma question est quelle est la meilleure façon d'y parvenir. J'ai fait des recherches et j'ai pu utiliser l'animation WPF ou utiliser GDI + pour accomplir les tâches. Je suis nouveau dans l'animation WPF, c'est pourquoi je pose la question.

Answer 1

L'animation WPF rend cela extrêmement facile. Voici la technique de base:

1. Créer l'aspect visuel de votre ellipse en utilisant toutes les fonctionnalités que vous aimez WPF (formes, chemins, Géométries, brosses, dessins, images, etc.). Cela peut être une simple ellipse ou un dessin fantaisie créé par votre graphiste, ou n'importe quoi d'autre.

2. Appliquez un masque d'opacité constitué d'une ligne pointillée elliptique large avec un seul tiret de longueur nulle. Comme le tiret est de longueur nulle, toute l'ellipse personnalisée sera invisible.

3. Animer la longueur du tiret. Plus les parties de l'ellipse deviennent longues, plus elles deviennent opaques (donc visibles) jusqu'à ce que tout soit visible. Par défaut, votre ellipse s'anime doucement de 0 à 1 mais vous pouvez contrôler et faire varier le taux d'ellipse qui apparaît via les paramètres d'animation, par exemple vous pouvez commencer lentement au début puis accélérer.

Structure globale de la solution

Voici la structure ControlTemplate de base:

<ControlTemplate TargetType="MyCustomControl"> 
    <Grid> 

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}"> 
     <Rectangle.OpacityMask> 
     <VisualBrush> 
      <VisualBrush.Visual> 
      <Ellipse 
       x:Name="opacityEllipse" 
       StrokeDashArray="0 10" 
       Stroke="Black" StrokeThickness="0.5" 
       Width="1" Height"1" /> 
      </VisualBrush.Visual> 
     </VisualBrush> 
     </Rectangle.OpacityMask> 
    </Rectangle> 

    <ContentPresenter /> <!-- This presents the actual content --> 

    </Grid> 
</ControlTemplate> 

Création d'ellipse visuelle

WPF est incroyablement riche en exprimant visuels, afin le ciel est la limite quand il s'agit de ce que votre ellipse peut ressembler. Dessinez votre ellipse exactement comme vous le souhaitez en utilisant n'importe quelle technique de dessin WPF. Selon la quantité de « style artistique » que vous voulez de l'ellipse que vous pouvez faire simple (et ennuyeux) caressa ellipse ou quoi que ce soit de façon arbitraire de fantaisie, tels que:

• Stroke un chemin qui à peu près une ellipse, mais pas fermé et peut-être évasé.
• Remplissez un chemin créé par un concepteur graphique qui commence comme si un pinceau le faisait et peut-être s'élargit au fur et à mesure que vous faites le tour et se termine par un blob.
• Créez un dessin vectoriel dans Expression Design (ou Adobe Illustrator), convertissez-le en dessin XAML.
• Créer une image bitmap (notez que dans les bitmaps généraux présentent des inconvénients de fidélité et de performance par rapport aux dessins vectoriels)
• dessiner plusieurs formes sur une toile en utilisant Expression Blend

Voici une ellipse finalement simple:

<VisualBrush x:Key="EllipseVisualAppearance"> 
    <VisualBrush.Visual> 
    <Ellipse StrokeThickness="0.1" Stroke="Blue" /> 
    </VisualBrush.Visual> 
</VisualBrush> 

Animer votre ellipse

Encore une fois il y a un énorme var Vous pouvez le faire en fonction de la manière dont vous souhaitez que votre animation apparaisse. Pour une simple animation 0 à 360 votre DoubleAnimation peut être aussi simple que:

<DoubleAnimation 
    StoryBoard.TargetName="opacityEllipse" 
    StoryBoard.TargetProperty="StrokeDashArray[0]" 
    From="0" To="3.1416" Duration="0:0:0.5" /> 

La 3,1416 constante est un peu plus pi, ce qui est la circonférence d'un cercle de diamètre 1. Cela signifie que l'ellipse sera entièrement visible juste à la fin de la durée de l'animation.

Une solution alternative

utilisateur StackOverflow Simon Fox avait posté une réponse contenant un lien vers this article by Charles Petzold, mais sa réponse a disparu quelques minutes plus tard. Je suppose qu'il l'a supprimé. Le code Petzold montre une façon plus simple de le faire en utilisant PathGeometry et ArcSegment. Si tout ce que vous voulez est une simple ellipse sans fioritures, la modélisation de votre code sur son exemple est probablement la voie à suivre.