Introduzione

Nel contesto dello sviluppo di applicazioni Windows Presentation Foundation (WPF) con il linguaggio di programmazione C#, è possibile utilizzare diversi componenti grafici per creare effetti visivi dinamici. Uno dei componenti fondamentali in WPF è il Canvas, che consente di disegnare e gestire forme geometriche e oggetti grafici all'interno di una finestra.

Il Canvas in WPF è simile al componente canvas utilizzato in JavaScript per il disegno su un'area bidimensionale. La particolarità del Canvas è che consente di ottenere o impostare la posizione di un determinato oggetto in base alle coordinate X e Y. Il punto (0, 0) si trova in alto a sinistra, e si possono utilizzare proprietà come Top, Bottom, Left e Right per posizionare gli oggetti, proprio come in CSS o JavaScript.

L'esercizio: Simulazione di Pioggia

Obiettivo

Creare un'applicazione WPF che simuli l'effetto della pioggia. L'interfaccia prevede due bottoni: uno per avviare l'effetto e uno per fermarlo.

• Quando l'utente clicca sul bottone "Start", iniziano ad apparire delle gocce d'acqua che scendono lentamente verso il basso. Quando raggiungono il fondo della finestra, scompaiono.
• Il bottone "Stop" interrompe l'animazione della pioggia, bloccando la generazione e la discesa delle gocce.

Struttura dell'interfaccia grafica

1. Canvas

   Utilizzato come area di disegno principale, dove saranno visualizzate le gocce di pioggia. Le gocce partiranno dalla parte superiore del canvas e, una volta raggiunto il fondo, verranno rimosse.

2. Bottoni

   • Start: Avvia l'animazione, facendo apparire le gocce che cadono.
   • Stop: Ferma l’animazione, impedendo ulteriori aggiornamenti grafici.

Elementi grafici utilizzati

Per rappresentare le gocce di pioggia si usano elementi grafici come:

• Ellipse: Oggetto grafico di forma ellittica. Può essere configurato per rappresentare una goccia, modificandone le dimensioni (Width e Height), il colore di riempimento (Fill) e il bordo.
• Rectangle: Oggetto di forma rettangolare, che può essere reso quadrato se altezza e larghezza sono uguali.

Entrambi gli oggetti grafici supportano personalizzazioni come:

• Colore di riempimento (Fill)