Ellipse Drawing Animazione WPF

Question

Sto sviluppando un controllo che è un'area rettangolare e disegnerà un'ellisse nell'area del rettangolo quando si verifica un trigger. Questo controllo sarà in grado di ospitare altri controlli come, caselle di testo, pulsanti, ecc. Così il cerchio verrà disegnato attorno a loro quando attivato. Voglio che il cerchio venga disegnato come un'animazione come se stessi girando i controlli interni con una penna.

La mia domanda è qual è il modo migliore per farlo. Ho fatto qualche ricerca e potrei usare l'animazione WPF o potrei usare GDI + per realizzare i compiti. Sono nuovo all'animazione WPF, ecco perché sto facendo la domanda.

Answer 1

L'animazione WPF rende questo estremamente facile. Qui è la tecnica di base:

1. Creare aspetto visivo del vostro un'ellisse utilizzando qualsiasi funzionalità di WPF che ti piace (forme, percorsi, geometrie, Pennelli, disegni, immagini, ecc). Può trattarsi di una semplice ellisse o di un disegno elaborato creato dal tuo grafico o da qualsiasi altra via di mezzo.

2. Applicare un OpacityMask costituito da un'ampia linea tratteggiata ellittica con un singolo trattino a lunghezza zero. Poiché il trattino è a lunghezza zero, l'intera ellisse in stile personalizzato sarà invisibile.

3. Animare la lunghezza del trattino. Man mano che si allunga, le parti dell'ellisse diventeranno opache (quindi saranno visibili) finché non sarà tutto visibile. Di default l'ellisse si animerà senza intoppi da 0 a 1, ma puoi controllare e variare la frequenza dell'ellisse tramite i parametri dell'animazione, ad esempio potresti iniziare lentamente all'inizio e poi accelerare.

Struttura generale di soluzione

Ecco la struttura ControlTemplate 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> 

Creazione di ellisse visiva

WPF è incredibilmente ricco di esprimere grafica, in modo il cielo è il limite quando si tratta di ciò che può fare la tua ellisse Assomiglia a.

Disegnare l'ellisse esattamente come si desidera che appaia utilizzando qualsiasi tecnica di disegno WPF. A seconda di quanto "artistico style" che vuoi da l'ellisse si può fare un semplice (e noioso) accarezzato ellisse o qualcosa di arbitrariamente di fantasia, come ad esempio:

• Stroke un percorso che circa un'ellisse ma non chiuso, e forse esplose.
• Riempi un percorso creato da un grafico che inizia come se un pennello lo stesse facendo e forse si allarga mentre vai in giro e finisce in un blob.
• Creare un disegno vettoriale in Expression Design (o Adobe Illustrator), convertirlo in un disegno XAML.
• Creare un'immagine bitmap (notare che in bitmap generale hanno fedeltà e prestazioni svantaggi rispetto ai disegni vettoriali)
• disegnare più forme su una tela utilizzando Expression Blend

Ecco un ultima analisi semplice un'ellisse:

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

animare la tua ellisse

Anche in questo caso ci sono un enorme var In tanti modi puoi farlo, a seconda di come vuoi che la tua animazione appaia. Per un semplice animazione 0 ° a 360 vostro DoubleAnimation può essere semplice come:

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

La costante 3,1416 è leggermente sopra pi, che è la circonferenza di un cerchio di diametro 1. Ciò significa che l'ellisse sarà completamente visibile proprio alla fine della durata dell'animazione.

Una soluzione alternativa

StackOverflow utente Simon Fox aveva postato una risposta contenente un collegamento a this article by Charles Petzold, ma la sua risposta scomparso pochi minuti dopo. Immagino che l'abbia cancellato. Il codice Petzold mostra un modo più semplice per farlo utilizzando PathGeometry e ArcSegment. Se tutto quello che vuoi è una semplice ellisse senza fronzoli, la modellazione del codice sul suo esempio è probabilmente la strada da percorrere.